JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="grid">
  <div class="blah">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur officiis omnis excepturi dolores nisi quasi, blanditiis necessitatibus obcaecati? Quo, esse vitae quis. Quae doloribus aperiam dicta cupiditate delectus nemo eos.</div>
  <div class="baz">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero ratione, ipsum, autem fugiat commodi iusto et nemo voluptates, quae necessitatibus nulla unde adipisci incidunt officia repudiandae aliquid itaque facilis magnam.</div>
  <div class="wut"></div>
</div>

CSS

.grid {
  display: grid;
  gap: 16px;
  grid: 1fr / [left-edge] auto [left-container c0] minmax(calc((1200px - 16px * 11)/12), 1fr) [c1] minmax(calc((1200px - 16px * 11)/12), 1fr) [c2] minmax(calc((1200px - 16px * 11)/12), 1fr) [c3] minmax(calc((1200px - 16px * 11)/12), 1fr) [c4] minmax(calc((1200px - 16px * 11)/12), 1fr) [c5] minmax(calc((1200px - 16px * 11)/12), 1fr) [c6 center] minmax(calc((1200px - 16px * 11)/12), 1fr) [c7] minmax(calc((1200px - 16px * 11)/12), 1fr) [c8] minmax(calc((1200px - 16px * 11)/12), 1fr) [c9] minmax(calc((1200px - 16px * 11)/12), 1fr) [c10] minmax(calc((1200px - 16px * 11)/12), 1fr) [c11] minmax(calc((1200px - 16px * 11)/12), 1fr) [c12] minmax(calc((1200px - 16px * 11)/12), 1fr) [right-container c13] auto [right-edge];
}

.blah {
  background-color: lightsalmon;
  grid-column: c0 / c4;
}

.baz {
  background-color: lavenderblush;
  grid-column: center / c12;
}

.wut {
  background-color: lime;
  grid-column: left-edge / center;
  height: 10vmin;
}