Posh UI

CSS Grid

CSS Grid can be used to structure elements in rows and columns.

Two Columns Grid

Grid Item One
Grid Item Two
                    
<div class="grid grid-cols-2">
  <div>Grid Item One</div>
  <div>Grid Item Two</div>
</div>

Two Rows Grid

Grid Item One
Grid Item Two
                    
<div class="grid grid-rows-2">
  <div>Grid Item One</div>
  <div>Grid Item Two</div>
</div>

Three Columns Grid

Grid Item One
Grid Item Two
Grid Item Three
                    
<div class="grid grid-cols-3">
  <div>Grid Item One</div>
  <div>Grid Item Two</div>
  <div>Grid Item Three</div>
</div>

Three Rows Grid

Grid Item One
Grid Item Two
Grid Item Three
                    
<div class="grid grid-rows-3">
  <div>Grid Item One</div>
  <div>Grid Item Two</div>
  <div>Grid Item Three</div>
</div>