明示的なグリッドと暗黙的グリッドを混在させて方眼用紙を作る

幅 10vw と高さ 10vw 。この例では、grid-auto-rows を使用して、暗黙的なグリッド内に作成されたトラックが 10vw の高さになることを保証している。「gap: 1px;」を使ったため、横一列には升が 9個設置され、左右に僅かばかりの余白が発生する。「justify-content: center;」を使って中央に配置させる。

class="grid_layout">
 <div></div>
 <div></div>
 <!-- 省略 -->
 <div></div>
 <div></div>
</div>

.grid_layout {
  display: grid;
  grid-auto-rows: 10vw;
  grid-template-columns: repeat(auto-fit, 10vw);
  justify-content: center; /* グリッド全体を中央に寄せる設定 */
  gap: 1px;
}

.grid_layout>div {
  padding: 0;
  font-size: 10px;
  background:rgba(222,240,251,1);
  color: #333;
}