Skip to main content

【初心者】CSS のグリッド (Grid) 攻略

· 2 min read
ひかり
ひかり
Main bloger

Grid を作成する​

5 行 3 列のグリッド​

5 行 3 列のグリッドを作成してみます。

<div id="wrap">
    <div id="elem">要素</div>
</div>
#wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

1fr は等分した長さのことです。 repeat(3, 1fr) は 1fr を 3 回繰り返すのと同義で、 省略せずに書くと 1fr 1fr 1fr になります。

また、auto は、グリッド内の要素にグリッドのサイズを合わせるときに用います。

要素を配置する​

グリッドを定義した後は、要素を配置します。 要素の配置は、grid-row と grid-column を用いて行います。(ただし、grid-row-start、grid-row-end、grid-column-start、grid-column-end を使用しても可能です。)

図のように要素を 4 行 2 列目に要素を配置したいとします。

Alt text

4 行目は 4 と 5 の間なので grid-row: 4 / 5; とし、 2 列目は 2 と 3 の間なので grid-column: 2 / 3; とします。

#elem{
    grid-column: 2 / 3;
    grid-row: 4 / 5;
}

列いっぱいに配置​

Alt text

4 行目に列いっぱいで配置したい場合は、 列が 1 と -1 の間なので grid-column: 1 / -1 とします。(このレイアウトの場合 grid-column: 1 / 4 でもかまいませんが端なので -1 としています。)

#elem{
    grid-column: 1 / -1; /* grid-column: 1 / 4; でも可*/
    grid-row: 4 / 5;
}

span を使用した例​

span キーワードを使用すると、複数の行や列をまたがることができます。(ただし、span を使用せずとも可能です。)

Alt text

2 列目と 3 列目をまたがるように配置したい場合は、grid-column: 2 / span 2; とします。

#elem{
    grid-column: 2 / span 2;
    grid-row: 4 / 5;
}

以上、グリッドについての解説でした。