CSSグリッドレイアウトの基本

display: grid

要素をグリッドコンテナに変え、その子要素をグリッドアイテムとして配置します。

grid-template-columnsプロパティ

列のサイズを定義します。例: grid-template-columns: 1fr 2fr; は2列を定義し、2番目の列は1番目の列の2倍の幅になります。

grid-template-rowsプロパティ

行のサイズを定義します。例: grid-template-rows: 100px 200px; は固定サイズの2行を作成します。

グリッドレイアウトを使うことで、複雑なデザインも簡単に作成できます。次回は、CSSトランジションとアニメーションについて学びましょう。