ウェブサイト検索

CSS グリッドのガイド: グリッド プロパティを使用してレイアウトをマスターする


CSS グリッドを使用して複雑なレイアウトを簡単に構築する方法を学びます。

複雑なレイアウトを操作する場合、Web ページ上での要素の配置は非常に複雑になることがあります。ここで CSS グリッドが役に立ちます。複雑なレイアウトの作成プロセスを簡素化するために設計されたレイアウト システムです。

それはどのように役立ちますか?要素を行または列のいずれかに配置することしかできない従来のレイアウト方法とは異なり、CSS グリッドは行と列を使用した 2D アプローチという両方の長所を提供します。

グリッドコンテナとアイテム

CSS グリッド プロパティは、親と子という 2 つの主要なタイプの要素に適用できます。親要素の表示プロパティを「grid」に設定すると、その要素がグリッド コンテナに変換されます。このグリッド コンテナ内の子要素はすべてグリッド アイテムとなり、適用されたグリッド プロパティを継承します。

それをどのように表すかは次のとおりです。

グリッド項目はグリッド コンテナーになることもできます。これで、レイアウトをネストされたグリッド (グリッド内のグリッド) として参照できるようになります。メインのグリッド コンテナは外側グリッドと呼ばれるようになり、アイテムからグリッド コンテナになったコンテナは内側グリッドになります。

これらの各グリッドは互いに独立して動作します。つまり、内側のグリッドに設定されたプロパティは外側のグリッドのレイアウトに影響を与えず、その逆も同様です。

以下にその様子を示します。

2 次元レイアウトを効果的に構築するには、グリッド コンテナとアイテムの関係を理解することが不可欠です。

グリッド コンテナー用のグリッド プロパティと、グリッド アイテム用のグリッド プロパティがあることに注意してください。

グリッド線とトラック

CSS グリッドの使用を開始する前に、次の 2 つの重要な用語を理解しておく必要があります。

  1. グリッド ライン: グリッド ラインは、CSS グリッド レイアウトでグリッドを形成する水平線と垂直線を指します。これらは行と列の開始点と終了点を指定し、グリッド上のどこに配置するかを整理するのに役立ちます。これらの線は箱の端に似ています。配置時に要素を参照するのに役立つ番号が付いています。ここでは、赤い破線がそれらを表しています。

グリッド ラインとトラックは、方眼紙の線のような、グリッド レイアウトの構成要素であると考えてください。水平グリッド線が垂直グリッド線と交差すると、ボックス型のセルが形成されます。これらのセルは、グリッド項目を配置できるコンテナとして機能します。

CSS グリッド コンテナのプロパティ

これらは、グリッド コンテナーに適用してレイアウトを整理し、その中に要素を配置するのに役立つプロパティです。前に述べたように、その 1 つはグリッドに設定された表示プロパティです。さらに詳しくは次のとおりです。

グリッドテンプレート

このプロパティは行と列のサイズを定義します。これらのプロパティのサイズは、ピクセル、パーセンテージ、または小数単位 (fr) を使用して設定できます。また、autominmax()repeat() などのキーワードを使用して柔軟性を高めることもできます。

  • grid-template-rows: 行の高さを設定します。
  • grid-template-columns: 列の幅を定義します。

ここではいくつかの例を示します。

ピクセルの使用:

.grid-container {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-template-rows: 250px 250px;
}

パーセンテージの使用:

.grid-container {
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 50% 50%;
}

fr の使用:

.grid-container {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
}

auto キーワードと minmax() キーワードの使用:

.grid-container {
  grid-template-columns: auto minmax(150px, 1fr) auto;
  grid-template-rows: 100px auto;
}

一貫したサイズ設定のためのrepeat() の使用:

.grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
}

自動配置およびグリッド テンプレート領域

自動配置: 自動配置は、グリッドにアイテムを配置する場所を決定させるようなものです。正確な位置を指定しない場合、グリッドはマークアップに表示される順序で項目を自動的に配置します。これは、多くのアイテムがあり、それらをグリッドに均等に埋めたい場合に役立ちます。

グリッド テンプレート エリア: グリッド テンプレート エリアは、名前付きゾーンを使用してレイアウトを作成するものと考えてください。間取り図で部屋に名前を付けるようなものです。グリッド項目を配置するときに、これらの領域名を参照できます。例えば:

.grid-container {
  grid-template-areas:'header header header header'
    'sidebar main main right'
    'sidebar content content right'
    'footer footer footer footer';
}

このレイアウトは、3 列 4 行のグリッドに似ています。メイン コンテンツ領域には 2 つの行があります。ラベル付けされた領域には、「ヘッダー」、「サイドバー」、「コンテンツ」、および「フッター」が含まれます。次のセクションでは、各グリッド アイテムのプロパティでこれらのエリア ラベルを使用する方法を学習します。

CSSグリッドでの配置

配置プロパティを使用して、グリッド セル内のグリッド項目の位置を制御できます。プロパティは次のとおりです。

  • justify-items: グリッド セル内の項目の水平方向の配置を制御します。

    • : 開始、終了、中心、ストレッチ。
  • align-items: グリッド セル内の項目の垂直方向の配置を制御します。

    • : 開始、終了、中心、ストレッチ。
  • justify-content: コンテナ内のグリッド全体を水平軸に沿って配置します。

    • : 開始、終了、中心、ストレッチ、間隔、周囲間隔、均等間隔。
  • align-content: コンテナ内のグリッド全体を垂直軸に沿って配置します。

    • : 開始、終了、中心、ストレッチ、間隔、周囲間隔、均等間隔。

以下に例を示します。

.grid-container {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  align-content: center;
}

この例では、項目はセル内で水平方向と垂直方向の両方で中央に配置されます。スペースはグリッド全体の列間に均等に配分され、グリッドはコンテナー内で垂直方向の中央に配置されます。

グリッドギャップ

グリッド ギャップとは、グリッド レイアウトの行と列の間のスペースを指します。これは視覚的な分離を作成するのに役立ち、グリッド項目間にスペースを追加します。

grid-gap プロパティを使用すると、行と列の間のギャップを設定できます。ピクセル (px)、パーセンテージ (%)、em 単位 (em) など、さまざまな単位を使用して定義できます。

.grid-container {
  grid-gap: 20px;
}

この例では、グリッド コンテナーには 20 ピクセルのギャップを持つ 2 つの列があります。この間隔により列が視覚的に分離され、レイアウトが強化されます。

CSS グリッド項目のプロパティ

CSS グリッド レイアウト内の個々のグリッド項目の動作を制御するいくつかの主要なプロパティと例を次に示します。

グリッド行の開始とグリッド行の終了:

  • 項目の開始行と終了行を定義します。
  • 値は行番号、「span n」、または「auto」です。
.grid-item-1 {
  grid-row-start: 2;
  grid-row-end: 4;
}

このコードはグリッド項目 1 を 2 行目の行から 4 行目の行に配置します。

グリッド列の開始とグリッド列の終了:

  • 項目の開始列行と終了列行を定義します。
  • 値は行番号、「span n」または「auto」です。
.grid-item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
}

このコードはグリッド項目 2 を 1 列行から 3 列行に配置します。

グリッドエリア:

  • grid-template-areas 内の名前付きグリッド線を参照して、グリッド内のグリッド項目のサイズと位置を指定します。
  • 前述したように、事前定義されたエリア名はすでに grid-template-areas プロパティで使用されています。ここではグリッドエリアと組み合わせた使用例を示します。
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.content {
  grid-area: content;
}
.right {
  grid-area: right;
}
.footer {
  grid-area: footer;
}

結果は次のとおりです。

自己を正当化する:

  • 個々の項目をセル内で水平に配置します。
  • 値には、開始、終了、中心、ストレッチを指定できます。
.grid-item-5 {
  justify-self: center;
}

このコードは、 セル内のグリッド項目 5 を水平方向の中央に配置します。

自己調整:

  • セル内で個々の項目を垂直方向に整列させます。
  • 値には、開始、終了、中心、ストレッチを指定できます。
.grid-item-1 {
  align-self: end;
}

このコードはグリッド項目 1 をセルの下部に配置します。

これらのプロパティを自由に組み合わせてカスタマイズして、CSS グリッド内の各グリッド項目に必要なレイアウトと外観を作成します。

CSS グリッドを使用したレスポンシブ レイアウトの作成

CSS グリッドを使用してレスポンシブ レイアウトを作成することは、Web ページがさまざまな画面サイズやデバイスにシームレスに適応するようにするために重要です。次の方法を適用できます。

  • メディア クエリ: メディア クエリを使用して、画面サイズに応じて異なるグリッド レイアウトを適用できます。たとえば、小さな画面に合わせてグリッド項目を再配置したり、列幅を調整したりする必要がある場合があります。
  • 柔軟な単位: パーセンテージや fr などの相対単位を使用して、グリッド項目と列を利用可能なスペースに比例して調整できるようにします。
  • minmax(): minmax() 関数を使用して、グリッドの列または行のサイズの範囲を指定します。これにより、さまざまな画面上で項目が小さすぎたり大きすぎたりすることがなくなります。

列や、グリッド項目間のギャップ、フォント サイズ、余白などのその他の要素を忘れずに調整してください。これにより、さまざまなデバイスで適切に動作する、一貫性のある適切に設計されたレイアウトが保証されます。

CSS グリッド レイアウトの可能性を探る

CSS グリッドの柔軟性とパワーを活用すると、見栄えが良いだけでなく、最新の Web デザインの要求にシームレスに適応するレイアウトを作成できます。したがって、グリッドの世界に飛び込み、可能性を探求し、Web 開発スキルを高めてください。

レイアウト システムを詳しく調べると、他のレイアウト方法と CSS グリッドを比較したくなる場合があります。これは、CSS Flexbox モジュールを使用して行うことができます。これは、プロジェクトに取り組む際の決定方法を学ぶのに役立ちます。

関連記事: