JSFiddle - React, Tailwind, and code Playground

by shs400

HTML

<div class="grid-container">
  <div class="item">첫번째 아이템</div>
  <div class="item">두번째 아이템</div>
  <div class="item">세번째 아이템</div>
  <div class="item">네번째 아이템</div>
  <div class="item">다섯번째 아이템</div>
  <div class="item">여섯번째 아이템</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.grid-container div {
  display: grid;
  align-items: center;
  justify-items: center;
  background-color: rgba(33,158,243,.5);
}