CSS Grid は、要素を**行（row）と列（column）**の2次元で配置できるレイアウトシステムです。
Flexboxが「1方向（横または縦）」の配置に強いのに対して、Gridは「縦横どちらも」自由にコントロールできます。
複雑なレイアウトでも、シンプルなCSSで簡単に実現できるのが特徴です。
1
2
3
4
5
6
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); (three time 1fr)
gap: 10px;
padding: 20px;
}
.item {
background-color: black;
color: white;
text-align: center;
padding: 30px;
border-radius: 8px;
}
display: grid;：グリッドレイアウトを有効にします。
grid-template-columns: repeat(3, 1fr);：3列レイアウトを指定（1frは残りのスペースを均等に分ける単位）。
gap: 10px;：アイテム同士の間隔を指定。
grid-template-rows を使えば行の高さも自由に設定できます。