close

ホームページ作り方[グリッドレイアウト]

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12

box群の親要素にwidth:600px;height:600px; background: white; border: solid; display: grid; grid-template-columns: 100px 200px 100px; grid-template-rows: repeat(2,100px);と設定しました。grid-template-columnsプロパティでグリッドレイアウトの列の幅や数を指定し、 grid-template-rowsプロパティで行の幅や数を指定します。列は左から100,200,100ピクセル幅の三つ、行は100ピクセル二つのグリッドを形成しています。グリッドレイアウトの行からから外れたボックスの配置は親要素の残りのスペースに均等に割り振られます。

box1
box2
box3
box4
box5
box6

ボックス群の親要素にdisplay: grid; grid-template-rows: repeat(2,100px); grid-auto-columns:400px;grid-auto-rows:50px;と設定しました。grid-auto-columnsgrid-auto-rowsプロパティでグリッドレイアウトの指定外のサイズが決められます。今回は行の幅100ピクセル二つのレイアウトを指定してあり、それ以外の行は50ピクセル、列の幅はグリッドレイアウトで指定していないのでgrid-auto-columnsプロパティの400ピクセルになります。

box1
box2
box3
box4
box5
box6
box7
box8
box9
box10
box11
box12

width:600px;height:600px; background: white; border: solid; display: grid; grid-template-columns: 100px 200px 1fr 2fr; grid-template-rows: repeat(2,100px);と設定しました。frは数字の割合だけ余白が分配されます。フレックスボックスのflex-growプロパティと同様です。今回は列の幅が100,200,100,200ピクセル。行の幅が100,100,400ピクセルに分配されます。

box1
box2
box3

width:600px;height:600px; background: white; border: solid;display: grid; grid-template-columns: 100px 200px 1fr; grid-template-rows: repeat(3,100px) 1fr;grid-template-areas:'box1 box1 .''box2 box3 box3''box2 box3 box3''. box3 box3';と記述しました。grid-template-areasプロパティで名前付きの グリッド領域 を指定します。box1にgrid-area:box1;と指定してあり指定されたグリッド領域に割り当てられています。グリッド領域は四角でなければなりません。指定しない場所は.(ピリオド)で記述します。

box1
box2
box3
box4
box5

box1〜5にそれぞれgrid-area:box1〜5を設定し、その親要素にwidth:600px;height:600px; background: white; border: solid; display: grid; grid-template:'box1 box1 box1'100px 'box2 box3 box4'1fr 'box5 box5 box5'auto / 100px 1fr auto;と設定しました。フレックスボックスで記述した3カラムのレイアウトと同じものです。grid-templateプロパティはgrid-template-columns、grid-template-rows、grid-template-areasの一括指定プロパティです。

cssの基礎の基礎/ボックスモデル/ボックスの配置/文字の修飾/フレックスボックス/レスポンシブデザイン/

MDN Web Docs

The World Wide Web Consortium