usagi web

Web制作に関して学んだことを書いていきます。

Grid CSSの基礎

グリッドレイアウトにする方法はFlex boxやfloatなどの方法があるかと思いますが、グリッドレイアウト専用のCSS、Grid CSSというものを学んだみました。

Grid CSSの概要

グリッドとは、横幅を分割(12分割や16分割)し、アイテムを並べていく。

グリッドを使用することで、整ったページにみえる。

display: grid;を使用することで、グリッドレイアウトにすることが可能。

3分割にアイテムを並べてみる

See the Pen JemWgx by choco (@tamagon_web) on CodePen.

大枠にdisplay: grid;を指定。

grid-template-columns: 1fr 1fr 1fr;で.hogeを各1トラックに指定

grid-gap: 30px;はグリッド間の余白数です。

1トラックとは…

グリッドの区切り線。(一番左の線から数える)

上記の画像の通り、一番左の線が1、グリッドの間の太い線が2、3…となります。

大枠を12分割して、分割数を指定してみる

See the Pen rQXLpj by choco (@tamagon_web) on CodePen.

grid-template-columns: repeat(12, 1fr);で大枠である.wrapperを12分割にする

.hogeが奇数の場合はgrid-column: 1 / 7;でトラック数が1〜7なので、一番左の線から7番目の線までの6分割分が1ブロックになります。

.hogeが偶数の場合はgrid-column: 7 / 13;でトラック数が7〜13なので、7番目の線から13番目の線までの後ろ6分割が1ブロックになります。

参考サイト

CSS グリッドレイアウト MDN(外部サイトです。)

横だけでなく、縦も指定できるようなので、色々と使ってみたいと思います!