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

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

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

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

2.グリッドの作成方法

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

例：

    
1
    
2
    
3
    
4

.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 プロパティを使用して、アイテムが占有する特定のグリッド領域を定義することもできます。これにより、グリッド内で項目を配置する場所を正確に制御できます。

例：

    
Header
    
Sidebar
    
Main Content
    
Footer

.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 つは、CSS グリッドを簡単にレスポンシブにできることです。 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 グリッドはネストされたグリッドもサポートしているため、グリッド アイテム内にグリッドを作成して、より複雑なレイアウトを作成できます。

例：

    

        

            
Nested 1
            
Nested 2
        
    
    
Item 2
    
Item 3

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

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

リドイ・ハサン