JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="parent">
  <div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita dolores provident nihil tempore, vero ex dicta consequuntur explicabo deleniti quo adipisci laudantium necessitatibus obcaecati itaque odio suscipit nam illo facilis?</div>
  <div class="div2">div1 </div>
  <div class="div3">div1 </div>
  <div class="div4">div1 </div>
  <div class="div5">div1 </div>
  <div class="div6">div1 </div>
  <div class="div7">div1 </div>
  <div class="div8">div1 </div>
</div>

CSS

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: repeat(5, 1fr); */
  grid-gap: 10px;
  /* grid-row-gap: 10px; */
}
.parent div {
  border: 1px solid red;
}