シンプルなグリッドのリスト（auto-fill）

説明

repeat()を使うことで、縦横に並ぶグリッドのリストを作れます。グリッドアイテムの間の余白はgapプロパティで指定できます。

この例ではauto-fillを使っているので、上記のデモの横幅を大きくすると、残りの余白にグリッドを作り、自動で埋めます。

デモの横幅を狭くした際の動作は、シンプルなグリッドのリスト（auto-fit）と同じです。

HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

このHTMLへ修正リクエストをする

CSS

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 20px;
}

/* 装飾 */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: #ccc;
}

このCSSへ修正リクエストをする