【CSS】名前付きグリッドラインについて

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

Gridレイアウトの名前付きグリッドラインについてのあれこれ。

名前付きグリッドライン

Gridレイアウトでは、行や列に名前をつけることができます。

例えば以下のようになります。

  <div class="box">
    <div class="item item-1">Header</div>
    <div class="item item-2">Main</div>
    <div class="item item-3">Sidebar</div>
    <div class="item item-4">Footer</div>
</div>
.box {
display: grid;
grid-template-rows: [top] 70px [main] 1fr [bottom] 100px [end];
grid-template-columns: [start] 2fr [middle] 1fr [end];
gap: 10px;
height: 100%;
}

.item-1 {
    grid-column: start / end;
    grid-row: top / main;
    background-color: lightblue;
    text-align: center;
}

.item-2 {
    grid-column: start / middle;
    grid-row: main / bottom;
    background-color: lightcoral;
    text-align: center;
}

.item-3 {
    grid-column: middle / end;
    grid-row: main / bottom;
    background-color: lightgreen;
    text-align: center;
}

.item-4 {
    grid-column: start / end;
    grid-row: bottom / end;
    background-color: lightgoldenrodyellow;
    text-align: center;
}

以下の部分で、行と列に名前をつけています。

grid-template-rows: [top] 70px [main] 1fr [bottom] 100px [end];
grid-template-columns: [start] 2fr [middle] 1fr [end];

それぞれの要素に、以下のように指定して行と列をどこからどこまでの領域にするか指定します。

.item-1 {
    grid-column: start / end; 
    grid-row: top / main;
    background-color: lightblue;
    text-align: center;
}

grid-template-rowsとgrid-template-columnsはgrid-templateプロパティで一括で以下のように書くこともできます。

.box {
    display: grid;
    grid-template:
        [top] 70px 
        [main] 1fr 
        [bottom] 100px 
         [end] 
        / [start] 2fr [middle] 1fr [end];
    gap: 10px;
    height: 100%;
}

grid-columnやgrid-rowは、1 / 3とか数字をつかって書くこともできますが、名前付きのほうがイメージしやすいかもです。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧