Grid System

Overview

The 12 column grid system is probably the most complex part of cwf-lite. There are two grid formats, one using css grid and one using flexbox, you should choose which one you want to use based on your specific requirments.

Why 12 columns?

Because it divides easily into a variety of patterns. You can split it in half for two even columns, or into thirds, or fourths. It also supports some irregular or asymmetrical layouts.

In short, it’s really flexible.

---

CSS Grid

<div class="container container--fluid">
  <div class="grid column-gap--5 row-gap--4">
    <div class="column column-start--1 column-span--3">
      <div class="card">
        <section class="card__body">
          <code>.column.column-start--1.column-span--3</code>
        </section>
      </div>
    </div>
    <div class="column column-start--md-4 column-span--md-3">
      <div class="card">
        <section class="card__body">
          <code>.column.column-start--md-4.column-span--md-3</code>
        </section>
      </div>
    </div>
    <div
      class="column column-start--md-8 column-span--md-5 column-start--xl-9 column-span--xl-4"
    >
      <div class="card">
        <section class="card__body">
          <code>
            .column.column-start--md-8.column-span--md-5.column-start--xl-9.column-span--xl-4
          </code>
        </section>
      </div>
    </div>
  </div>
</div>

In this example we declare what grid system we are using by adding the grid class to the parent element. We have also added a column and row gap for aesthetic reasons.

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/bases/grid.css

• Directorystyle

  • Directorybases

    • grid.css

Stylesheet

@layer cwf-bases {
  .grid {
    display: var(--grid-display, grid);
    grid-template-columns: var(
      --grid-template-columns,
      repeat(var(--columns, 12), 1fr)
    );
    grid-template-rows: var(--grid-template-rows, repeat(var(--rows, 1), 1fr));
    gap: var(--grid-gap, 0);

    > .column {
      --column-grid-column-start: auto;
      --column-grid-column-end: span 12;

      --column-grid-row-start: auto;
      --column-grid-row-end: span 1;

      grid-column-start: var(--column-grid-column-start);
      grid-column-end: var(--column-grid-column-end);

      grid-row-start: var(--column-grid-row-start);
      grid-row-end: var(--column-grid-row-end);

      @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
        &.column-start--$(size) {
          --column-grid-column-start: $(size);
        }

        &.column-span--$(size) {
          --column-grid-column-end: span $(size);
        }

        &.row-start--$(size) {
          --column-grid-row-start: $(size);
        }

        &.row-span--$(size) {
          --column-grid-row-end: $(size);
        }
      }

      @media (min-width: 320px) {
        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column-start--xs-$(size) {
            --column-grid-column-start: $(size);
          }

          &.column-span--xs-$(size) {
            --column-grid-column-end: span $(size);
          }

          &.row-start--xs-$(size) {
            --column-grid-row-start: $(size);
          }

          &.row-span--xs-$(size) {
            --column-grid-row-end: $(size);
          }
        }
      }

      @media (min-width: 576px) {
        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column-start--sm-$(size) {
            --column-grid-column-start: $(size);
          }

          &.column-span--sm-$(size) {
            --column-grid-column-end: span $(size);
          }

          &.row-start--sm-$(size) {
            --column-grid-row-start: $(size);
          }

          &.row-span--sm-$(size) {
            --column-grid-row-end: $(size);
          }
        }
      }

      @media (min-width: 768px) {
        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column-start--md-$(size) {
            --column-grid-column-start: $(size);
          }

          &.column-span--md-$(size) {
            --column-grid-column-end: span $(size);
          }

          &.row-start--md-$(size) {
            --column-grid-row-start: $(size);
          }

          &.row-span--md-$(size) {
            --column-grid-row-end: $(size);
          }
        }
      }

      @media (min-width: 1024px) {
        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column-start--rg-$(size) {
            --column-grid-column-start: $(size);
          }

          &.column-span--rg-$(size) {
            --column-grid-column-end: span $(size);
          }

          &.row-start--rg-$(size) {
            --column-grid-row-start: $(size);
          }

          &.row-span--rg-$(size) {
            --column-grid-row-end: $(size);
          }
        }
      }

      @media (min-width: 1216px) {
        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column-start--lg-$(size) {
            --column-grid-column-start: $(size);
          }

          &.column-span--lg-$(size) {
            --column-grid-column-end: span $(size);
          }

          &.row-start--lg-$(size) {
            --column-grid-row-start: $(size);
          }

          &.row-span--lg-$(size) {
            --column-grid-row-end: $(size);
          }
        }
      }

      @media (min-width: 1408px) {
        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column-start--xl-$(size) {
            --column-grid-column-start: $(size);
          }

          &.column-span--xl-$(size) {
            --column-grid-column-end: span $(size);
          }

          &.row-start--xl-$(size) {
            --column-grid-row-start: $(size);
          }

          &.row-span--xl-$(size) {
            --column-grid-row-end: $(size);
          }
        }
      }
    }
  }

  .grid--flex {
    display: var(--flex-grid-display, flex);
    flex-flow: var(--flex-grid-flex-flow, wrap row);
    margin-right: var(--flex-grid-margin-right, -var(--size-3));
    margin-left: var(--flex-grid-margin-left, -var(--size-3));

    > .column {
      max-width: var(--column-max-width, 100%);
      padding-right: var(--column-padding-right, var(--size-3));
      padding-left: var(--column-padding-left, var(--size-3));
      width: var(--column-width, 100%);

      &.column--auto {
        flex: var(--column-flex, 0 0 auto);
        width: var(--column-width, auto);
      }

      &.column--fit {
        flex: var(--column-flex, 1 0 0%);
      }

      @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
        &.column--$(size) {
          flex: var(--column-flex, 0 0 auto);
          width: var(--column-width, calc((100% / 12) * $(size)));
        }

        &.offset--$(size) {
          margin-left: var(--column-margin-left, calc((100% / 12) * $(size)));
        }
      }

      @media (min-width: 320px) {
        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column--xs-$(size) {
            flex: var(--column-flex, 0 0 auto);
            width: var(--column-width, calc((100% / 12) * $(size)));
          }

          &.offset--xs-$(size) {
            margin-left: var(--column-margin-left, calc((100% / 12) * $(size)));
          }
        }
      }

      @media (min-width: 576px) {
        &.column--sm-auto {
          flex: var(--column-flex, 0 0 auto);
          width: var(--column-width, auto);
        }

        &.column--sm-fit {
          flex: var(--column-flex, 1 0 0%);
        }

        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column--sm-$(size) {
            flex: var(--column-flex, 0 0 auto);
            width: var(--column-width, calc((100% / 12) * $(size)));
          }

          &.offset--sm-$(size) {
            margin-left: var(--column-margin-left, calc((100% / 12) * $(size)));
          }
        }
      }

      @media (min-width: 768px) {
        &.column--md-auto {
          flex: var(--column-flex, 0 0 auto);
          width: var(--column-width, auto);
        }

        &.column--md-fit {
          flex: var(--column-flex, 1 0 0%);
        }

        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column--md-$(size) {
            flex: var(--column-flex, 0 0 auto);
            width: var(--column-width, calc((100% / 12) * $(size)));
          }

          &.offset--md-$(size) {
            margin-left: var(--column-margin-left, calc((100% / 12) * $(size)));
          }
        }
      }

      @media (min-width: 1024px) {
        &.column--rg-auto {
          flex: var(--column-flex, 0 0 auto);
          width: var(--column-width, auto);
        }

        &.column--rg-fit {
          flex: var(--column-flex, 1 0 0%);
        }

        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column--rg-$(size) {
            flex: var(--column-flex, 0 0 auto);
            width: var(--column-width, calc((100% / 12) * $(size)));
          }

          &.offset--rg-$(size) {
            margin-left: var(--column-margin-left, calc((100% / 12) * $(size)));
          }
        }
      }

      @media (min-width: 1216px) {
        &.column--lg-auto {
          flex: var(--column-flex, 0 0 auto);
          width: var(--column-width, auto);
        }

        &.column--lg-fit {
          flex: var(--column-flex, 1 0 0%);
        }

        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column--lg-$(size) {
            flex: var(--column-flex, 0 0 auto);
            width: var(--column-width, calc((100% / 12) * $(size)));
          }

          &.offset--lg-$(size) {
            margin-left: var(--column-margin-left, calc((100% / 12) * $(size)));
          }
        }
      }

      @media (min-width: 1408px) {
        &.column--xl-auto {
          flex: var(--column-flex, 0 0 auto);
          width: var(--column-width, auto);
        }

        &.column--xl-fit {
          flex: var(--column-flex, 1 0 0%);
        }

        @each $size in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
          &.column--xl-$(size) {
            flex: var(--column-flex, 0 0 auto);
            width: var(--column-width, calc((100% / 12) * $(size)));
          }

          &.offset--xl-$(size) {
            margin-left: var(--column-margin-left, calc((100% / 12) * $(size)));
          }
        }
      }
    }
  }
}