JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="layout">
  <div class="example layout__container">layout__container</div>
</div>

<div class="layout">
  <div class="example layout__left">layout__left</div>
</div>

<div class="layout">
  <div class="example layout__right">layout__right</div>
</div>

<div class="layout">
  <div class="example layout__bleedLeft">layout__bleedLeft</div>
</div>

<div class="layout">
  <div class="example layout__bleedRight">layout__bleedRight</div>
</div>

<div class="layout">
  <div class="example layout__full">layout__full</div>
</div>

<div class="layout">
  <div class="example layout__firstHalf">layout__firstHalf</div>
</div>

<div class="layout">
  <div class="example layout__secondHalf">layout__secondHalf</div>
</div>

<div class="layout">
  <div class="example layout__right" st>layout__right</div>
  <div class="example layout__firstHalf">layout__firstHalf next to</div>
</div>

<div class="layout">
  <div class="example layout__bleedLeft">layout__bleedLeft behind</div>
  <div class="example layout__secondHalf">layout__secondHalf on top</div>
</div>

SCSS

.layout {
  display: grid;
  grid-template-columns: [bleed-left-start left-start full-start]
    minmax(30px, 1fr)
    [content-start bleed-right-start first-half-start]
    repeat(6, minmax(26px, 100px))
    [first-half-end second-half-start left-end right-start]
    repeat(6, minmax(26px, 100px))
    [content-end bleed-left-end second-half-end]
    minmax(30px, 1fr)
    [bleed-right-end right-end full-end];
    
  &__container { grid-area: content; }
  &__left { grid-area: left; }
  &__right { grid-area: right; }
  &__bleedLeft { grid-area: bleed-left; }
  &__bleedRight { grid-area: bleed-right; }
  &__full { grid-area: full; }
  &__firstHalf { grid-area: first-half; }
  &__secondHalf { grid-area: second-half; }
}

.example {
  font: 1rem monospace;
  padding: 1rem;
  background: #f004;
  margin-bottom: 1rem;
}