JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<h1 class="text-annotation">
CSS native grid options
</h1>
<h2 class="text-annotation">
😑 A single Grid, but no markup to wrap each row 
</h2>
<p class="text-annotation">Text columns are expanding to widest content of the three rows, however, we have no HTML element to wrap each row, so all grid items are just direct children of the grid container.</p>
<div class="grid">
  <label for="" class="grid-item-1">Header 1 long story</label>
  <label for="" class="grid-item-2">Sub 1</label>
  <input type="text" class="grid-item-3">
  <label for="" class="grid-item-1">Header 2</label>
  <label for="" class="grid-item-2">Sub 2 asdfdas fasd fas</label>
  <input type="text" class="grid-item-3">
  <label for="" class="grid-item-1">Header 3</label>
  <label for="" class="grid-item-2">Sub 3</label>
  <input type="text" class="grid-item-3">
</div>

<h2 class="text-annotation">
😑 A single Grid, with display:content row wrappers 
</h2>
<p class="text-annotation">Text columns are expanding to widest content of the three rows, however, each row wrapper is a "ghost" element where we can't apply further styling..</p>
<div class="grid">
  <div class="d-contents">
    <label for="" class="grid-item-1">Header 1 long story</label>
    <label for="" class="grid-item-2">Sub 1</label>
    <input type="text" class="grid-item-3">
  </div>
  <div class="d-contents">
    <label for="" class="grid-item-1">Header 2</label>
    <label for="" class="grid-item-2">Sub 2 asdfdas fasd fas</label>
    <input type="text" class="grid-item-3">
  </div>
  <div class="d-contents">
    <label for="" class="grid-item-1">Header 3</label>
    <label for="" class="grid-item-2">Sub 3</label>
    <input type="text" class="grid-item-3">
  </div>
</div>



<h2 class="text-annotation">
☹️ One separate Grid per row
</h2>
<p class="text-annotation">Since each row is a separate grid (albeit with the same grid definition with dynamic column widths), they are unaware of each other.</p>
<div class="grid">
  <label for=""...

CSS

* {
  font-family: sans-serif;
}

body {
  padding: 3rem;
}
h2 {
  margin-top: 4rem;
}
.text-annotation {
  color: #a87bf4;
}
.grid {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 1rem;
  margin-bottom: .5rem;
}

.grid-fixed {
  display: grid;
  grid-template-columns: 8rem 8rem 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 1rem;
  margin-bottom: .5rem;
}

.subgrid {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-template-columns: subgrid;
  margin-bottom: 1rem;
}

.grid-item-2 {
  font-size: 80%;
  color: gray;
}
.d-contents {
  display: contents;
  margin-bottom: 3rem; /* this styling doesn't apply, since it's a "ghost" element */
}