CSS グリッド – 複雑なレイアウトを簡単に構築-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-09-21 16:18:09

オリジナル

311 人が閲覧しました

CSS Grid – Building Complex Layouts with Ease

レクチャー 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 つにネストされたグリッドが含まれており、より柔軟で詳細なレイアウトが可能です。