Grid

Build responsive grid systems with total layout freedom using one single class and custom properties.

  • Two columns grid

    <!-- Remember to set a container context with gh-@container outside the grid to enable container breakpoints. -->
<div class="gh-@container">
  <div class="gh-grid" style="--gh-sm-columns: 2; --gh-gap: var(--gh-space-small);">
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
  </div>
</div>

  • Three columns grid

    <!-- Remember to set a container context with gh-@container outside the grid to enable container breakpoints. -->
<div class="gh-@container">
  <div class="gh-grid" style="--gh-sm-columns: 2;--gh-md-columns: 3; --gh-gap: var(--gh-space-small);">
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
  </div>
</div>

  • Four columns grid

    <!-- Remember to set a container context with gh-@container outside the grid to enable container breakpoints. -->
<div class="gh-@container">
  <div class="gh-grid" style="--gh-sm-columns: 2;--gh-md-columns: 3;--gh-lg-columns: 4; --gh-gap: var(--gh-space-small);">
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
  </div>
</div>

  • Responsive grid using auto-fill

    <!-- Remember to set a container context with gh-@container outside the grid to enable container breakpoints. -->
<div class="gh-@container">
  <div class="gh-grid" style="--gh-columns: auto-fill; --gh-size: minmax(min(100%, 20rem), 1fr); --gh-gap: var(--gh-space-small);">
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
    <div class="gh-card"></div>
  </div>
</div>