JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="columns">
<div class="ex">left</div>
  <div class="ex">1</div>
  <div class="ex">2</div>
  <div class="ex">3</div>
  <div class="ex">4</div>
  <div class="ex">5</div>
  <div class="ex">6</div>
  <div class="ex">7</div>
  <div class="ex">8</div>
  <div class="ex">9</div>
  <div class="ex">10</div>
  <div class="ex">11</div>
  <div class="ex">12</div>
  <div class="ex">right</div>
</div>

<div class="columns">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus harum suscipit autem expedita, dolores incidunt sint, impedit neque explicabo eius ad nobis. Pariatur ex iusto commodi quo temporibus omnis, ut.</div>
</div>

SCSS

:root {
  --columns: 12;
  --gap: 16px;
  --max-width: 1200px;
}

.columns {
  display: grid;
  gap: 16px;
  grid: auto / [left-edge] 1fr [left] repeat(12, minmax(0, calc((1200px - 13 * 16px)/12))) [right] 1fr [right-edge];
}

.content {
  grid-column: left / right;
  background-color: pink;
}