※有料会員になるとこの動画をご利用いただけます
詳しい説明を読む
＃01:グリッドレイアウト(grid)
このチャプターでは、グリッドレイアウトについて学習します。
グリッドレイアウトは、Webページの要素を格子状に配置するCSSのレイアウトシステムです。これにより、複雑なレイアウトもシンプルに構築できます。
グリッドレイアウトを利用するには、まず親要素のdisplayプロパティにgridを指定します。これにより、その親要素は「グリッドコンテナ」となり、その直下の子要素は「グリッドアイテム」として扱われるようになります。
ただし、グリッドコンテナを作成しただけではまだグリッドの形状は定義されていません。この状態だと、ブラウザは「単一列のグリッド」が作成されたと判断し、グリッドアイテムは上から下に並べられます。本格的なグリッドレイアウトを作成するには、明示的にグリッドの行や列のサイズ、数を定義する必要があります。displayプロパティにgridを指定することで、子要素であるグリッドアイテムは、設定したグリッドの大きさに合わせて自動的に格子状に配置されます。さらに、グリッドアイテムは、グリッド内の特定の場所へ配置したり、複数のセルにまたがって表示したりといった、より詳細な位置調整も可能です。
MDN web docs - CSS グリッドレイアウト
https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Grids
MDN web docs - display
https://developer.mozilla.org/ja/docs/Web/CSS/display