Grids

Use grids to create sections of your viewport. Using css grid you can create way more complex layouts than with tables.

Grids - 2 Columns

Use grid & grid-cols-2 to divide your layout into 2 equal columns.

        
  <div class="grid grid-cols-2">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
  </div>
        
      

Grids - 2 Rows

Use grid & grid-rows-2 to divide your layout into 2 equal rows.

        
  <div class="grid grid-rows-2">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
  </div>
        
      

Grids - 3 Columns

Use grid & grid-cols-3 to divide your layout into 3 equal columns.

        
  <div class="grid grid-cols-3">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
    <div class="grid-block"></div>
  </div>
        
      

Grids - 3 Rows

Use grid & grid-rows-3 to divide your layout into 3 equal rows.

        
  <div class="grid grid-rows-3">
    <div class="grid-block"></div>
    <div class="grid-block"></div>
    <div class="grid-block"></div>
  </div>