Fomantic-UI grids vs standard grids

Fomantic-UI grids vs standard grids experiments

by Andy Bulka

HTML

<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<link rel="stylesheet" href="https://fomantic-ui.com/dist/semantic.css">
 <div class="wrapper">
   <div class="box box1">Box 1</div>
   <div class="box box2">Box 2</div>
   <div class="box box3">Box 3</div>
   <div class="box box4">Box 4</div>
   <div>
     Lorem ipsum.
   </div>
   <div>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla quo eveniet placeat. In porro, repudiandae ipsum voluptatibus ratione enim accusantium rem consequatur ab? Alias tenetur ratione quibusdam accusantium aut quis totam! Voluptas labore officiis, unde sequi ad fuga, ex assumenda dolorem placeat atque excepturi ipsa architecto dolores dignissimos quod quibusdam quasi repellat vero cum perspiciatis laboriosam qui sint exercitationem quisquam.
   </div>
   <div>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolorem sit similique sequi veritatis quas soluta nam alias maxime. Quos rerum soluta neque, incidunt eius illum amet laboriosam nostrum vel.
   </div>

   <div>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla quo eveniet placeat. In porro, repudiandae ipsum voluptatibus ratione enim accusantium rem consequatur ab? Alias tenetur ratione quibusdam accusantium aut quis totam! Voluptas labore officiis, unde sequi ad fuga, ex assumenda dolorem placeat atque excepturi ipsa architecto dolores dignissimos quod quibusdam quasi repellat vero cum perspiciatis laboriosam qui sint exercitationem quisquam. Quisquam suscipit fugiat doloremque quasi ad debitis dolor quaerat nihil aliquam at ducimus consequuntur repudiandae numquam eligendi, fugit, excepturi doloribus!
   </div>
   <div>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium dolorem sit similique sequi veritatis quas soluta nam alias maxime. Quos rerum soluta neque, incidunt eius illum amet laboriosam nostrum vel.
   </div>
 </div>

 <p>What a grid is useful for is layout out rows...

CSS

.wrapper>div {
  background: #eee;
  padding: 1em;
}

.wrapper>div:nth-child(odd) {
  background: #ddd;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 2em;
  grid-auto-rows: minmax(100px, auto);
  /* justify-items:start; */
  /* align-items:stretch; */
  justify-items: center;
  align-items: center;
}

.box1 {
  align-self:start;
  justify-self: stretch;
  grid-column: 1/2;
  grid-row: 2;
}

.box4{
      grid-column:1;
      grid-row:2/4;
      border:1px solid #333;
    }

JavaScript

$('.ui.dropdown')
    .dropdown();