css gridを本気で学んでみた

作成日:2024-06-17

Tags: web

css のgridレイアウトがかなり便利だが、なぁなぁで使っていたので、学びなおした

grid cssを学び直してみました。

Css Gridについて
Gridとは？
縦と横の数を指定して表を作成する。
明示的、暗黙的グリッド
明示的グリッド
暗黙的グリッド
明示的グリッドの使い道
ラインの番号で指定する
gridサイズを動的にする。
縦と横のサイズ調整
fr
gridの数を動的に変動させる
auto-fill
auto-fit
minmax
minmaxの重要性
参考
まとめ

Css Gridについて

cssで縦や、横並びににする方法で昔はflot,その後flexとgridが一般的に使われている。
今回はGridについて学びなおしてみました。

Gridとは？

まず,グリッドとはどういうものなのか。一言でいうと、excel表のようなテーブルを作るものです。

必ず知っておかなければならないことは、gridの使い方は縦と横(行と、列)の数とサイズを指定すると言う事です。

知っておくべき内容

明示的、暗黙的グリッドがある。

縦と横の数を指定して表を作成する。

以下例として、縦と横の2x2のグリッドを作成しました。

2x2の表

.Grid{
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px;
    gap: 10px;
}

このように

横に100pxが2つ
縦に50pxが2つ

のグリッドが生成されます。

1x4の場合

横に4つ、縦に1つのグリッドの場合は次のようになります。

1x4の表

.Grid{
    display: grid;
    grid-template-columns:100px 100px 100px 100px;
    grid-template-rows: 50px;
    gap: 10px;
}

基本的なgridの使い方はこのようにサイズと数を指定してグリッドを作成します。

明示的、暗黙的グリッド

明示的グリッドとは、girdでサイズと数を決めたのち、その範囲内にitemを入れることです。
しかし、グリッドの数を超えるitem数だった場合でも問題ありません。この超えた分は暗黙的グリッドと呼ばれます。

明示的グリッド

繰り返しになりますが、横に50,100,60,100サイズの4行
縦に1列50pxのテーブルを作成します。

.Grid{
    display: grid;
    grid-template-columns: 50px 100px 60px 100px;
    grid-template-rows: 50px;
    gap: 10px;
}

これが明示的グリッドです。縦に1x4のテーブルがあり、itemも4つ配置しています。

暗黙的グリッド

では暗黙的グリッドとは何ぞや？
明示的グリッド以外の事を指します。
要するにcssで指定していない部分を指します。

1x3のグリッドを作成

    display: grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows: 50px;
    gap: 10px;

1x3のグリッドを作成しましたが、item数が4であるためitem4がはみ出ています。

このitem4の状態を暗黙的グリッドと呼びます。

暗黙的グリッドは悪いの？

暗黙的グリッドは使ってはだめという話ではなく暗黙的グリッドになってしまった場合はレイアウトが崩れてしまう。これだけ知っておけばとりあえずOK。 itemの数が明確であれば、このように指定します。

明示的グリッドの使い道

明示的グリッドはどんな時に使うのか？縦と横の数が明確に分かっていて、変動しない場合使います。
明示的グリッドを実際に使って行きましょう！

次の画像のように並べるには？ css-grid-1-3

itemの位置を指定することで上記の並びにすることができます。

ラインの番号で指定する

gridは行と列の番号をしてすることで位置を指定することができます。

    <div className='Grid'>
      <div className='Griditem Griditem1'>item1</div>
      <div className='Griditem'>item2</div>
      <div className='Griditem'>item3</div>
      <div className='Griditem'>item4</div>
    </div>

.Grid{
    display: grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows: 50px 50px;
    gap: 10px;
}

.Griditem{
    background-color: antiquewhite;
}

.Griditem1{
    grid-column: 1/4;
    grid-row: 1/2;
}

item1のcssに「grid-column」「grid-row」を指定しています。

gridの数字

次のcssの意味は？

.Griditem1{
    grid-column: 1/4;
}

gridの1から4の間に配置するという意味です。
4-1= 3マス分配置していることになります。
つまり次のようにした場合は

.Griditem1{
    grid-column: 2/4;
    grid-row: 1/2;
}

2番目から4-2=2マス分配置するという意味になります。

もちろんグリッドの数を指定しているため綺麗に並びますが、それを超える場合はレイアウトが崩れてます。

.Grid{
    display: grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows: 50px 50px;
    gap: 10px;
}


.Griditem1{
    grid-column: 2/5;   
    grid-row: 1/4;
}

gridサイズを動的にする。

暗黙的グリッドだとレイアウトが崩れる。
レイアウトが崩れないように明示的グリッドにしたいが、itemの数が不明確、変動してしまう場合はどうすればいいのか？
その前に変動的な横や縦のサイズの指定方法を解説します。

縦と横のサイズ調整

縦と横のサイズは100pxなど、サイズを記入すればできる。pxの単位以外でも実装することができます。

    <div className='Grid'>
      <div className='Griditem Griditem1'>item1</div>
      <div className='Griditem'>item2</div>
      <div className='Griditem'>item3</div>
      <div className='Griditem'>item4</div>
      <div className='Griditem'>item5</div>
      <div className='Griditem'>item6</div>
      <div className='Griditem'>item7</div>
      <div className='Griditem'>item8</div>
    </div>

.Grid{
    width: 90vw;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    grid-template-columns:10vw 1fr calc(20px + 10%) 20% 9rem;
    grid-template-rows: 50px 50px;
    gap: 10px;
}

10vw

windowサイズの10/100

1fr

余りのサイズ

calc

10%+20px

20%

gridの横幅の20%

rem

ルートサイズの9倍

cssのサイズ単位上記のように全て使うことができます。それでここで注目してほしい単位が「fr」です。

fr

frは余った空間の単位になります。gridレイアウトを使う上でこの単位は必須です。

.Grid{
    width: 90vw;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    grid-template-columns:1fr 2fr 2fr;
    grid-template-rows: 50px 50px 50px;
    gap: 10px;
}

$css-grid-fraction$

重要

frは余りのサイズを利用します。

分母=1+2+2
1fr＝1/5
2fr=2/5
2fr=2/5

のサイズになります。

$css-grid-fraction-ex$

余りを使う

frは余った余白を利用します。
そのため80%とすると、残りの20%を利用します。

.Grid{
    width: 90vw;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    grid-template-columns:80% 2fr 2fr;
    grid-template-rows: 50px 50px 50px;
    gap: 10px;
}

$css-grid-fraction-surplus$

gridの数を動的に変動させる

グリッドの数が変動する場合は「auto-fill」と「auto-fit」を使う。セットでrepeatも使用します。

auto-fillとauto-fixの違いは、余りの部分の活用方法が異なります。

auto-fill

.Grid{
    width: 90vw;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill,100px);
    grid-template-rows: 50px 50px 50px;
    gap: 10px;
}

auto-fit

.Grid{
    width: 90vw;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill,100px);
    grid-template-rows: 50px 50px 50px;
    gap: 10px;
}

固定で100pxとしていますが、minmaxを利用することで次のようになります。

minmax

fillの場合

.Grid{
    width: 90vw;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    grid-template-rows: 50px 50px 50px;
    gap: 10px;
}

fitの場合

.Grid{
    width: 90vw;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    grid-template-rows: 50px 50px 50px;
    gap: 10px;
}

適材適所だが、どちらかと言えば実用的な方はauto-fitだと思う。余白出てしまう場合はitemのサイズを大きくし、余白を無駄なく使う。
fillの場合は余白を使わないため、中央揃えにし左右に余白を持たすことができる。

minmaxの重要性

minmaxを使う必要があるのか？

minmaxを使った場合と使わなかった場合

使った場合

.Grid{
    width: 90vw;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(500px,1fr));
    grid-template-rows: 50px 50px 50px;
    gap: 10px;
}

使わない場合

.Grid{
    width: 90vw;
    margin: 0 auto;
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fill , 500px);
    grid-template-rows: 50px 50px 50px;
    gap: 10px;
}