JSFiddle - React, Tailwind, and code Playground

by Michael Nehring

HTML

<div style="background:green;height:40px;width:100%;display:block;">Test Div</div>
<div class="grid-table">
  <div class="grid-row table-head">
    <div>Header 1</div>
    <div>Header 2</div>
    <div>Header 3</div>
  </div>
  <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2dddddddddddddddddddddddhjbuozgbozugbouzbuozbozubozubuozbuozboudddddddddddddddddddddddddd</div>
    <div>Row 1, Cell jjjjjikniuhjiuhjuihuihuihuihiu3</div>
  </div>
    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row 1, Cell 2</div>
    <div>Row 1, Cell 3</div>
  </div>    <div class="grid-row">
    <div>Row 1, Cell 1</div>
    <div>Row...

CSS

.grid-table {
    display: grid;
    grid-template-columns: repeat(3, minmax(min-content, 1fr));
    grid-auto-rows: auto;
    width: 100%;
    border-collapse: collapse;
		height:300px;
		overflow:auto;
  }

  .grid-row {
    display: contents;
  }

  .grid-row > div {
    padding: 10px;
    border: 1px solid #ccc;
		word-break: break-all;
  }
	
  .grid-row:first-child > div {
    background-color:darkgreen;
		color:white;
  }
	
	.table-head > div {
		position:sticky;
		top:0;
	}