CSS グリッド – 複雑なレイアウトを簡単に構築

レクチャー 15: CSS グリッド – 複雑なレイアウトを簡単に構築する

この講義では、行と列の両方を完全に制御できる強力なレイアウト システムである CSS グリッド について詳しく説明します。 Flexbox は 1 次元レイアウト (行または列) に最適ですが、Grid では 2 次元レイアウトを処理できるため、Web ページ全体のレイアウトを正確にデザインできます。

1. CSS グリッドとは何ですか?

CSS グリッド レイアウト (一般に グリッド として知られています) は、行と列の両方を同時に管理するように設計された 2D レイアウト システムです。これは、各要素がグリッド セルに配置され、すっきりと整理されたレイアウトを可能にするマトリックスまたはスプレッドシートと考えることができます。

2.グリッドの作成方法

グリッドの使用を開始するには、display:grid を設定してコンテナをグリッドとして定義する必要があります。次に、grid-template-rows プロパティと Grid-template-columns プロパティを使用して行と列の数を定義します。

例:

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

これにより、各セルが 100 ピクセル x 100 ピクセル、セル間に 10 ピクセルのギャップとなる 2x2 のグリッドが作成されます。

3.グリッド領域の定義

grid-area プロパティを使用して、アイテムが占有する特定のグリッド領域を定義することもできます。これにより、アイテムをグリッド内のどこに配置するかを正確に制御できます。

例:

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
</div>

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

この例では、ヘッダーとフッターが 2 つの列にまたがり、サイドバーとメイン コンテンツが独自の列を占める基本的なレイアウトを作成します。 Grid-template-areas プロパティを使用すると、各領域の名前を使用してグリッドの構造を定義できます。

4.レスポンシブグリッドの自動フィットと自動入力

CSS グリッドの最も優れた点の 1 つは、それを簡単にレスポンシブにできることです。 auto-fit プロパティと auto-fill プロパティを使用すると、利用可能なスペースに基づいて列の数を自動的に調整できます。

例:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

この例では、グリッドはコンテナ内に収まる数の列を自動的に作成します。各列の幅は少なくとも 150px です。余分なスペースがある場合は、列が伸びて残りの領域を埋めます。

5.グリッドの配置

justify-items と align-items を使用して、グリッド内でアイテムを整列できます。

• justify-items: グリッド セル内で項目を水平方向に整列させます。
• align-items: グリッド セル内でアイテムを垂直方向に整列させます。

例:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

これにより、すべてのアイテムがグリッド セル内で水平方向と垂直方向の中央に配置されます。

6.ネストされたグリッド

CSS グリッドはネストされたグリッドもサポートしているため、グリッド項目内にグリッドを作成してより複雑なレイアウトを作成できます。

例:

<div class="grid-container">
    <div class="item">
        <div class="nested-grid">
            <div class="nested-item">Nested 1</div>
            <div class="nested-item">Nested 2</div>
        </div>
    </div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

この例では、グリッド項目の 1 つにネストされたグリッドが含まれており、より柔軟で詳細なレイアウトが可能です。

7.グリッドとフレックスボックス: それぞれをいつ使用するか

• 項目のレイアウトを一方向 (行または列) で管理する必要がある場合は、フレックスボックス を使用します。
• 複雑な多次元レイアウトで行と列の両方を同時に管理する必要がある場合は、グリッドを使用します。

結論

CSS グリッドは Web デザインに変革をもたらし、最小限の労力で複雑で応答性の高いレイアウトを構築する強力な方法を提供します。ブログ レイアウト、ダッシュボード、Web サイト構造のいずれで作業している場合でも、Grid を使用すると、行と列の両方を簡単に制御できる柔軟性が得られます。

---

LinkedIn でフォローしてください

リドイ・ハサン

以上がCSS グリッド – 複雑なレイアウトを簡単に構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。