JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<!-- <div class="grid1">
  111111111111111111111111111111111111111111111111111111111111111111111111
</div> -->

<div class="grid1">
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, unde.
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, unde.
  </div>
</div>

<div class="grid2">
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, unde.
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, unde.
  </div>
</div>

<!-- <div class="grid2">
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum delectus laboriosam, fugiat, quae incidunt molestias aliquid eligendi dolorum aut obcaecati?
  </div>
</div> -->

CSS

.grid1  {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  margin: 10px;
  outline: 1px solid red;
}

.grid2  {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 10px;
  outline: 1px solid red;
}