【CSS】grid-templateについて

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

どうも、くまだです。

CSSのgrid-templateプロパティについてあれこれ。

CSSのgrid-templateプロパティ

grid-templateプロパティは、以下の3つをまとめて指定する記述です。

  • grid-template-rows：横方向（行）のグリッドの高さ指定
  • grid-template-columns：縦方向（列）のグリッドの幅指定
  • grid-templalte-areas：グリッドアイテムの位置を名前をつけて配置

例えば以下のような記述で配置できます。

<div class="box">
      <span class="item --1">a</span>
      <span class="item --2">b</span>
      <span class="item --3">c</span>
      <span class="item --4">d</span>
      <span class="item --5 is-select">e</span>
      <span class="item --6">f</span>
      <span class="item --7">g</span>
      <span class="item --8">h</span>
      <span class="item --9">i</span>
</div>
.box {
  padding: 50px;
  display: grid;
  grid-template:
    "a b c"1fr 
    "d e f"1fr 
    "g h i"1fr 
    /max-content max-content max-content;
}


.item {
  padding: 10px 20px;
  border: 1px solid black;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}



.item.--1 {
  grid-area: a;
}

.item.--2 {
  grid-area: b;
}

.item.--3 {
  grid-area: c;
}

.item.--4 {
  grid-area: d;
}

.item.--5 {
  grid-area: e;
}

.item.--6 {
  grid-area: f;
}

.item.--7 {
  grid-area: g;
}

.item.--8 {
  grid-area: h;
}

.item.--9 {
  grid-area: i;
}

.is-select {
  background-color: orange;
}

grid-template部分の記述は、以下の記述と同じ意味になります。

grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: max-content max-content max-content;
grid-template-areas:
　"a b c"
　"d e f"
  "g h i";

grid-template-colums

例えばgrid-templateの、grid-template-columsについて以下のように書き換えます。「/（スラッシュ）」 以下の記述が該当部分です。

.box {
  padding: 50px;
  display: grid;
  grid-template:
    "a b c"1fr 
    "d e f"1fr 
    "g h i"1fr 
    /100px max-content 200px;　/* ←　grid-template-columsの部分 */
}

grid-template-columnsプロパティでの指定だと、以下の記述と同様です。

grid-template-columns: 100px max-content 200px;

grid-template-columsは縦列の幅指定ができるので、以下のような意味になります。

  • 「a d g」の縦列の横幅が100px
  • 「b e h」の縦列の横幅がmax-content
  • 「c f i」の縦列の横幅が200px

このように、grid-template-columsは縦列の幅に関して指定できます。

grid-template-rows

例えばgrid-templateの、grid-template-rowsについて以下のように書き換えます。” ○○”の横に書いてある記述が該当部分です。

.box {
  padding: 50px;
  display: grid;
  grid-template:
    "a b c" 1fr /* ←　grid-template-rowsの部分 */
    "d e f" 200px  /* ←　grid-template-rowsの部分 */
    "g h i" 80px /* ←　grid-template-rowsの部分 */
    /max-content max-content max-content;
}

grid-template-rowsプロパティでの指定だと、以下の記述と同様です。

grid-template-rows: 1fr 200px 80px;

grid-template-rowsは横行の高さ指定ができるので、以下のような意味にな

  • 「a b c」の横行の高さが1fr
  • 「d e f」の横行の高さが200px
  • 「g h i」の横行の高さが80px

このように、grid-template-rowsは横行の高さに関して指定できます。

ちなみに、以下のように個別で余白を指定したいときは、「…」を使い、pxを指定すると画像のように要素間に余白を設定できます。（「. （ドット）」は一つでもだいじょうぶですが、三つのほうが個人的には見やすい）

.box {
    padding: 50px;
    display: grid;
    grid-template:
        "a ... b ... c" 1fr
        "... ... ... ... ... " 100px
        "d ... e ...f" 1fr
        "g ... h ... i" 1fr
        / max-content 10px max-content 5px max-content;
}

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

CSS

この記事を書いた人

くまだ

記事一覧