이번에 곤란한 일

그런 CSS를 짜고 싶었다.
텍스트는 가변적이고 평평하며,
하나의 요소가 가로폭의 1/3 정도의 크기로 가로폭 넘으면 아래에 숨어있는 느낌의 것.
또한, 모든 요소의 높이는 함께.

처음 시도한 것

최근 flexbox만 사용하고 있었다(flex 편리) 때문에 flex로 어떻게든 이렇게 할 수 없는 것이라고 생각했다.
결국 도착한 대답은

<ul>
  <li>
    ライオン
  </li>
  <li>
    チーター
  </li>
  <li>
    鷹
  </li>
  <li>
    ラビット
  </li>
  <li>
    カンガルー
  </li>
  <li>
    アニマルアニマル
  </li>
</ul>

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  width: 32%;
  min-height: 100px;
  padding: 10px;
  margin-right: 2px;
  margin-bottom: 2px;
  border: 1px solid #444;
  box-sizing: border-box;
}

완성형

본 목적으로는 하고 싶을 수 있었다! !
처럼 보였다 그러나 사실은 li에 min-height: 100px;를 추가하고 있었다. . .
그래서 텍스트의 양이 엄청 늘었을 때 아웃.

해결책

최근 CSS 그리드 레이아웃
잘 들었지만 아직 만지지 않았다. . (부끄러운)
가볍게 살펴보고 이것으로 갈 수 있니? 라는 것으로 사용해 보았습니다.

css grid layout

css grid layout이란 2차원 그리드 시스템이라고 합니다.
간단히 말하면 행과 열이 있고, 그들을 css로 지정하여 디자인 해 나갈까? 라는 느낌입니까?

코드

HTML은 변하지 않으므로 생략.

ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-row-gap: 6px;
  grid-column-gap: 6px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  padding: 10px;
  margin-right: 2px;
  margin-bottom: 2px;
  border: 1px solid #444;
  box-sizing: border-box;
}

할 수있는 것

해설

설명하면,
우선 부모 요소(여기서 말하는 ul)에 display: grid를 지정.
grid-template-columns는 가로 (열)의 크기를 정의합니다.
grid-row-gap: 6px; grid-column-gap: 6px;로 여백을 지정합니다.