Flex Grid (Flex Box Grid)

Flex Grid (Flex Box Grid) with CSS Custom Properties

by amindunited

HTML

<div class="demo page">
  <div class="container">
    <h1>Flex Grid (Flex Box Grid) with CSS Custom Properties</h1>
    <div class="card">
      <h2>Flex Grid</h2>
<!--
      <div class="legend">
        <h3>Legend</h3>
        <div class="flex-grid">Grid</div>
        <div class="flex-grid-row">Row</div>
        <div class="flex-grid-column">Column</div>
        <div class="flex-grid-cell">Cell</div>
      </div>
-->
      <!-- SOF Demo Info -->
      <div class="info">
        <div class="DEFAULT">Default. 4 Column Grid</div>
        <div class="SM">Small (> 640px). 4 Column Grid</div>
        <div class="MD">Medium (> 900px). 8 Column Grid</div>
        <div class="LG">Large (> 1200px). 12 Column Grid</div>
      </div>
      <!-- EOF Demo Info -->

      
      <!-- SOF Actual Example -->
      
      <h3>Examples</h3>
      <p>
        A Single Row of 12 Columns. Where each column is ONE column width. 
      </p>
      <sub>
        ** Note that the 'pink ghost' columns in the background are rendered by the CSS Grid equivalent.
      </sub>
      <div class="flex-grid cheese" id="always-12">
        <div class="grid-lines">
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour"></div>
          <div class="grid-colour gc2"></div>
          <div class="grid-colour gc2"></div>
          <div class="grid-colour gc2"></div>
          <div class="grid-colour gc2"></div>
          <div class="grid-colour gc2"></div>
          <div class="grid-colour gc2"></div>
        </div>
        <!-- SOF Row with 1 Column -->
        <div...

CSS

.flex-grid {
    /* What is the Gutter Size */
  --gutter: 16px;

  /* How Many Columns there are in the grid */
  --totalCols: 4;

  /* The width of each element (in number of columns) */
  --colSpan: var(--totalCols); 

  /* Calculate the width (as percent) from the total number of columns by the colSpan (number of columns to span) */
  --colWidth: calc(100% / var(--totalCols) * var(--colSpan));

  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.flex-grid-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.flex-grid-column {
  /* What is the Gutter Size */
  --gutter: 16px;

  /* How Many Columns there are in the grid */
  --totalCols: 4;

  /* The width of each element (in number of columns) */
  --colSpan: var(--totalCols); 

  /* Calculate the width (as percent) from the total number of columns by the colSpan (number of columns to span) */
  --colWidth: calc(100% / var(--totalCols) * var(--colSpan));
  width: var(--colWidth);
}

.flex-grid-cell { padding: calc(var(--gutter) / 2); height: 100%; }

.flex-grid-column.colSpan-1  { --colSpan: 1; }
.flex-grid-column.colSpan-2  { --colSpan: 2; }
.flex-grid-column.colSpan-3 { --colSpan: 3; }
.flex-grid-column.colSpan-4 { --colSpan: 4; }
.flex-grid-column.colSpan-5 { --colSpan: 5; }
.flex-grid-column.colSpan-6 { --colSpan: 6; }
.flex-grid-column.colSpan-7 { --colSpan: 7; }
.flex-grid-column.colSpan-8 { --colSpan: 8; }
.flex-grid-column.colSpan-9 { --colSpan: 9; }
.flex-grid-column.colSpan-10 { --colSpan: 10; }
.flex-grid-column.colSpan-11 { --colSpan: 11; }
.flex-grid-column.colSpan-12 { --colSpan: 12; }


@media (min-width: 640px) {
  .flex-grid-column { --totalCols: 4; }
  .flex-grid-column.SM-1  { --colSpan: 1; }
  .flex-grid-column.SM-2  { --colSpan: 2; }
  .flex-grid-column.SM-3  { --colSpan: 3; }
  .flex-grid-column.SM-4  { --colSpan: 4; }
  .flex-grid-column.SM-5  { --colSpan: 5; }
  .flex-grid-column.SM-6  {...