gridレイアウトとは
gridレイアウトは親の要素をマス目のように区切って子要素を配置するレイアウト方式です。
Flexbox と違い、親要素に display: grid; だけでなく、一緒に子要素の配置方法についても記述するのが特徴です。
gridにはマスの設定に使うCSSのプロパティがあります。
- grid-template-columns(マスの横方向の設定)
- grid-template-rows(マスの縦方向の設定)
- grid-template-areas(エリアの設定)
- gap(セルの間のスペース)
上記は親の要素に縦と横の設定をした物です。
親のCSS
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
※ fr は gridレイアウト専用の単位。
親要素の大きさから良い感じに割合でサイズを調整してくれる。
親にこの3行のCSSだけで6つのセルを作ることが出来ます。
子要素はわかりやすいように色と枠線を付けています。
セルの設定
横の幅の設定
セルの横幅の設定をするには下記のプロパティを使います。
grid-template-columns: 100px 100px 100px;
“3つ”の”100px”のセルが横方向にならぶ。
grid-template-columns: 10em 250px 1fr;
といった事も可能です。
縦の幅の設定
横と同じように縦のセルは下記のプロパティで設定します。
grid-template-rows: 100px 100px;
“2つ”の”100px”のセルが縦に並ぶ。
横幅は colunms に対して rows で縦の高さを設定します。
100px の高さのセルが2段あるので、先ほどのgrid-template-colunms: 100px 100px 100px; と合わせると
横3セル×縦2セルの6セルのgridレイアウトができるという事です。
省略した書き方
縦と横のセルの設定を説明しましたが、省略した書き方があります。
grid-template: 縦の設定/横の設定;
簡単だし、このプロパティ使いますよね。
セル間の余白
gap というプロパティを使う事でセルの間のスペースを設定できます。
セルの”間”にだけスペースが出来ましたが、周りに余白は出来ません。
分かりやすいよう親要素に青い border を付けました。
gridレイアウトのエリアとは
エリアとはセルの結合
例えば9個のセルがあって、セルを繋げて要素を配置したいとします。
gridレイアウトを使えば…
このように簡単にセルを使ってレイアウトが組めるのです。
やり方は
親要素に
grid-template-areas:
“header header header ”
“copy content content”
“footer footer footer “;
を追加します。CSSの中身が”セルと同じ配置”になっていますね。
“”の中身は任意でつけた名前です。
あとは子要素をクラス分けして
.header{
grid-area: header;
}
と入力すると、親要素で決めたCSSのエリアに表示されるようになります。
