Taeluf.com

styles.css

* {
    box-sizing: border-box;
  }
  
  .container {
      /* display:flex;
      flex-wrap:wrap;
      flex-direction:row;
      justify-content:flex-start;
      align-items:stretch; */
      width:100%;
      min-height:100%;
  }
  
  #wyg {
      min-height:400px;
      border-bottom: 1px solid black;
      border-top: 1px solid black;
  }
  #elementList {
      min-height:80px;
      max-width:1024px;
      background:lightgrey;
      display:grid;
      grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
      padding:8px;
  }
  #groupList {
      max-width:1024px;
      min-height:80px;
      background:grey;
      display:grid;
      grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
      padding:8px;
  }
  #settings {
      max-width:1024px;
      min-height:200px;
      background:lightgrey
  }
  #settings::before {
     content: "Settings";
  }
  
  .element {
      border: 1px solid black; 
      margin:4px;
      padding:4px;
      height:2em;
      display:inline-block;
  }
  
  .group {
      height:3em;
      border: 1px solid black;
      display:inline-block;
      margin:4px;
      padding:4px;
  }