Example 12 Column using CSS Grid

This is intended to replicated the bootstrap 12 column grid using the CSS Grid. It is a simple example to show how to use the grid.

It is not intended to be a full replacement for bootstrap, but a simple example to show how a grid could be created.

Span 12 (small)/ Span 8 (med)

Span 6 (small)/ Span 4 (med)

Span 4

Span 3

Span 4

Span 8

Code

CSS


      /**
       * 12 Column Grid
       */
      .grid-row {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(12, 1fr);
      }

      .span-1 {
        grid-column: span 1;
      }
      
      .span-2 {
        grid-column: span 2;
      }
      
      .span-3 {
        grid-column: span 3;
      }

      ...

      @media screen and (min-width: 800px) {

        .span-md-1 {
          grid-column: span 1;
        }
        
        .span-md-2 {
          grid-column: span 2;
        }
        
        .span-md-3 {
          grid-column: span 3;
        }
        ...
      }

HTML

      <div class="grid-row padding-bottom">
        <div class="box span-6 span-md-4 section">Span 6 (small)/ Span 4 (med)</div>
        <div class="box span-6 span-md-4 section">Span 6 (small)/ Span 4 (med)</div>
      </div>