Webデザインを始めると、まずレイアウトの問題に遭遇します。当初は、htmlのTABLEに依ったり、cssのfloatを使ってレイアウトしていました。
しかし floatを使ったレイアウトはブラウザの違いなどによっては、段組が崩れてしまうなどするため、初心者を悩ませていました。そこで Twitter社の「
bootstrap」などのグリッドシステムが開発され、脚光を浴びていました。
2012年頃からは
Flexboxが登場し、そうしたグリッドシステムを使わなくとも、CSS3とHTML5で直接段組を行うことができるようになり、レイアウト問題を解決するために活用されてきました。しかし、Flexboxでのレイアウトも、万能ではありませんでした。
CSSグリッドレイアウトはそうした「1次元レイアウト」をベースとしたレイアウトとは違って、「2次元レイアウト」を採用し、Flexboxで起こる回り込みの不都合を解消するようになりました。
■ Grid Layoutの具体例
Grid Layoutについて、A~Fの6個のブロックで構成される下記の具体例で説明します。
- Grid Layoutで配置するために、親要素に display: grid; (又は display: inline-grid;)を記述した後、grid:~; (又は grid-template:~; grid-template-rows:~;等) で [ライン番号やエリア配置を記述して] 具体的なレイアウトを記述します。(下図)
*この例では、row方向(縦)に 40px,3rem、column方向(横)に 50px,4rem,1fr, 2frで並ぶセルを、row方向(縦)に 8px、column方向(横)に 4pxの間隔で配置します。
- 子要素では、
◆ grid-row:1 / 2; grid-column:1;のようにラインの番号を記述して、前記のグリッド枠内の個別の配置位置を指定したり、
*この例では、子要素 .itemAを row grid 1-2間; column grid 1の後に配置する…などと記述しています。なお、各要素の記述順位は特に問われません。
◆ grid-template-areas: "aa bb" "cc dd";のようにエリア配置を記述して、前記のグリッド枠内の個別の配置位置を指定したりします。
- このように、grid線で親要素のマス目構成を設定し、その中に子要素を具体的に配置してゆきます。重ねたりすることも出来ます。
【HTML】
<div class="grid-container">
<div class="itemA">A</div>
<div class="itemB">B</div>
<div class="itemC">C</div>
<div class="itemD">D</div>
<div class="itemE">E</div>
<div class="itemF">F</div>
</div>
【CSS】(ライン番号で指定の場合)
.grid-container {
width:200px; margin:0 auto; padding:5px 3px; background:#cef;
display: grid; /* Grid Layoutの利用を指定 */
grid: 40px 3rem / 50px 4rem 1fr 2fr; /* row(行)方向(縦)厚の配分/column(列)方向(横)幅の配分 */
gap: 8px 4px; /* row(行)方向(縦)の間隔/column(列)方向(横)の間隔 */
}
.grid-container > div {
border: 3px solid #c99; background:#fe6; text-align: center; /* 子要素のプロパティ */
}
.itemA{ grid-row:1 / 2; grid-column:1 } /* row grid 1-2間; column grid 1後に配置 */
.itemD{ grid-row:1; grid-column:3 / 5 } /* row grid 1後; column grid 3-5間に配置 */
.itemE{ grid-row:2 / 3; grid-column:3 } /* row grid 2-3間; column grid 3後に配置 */
.itemF{ grid-row:2; grid-column:4 / 5 } /* row grid 2後; column grid 4-5間に配置 */
.itemB{ grid-row:2 / 3; grid-column:1 } /* row grid 2-3間; column grid 1後に配置 */
.itemC{ grid-row:1 / 3; grid-column:2 / 3 } /* row grid 1-3間; column grid 2-3間に配置 */
【左記の 表示1 表示2】→
対応する CSS ↓
【CSS】(エリア配置で指定の場合)
.grid-container {
width:200px; margin:0 auto; padding:5px 3px; background:#cef;
display: grid; /* Grid Layoutの利用を指定 */
grid: 40px 3rem / 50px 4rem 1fr 2fr; /* row(行)方向(縦)厚の配分/column(列)方向(横)幅の配分 */
gap: 8px 4px; /* row(行)方向(縦)の間隔/column(列)方向(横)の間隔 */
grid-template-areas:
"areaA areaC areaD areaD"
"areaB areaC areaE areaF";
}
.grid-container > div {
border: 3px solid #c99; background:#fe6; text-align: center; /* 子要素のプロパティ */
}
.itemA{ grid-area: areaA; } /* .itemA に エリア名 areaAを指定 */
.itemD{ grid-area: areaD; } /* .itemD に エリア名 areaDを指定 */
.itemE{ grid-area: areaE; } /* .itemE に エリア名 areaEを指定 */
.itemF{ grid-area: areaF; } /* .itemF に エリア名 areaFを指定 */
.itemB{ grid-area: areaB; } /* .itemB に エリア名 areaBを指定 */
.itemC{ grid-area: areaC; } /* .itemC に エリア名 areaCを指定 */
以上のように各記述は、親要素に指定するものと、子要素に指定するものが有り、その組み合わせでレイアウトされます。
参考1 参考2 参考3
■ Grid Layoutと Flexboxとの違い
Grid Layoutも
Flexboxも、親要素の中に子要素を配置することでは同じですが、配置方法が根本的に異なります。
1. Grid Layoutは縦横の位置や幅を指定して、
2次元的にレイアウトします。
2. Flexboxは親要素の中に、子要素を一次元的な配列として
並べる方法を調整してレイアウトします。
具体的にみてみます。
このように同じようなレイアウトが出来ますが、配置の仕方が異なるので多少の特質があります。簡単に言うと、
1. Grid Layoutは、縦横の位置を 2次元的に固定したマス目に配置する場合に適しています。
2. Flexboxは子要素の一次元的な配列を並び方を調整してレイアウトするのに適しています。(この例では中央対称にしました)
■ Grid Layoutの記述法
【親要素(コンテナ)で全体の構成を指定】
参考1
参考2
参考3
プロパティ | 表 示 例 | 説 明 |
grid-template: ( grid: と同じ ) |
|
◆grid:(row構成 / (column構成) 等と書いて枠組みを指定。 ◆grid-template-rows, grid-template-columns, grid-template-areas を纏めて指定出来ます ◆例: grid: 1fr 2fr/ 1fr 2fr 30px 1fr grid:[top] "a1 a1" 10px [mdl] "a2 a3" 30px [btm] / [lft] 1fr [cnt] 2fr [rht]
注. auto-flow **:は **幅で繰り返します 参考 |
grid-template-rows: と grid-template-columns: |
|
◆grid-template-rowsと grid-template-columnsをそれぞれ個別に指定します ◆例1: grid-template-rows:1fr 2fr; grid-template-columns:1fr 2fr 30px 1fr ◆例2: grid-template-rows:[top] "a1 a1" 10px [mdl] "a2 a3" 30px [btm]; grid-template-columns: [lft] 1fr [cnt] 2fr [rht] |
grid-template-areas: |
|
◆grid:(grid:grid rows) / (grid columns) で枠組みを設定する ◆grid-template-areas で子要素の配置を指定します ◆各子要素には、#itm1{grid-area:name;}のように名前を付けます ◆例: grid-template-areas:"hd hd hd" "mn mn sd" "ft ft ft"; #itm1{grid-area:hd;} *hd mn …は各子要素の名前です |
grid-auto-flow: (参考) |
|
◆grid:(grid:grid rows) / (grid columns) で枠組みを設定する ◆grid-auto-flow で子要素の並べ方向を指定します ◆ディフォルト値は row(横)です ◆denseを付けると空きセルを詰めて並べます
*この例では アイテム1を grid-row-start:3; アイテム4を grid-column-start:2; と設定した |
gap: (or grid-gap:) |
|
◆gap: で grid-row-gap と grid-column-gap をまとめて記述出来ます ◆grid-gap: y x; で row方向に並ぶ空白yと、column方向に並ぶ空白xを指定します。yのみの時は縦横両方向に同じ空白が設定されます ◆例: gap:5px 1em; gap:1rem; |
【個別子要素(アイテム)に設定】
参考
プロパティ | 表示例 | 説 明 |
grid-row: 又は grid-column: |
|
◆grid-templateでレイアウトを指定し、 ◆子要素 itemの縦(row)、横並び(column)の表示開始、終了位置を grid(線)番号または名前で css指定します ◆grid番号は左上より 1から始まります。負数にすると逆向き指定になります ◆子要素の領域が重複すると重なって配置されます ◆記述例: #itm3{grid-row:2 / 3; grid-column:2 / 4} |
grid-area: |
|
◆grid-templateでレイアウトを指定し、その網目に、 ◆grid-template-areasで各子要素の配置を記述します ◆記述例: grid-template: 20px 1fr 25px 0px/ 60px 1fr 90px grid-template-areas: "hd hd hd" "nv mn sd" "ft ft ft" |
【ショートハンド記述例】 (幾つかのプロパティを纏めて一括指定する)
参考1 参考2 参考3
ショートハンド | 具 体 例 | 等 価 記 述 例 等 |
grid; | grid: [line1] 1fr [line2] 40% [line3] 20% [line4] / 2fr 50px 1fr 30%; | <grid-template> |
grid:repeat(2, [ln1 ln2 ln3] 50px) 1fr/ auto-flow 80px; | grid-template, grid-template-rows, grid-template-columns を纏め指定 |
grid-template; | grid-template:[l1] "a" 50px [line2] "b" 1fr [l3]/ "s1" 50px "s2" 1fr "s3" 70px; | <grid-template-rows> / <grid-template-columns> |
grid-template:"a a ." minmax(80px, auto) "a a ." 7em "b b c" auto/ 8em 3em auto; | [ <line-names> <string> <track-size> <line-names>]+[ /<explicit-track-list>] |
grid-area; | grid-area: 1 / 2 / 3 / 4; | <grid-row-start>[/<grid-column-start>[/ <grid-row-end>[/<grid-column-end>]]] |
grid-template-rows; | grid-template-rows:[l1] 2fr [l2] 8px [ln3]; grid-template-rows:1fr min-content; | [ <line-names> [ <track-size> | <track-repeat> ] ]+ <line-names> など |
grid-template-columns; | grid-template-columns: [line8] 5rem [ln2] 8rem [ln3]; | 上に同じ |
grid-template-areas; | grid-template-areas: "header header" "menu main" "footer footer"; | <string> |
grid-rows; | grid-rows: 1 / 3; | 縦(row)方向の開始 / 終了位置を指定 |
grid-columns; | grid-columns: 1 / 3; | 横(column)方向の開始 / 終了位置を指定 |
gap; (grid-gap;) | gap: 3rem 5px; | row-gap:3rem; column-gap:5px; |
grid-row; | grid-row:3; grid-row:2 / 4; grid-row:span 2 / 7; | <grid-row-start> [ / <grid-row-end>]など {アイテムを指定する} |
grid-column; | grid-column:3; grid-column:2 / 4; grid-column:span 2 / 7; | <grid-column-start> [ / <grid-column-end>]等 {アイテムを指定する} |
【幅等の記述方法】
単位 | 説 明 | 記述例 |
fr(%) | 幅(高さ)を係数比率(%)で按分 | grid-template-columns:[line1] 1fr [line2] 40% [line3];、 grid:3fr 2fr/2fr 1fr 30%; |
px(em,rem) | 幅(高さ)をピクセル(em,rem)単位で配分 | grid-template-rows:50px 3rem;、 grid:2rem 80px 1fr/2em 1fr 100px; |
span n | span n個分 | grid-column: span 2 / 7; |
calc( fx ) | 計算式 fxで指定 | gap:calc( 1% + 2px ); |
min-content | コンテンツの最小サイズにする | grid-template-rows: 1.5fr min-content; |
max-content | コンテンツの最大サイズにする | grid-template-columns: max-content 2fr 1fr; |
minmax(n,m) | n 以上 m 以下の範囲で自動調整 | grid-template-columns: minmax(100px, 1fr); |
auto | サイズを自動調整 | minmax(min-content,max-content)と同じ |
fit-content(m) | 最大でも m のサイズにします | fit-content(100px) |
repeat auto-fit(auto-fill) | 繰り返しを指定 | grid-template-columns: repeat(2, 40px) repeat(2, 2rem); |
子要素個数分自動生成 | grid-template-columns: repeat(auto-fit, 3rem);、grid-template-rows: repeat(auto-fill, 2rem); |
grid-row-startなど | 縦(row)方向の開始(start)位置を指定 | grid-row-start:2; {grid-row-end、grid-column-start、grid-column-endも同様} |
grid-column-endなど | 横(column)方向の終了(end)位置を指定 | grid-column-start:2; {grid-column-start、grid-row-start、grid-row-endも同様} |
grid-row (or column) | 縦(row)方向の開始 / 終了位置 などを指定 | grid-row: 2 / 4; grid-row: span 2 / 7; {grid-columnも同様} |
grid-area | セルを指定。セル位置を指定 | grid-area: 1 / 3 / 2 / 4; {<grid-row-start> [ / <grid-column-start> [ / <grid-row-end> [ / <grid-column-end>} |
justify-self | justify-self:center; | コンテナ内のアイテムの主軸方向の揃え位置を指定。参考 |
align-self | align-self:center; | コンテナ内のアイテムの交差軸方向方向の揃え位置を指定。参考 |
z-index | z-index:10; | 重なるセルの重なり順位を指定。参考 |
order | order: 2; | 各アイテムの配列順位を記述。参考 |
■ 色々なサンプル
【レイアウトサンプル-1】 レスポンシブルにも対応した入り組んだサンプルです 【
拡大表示】
【レイアウトサンプル-2】
メニュー付きレスポンシブルページです 【動作例】
【レイアウトサンプル-3】
自動折返しグリッドページです 【動作例】
■ 参考サイト