PLAY CSS
jaen

レイアウト · まとめ

Grid レイアウト

display: grid で使うプロパティを、役割ごとにまとめました。箱に書いて列と行の線を引くもの、すき間をとるもの、揃えるもの、中の項目に書いて置き場所を決めるものがあります。

組み合わせて動かす

grid のブロックを最初から積んであります。値を動かしたり、ブロックを足したり外したりして、組み合わせたときの動きを確かめられます。縁取りした 2 番目の項目には、項目に書くプロパティがかかります。

プレビュー

1234
見本
項目
右下の角をドラッグするとサイズを変えられます

コード

.box {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 8px;
}

.box > :nth-child(2) {
  grid-column: span 2;
}

ブロック3

  1. grid-template-columnsrepeat(3, 1fr)
    grid-template-columns
    repeat() の回数3
    トラック（列や行の大きさ）
    トラック 1
    minmax()
    ページで詳しく見る
1234

プロパティ

列と行を作る箱に書く

列と行の線を引いて、マスの大きさを決めます。書いた分より項目が多いときに足される行（や列）の大きさと、項目を詰める向きもここで決めます。

1234

grid-template-columns

grid-template-columns: 60px 1fr 2fr;

grid-template-columns は、グリッドの箱をいくつの列に分けるかと、それぞれの列の幅を指定します。列の幅（トラック）をスペースで区切って並べて書きます。

1234

grid-template-rows

grid-template-rows: 1fr 2fr;

grid-template-rows は、グリッドの箱の行の数と、それぞれの行の高さを指定します。書き方は grid-template-columns と同じで、行の高さ（トラック）を上から順に並べて書きます。

1234

grid-auto-rows

grid-auto-rows: 40px 1fr;

grid-auto-rows は、grid-template-rows で決めていない行（項目に合わせて自動で足される行）の高さを指定します。

1234

grid-auto-columns

grid-auto-columns: 40px 1fr;

grid-auto-columns は、grid-template-columns で決めていない列（項目に合わせて自動で足される列）の幅を指定します。

1234

grid-auto-flow

grid-auto-flow: row dense;

grid-auto-flow は、置く場所を決めていないグリッドの項目を、行に沿って並べるか列に沿って並べるかと、前に空いたマスを詰めるかを指定します。

すき間をとる箱に書く

列と列、行と行の間をあけます。端にはつきません。

1234

gap

gap: 16px 8px;

gap は、フレックスボックスやグリッド、段組みの中で、項目の行と行の間（row-gap）と、列と列の間（column-gap）をまとめて指定します。

揃える箱に書く

-items はマスの中で項目をどこに置くか、-content はマスの集まり全体を箱の中のどこに置くかを決めます。justify は行の向き（横）、align はそれと直交する向き（縦）、place は両方をまとめて書きます。

1234

justify-items

justify-items: center;

justify-items は、グリッドの項目を、それぞれのマスの中で行の向き（横書きなら左右）のどこに置くかを、まとめて指定します。

1234

align-items

align-items: center;

align-items は、フレックスボックスやグリッドの中で、項目を交差軸（並べる向きと直交する向き）のどこにそろえるかを指定します。横に並べたフレックスボックスでは、上下のそろえ方です。

1234

place-items

place-items: center;

place-items は、align-items（縦の位置）と justify-items（横の位置）をまとめて書くショートハンドです。place-items: center で、グリッドの項目をマスの上下左右の中央に置けます。

1234

justify-content

justify-content: space-between;

justify-content は、フレックスボックスやグリッドの中で、項目を主軸（並べる向き）のどこに寄せるか、余った空きをどう配るかを指定します。

1234

align-content

align-content: center;

align-content は、フレックスボックスで折り返した行や、グリッドの行をまとめて、交差軸（横に並べたときは縦）のどこに寄せるか、余った空きをどう配るかを指定します。

1234

place-content

place-content: center;

place-content は、align-content（行のまとまりの縦の位置）と justify-content（列のまとまりの横の位置）をまとめて書くショートハンドです。箱の中で余った空きに、中身をまとめてどう置くかを決めます。

項目を置く項目に書く

どの線からどの線まで使うかを書いて、項目を好きなマスに置いたり、いくつかのマスにまたがらせたりします。grid-area は行と列の 4 本の線をまとめて書きます。order は自動で並ぶときの順番を変えます。

1234

grid-column

grid-column: span 2;

grid-column は、グリッドの項目に書いて、その項目をどの列に置くか、何列にまたがらせるかを指定します。grid-column-start と grid-column-end をまとめて書くショートハンドです。

1234

grid-row

grid-row: span 2;

grid-row は、グリッドの項目に書いて、その項目をどの行に置くか、何行にまたがらせるかを指定します。grid-row-start と grid-row-end をまとめて書くショートハンドです。

1234

grid-area

grid-area: 1 / 2 / 3 / 4;

grid-area は、グリッドの項目に書いて、その項目を置く行と列をまとめて指定します。grid-row-start・grid-column-start・grid-row-end・grid-column-end の 4 つを書くショートハンドです。

1234

order

order: -1;

order は、フレックスボックスやグリッドの項目に書いて、項目を並べる順番を HTML の順番から変えます。

項目ごとに揃える項目に書く

箱の -items で決めた揃え方を、その項目だけ変えます。

1234

justify-self

justify-self: center;

justify-self は、グリッドの項目 1 つに書いて、その項目をマスの中で行の向き（横書きなら左右）のどこに置くかを指定します。箱に書いた justify-items を、その項目だけ上書きします。

1234

align-self

align-self: center;

align-self は、フレックスボックスやグリッドの項目 1 つに書いて、その項目だけ交差軸（横に並べたときは縦）の位置を、箱の align-items と違うものにします。

1234

place-self

place-self: center;

place-self は、align-self（縦の位置）と justify-self（横の位置）をまとめて書くショートハンドです。グリッドの項目 1 つに書いて、その項目だけをマスの中で動かします。

PLAY CSS