Chap15-3 CSS Gridレイアウト

Chap15-3 CSS Gridレイアウト

Chap15 CSSレイアウト手法

CSS Gridレイアウトについて学習します。
CSS Gridの仕組みや設定について理解することが目的です。

Contents
  1. Gridでできること
    1. Gridの仕組み
  2. Gridの各部名称
  3. Gridコンテナの設定
    1. Gridの基本セット
  4. Gridアイテムの設定
  5. 練習問題 （解答はchap15-4で）

Gridでできること

Gridの仕組み

FlexBoxと同じで、Gridアイテムが子要素、Gridコンテナが親要素です。

See the Pen 15-3 by Rayout-gw (@Rayout-gw) on CodePen.

アイテムを配置する場所を結合できる

See the Pen 15-3-2 by Rayout-gw (@Rayout-gw) on CodePen.

アイテムを重ねることができる

See the Pen Untitled by Rayout-gw (@Rayout-gw) on CodePen.

Gridの各部名称

グリッドを分ける垂直および水平の線で、上下左右それぞれの両端にも存在する。
上または左から、正の番号 “1” から順に割り当てられる。

Gridコンテナの設定

Gridの基本セット

Flexと同じように、Gridも基本セットとしてプロパティ3つを覚えておくと良いでしょう。
rows（行数）とcolumns（列数）の違いと、最後の「s」に注意してください。

Gridコンテナのセレクタ{
  display:grid;
  grid-template-rows: 200px auto;
  grid-template-columns: 200px 1fr 300px;
}

grid-template-rowsとcolumnsの値はトラックの数と大きさになります。

「fr」という単位は、余ったスペースの比率・割合になります。（flexの伸び率に似ています）

See the Pen 15-3-4 by Rayout-gw (@Rayout-gw) on CodePen.

Gridアイテムの設定

アイテムをどの行と列に配置するのかを、行と列のライン番号で指定します。

Gridアイテムのセレクタ{
  grid-row: 1/2;
  grid-column: 1/2;
}

「1/2」は、ライン番号の1〜2の間という意味で、1行目または1列目ということになります。

Master
Master

似たようなプロパティなので注意して記述しましょう！

練習問題 （解答はchap15-4で）

図のような2カラムレイアウトを、CSS Gridを使ってレイアウトしてみましょう。
練習用なので、各セルの高さを設定しています。
特にメインの幅がどうなるのか考えてください。

  • メインの幅を考えましょう
  • <div>は画面の中央に配置してください
  • 各ボックスに背景色をつけてください
  • 枠線や隙間の余白は無視してください
  • CSSはエンベディングスタイルで記述
  • chap15フォルダを作成し「3-4.html」で保存
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GridLayout練習</title>
    <style>
    /* ここにCSSを記述 */
    </style>
</head>
<body>
    <div>
        <header>ヘッダー</header>
        <nav>ナビ</nav>
        <aside>サイドバー</aside>
        <main>メイン</main>
        <footer>フッター</footer>
    </div>
</body>
</html>
Gridレイアウトの資料