Gridレイアウトをもっと便利に作る方法を学習します。
CSS Gridの一括設定など、様々なプロパティを理解することが目的です。
Gridコンテナの追加設定
Gridにエリア名を追加する
Gridコンテナの基本セットにエリアを追加するプロパティです。
エリア名をつけると、アイテムの設定が楽になるのと、セルを結合することができます。
gridコンテナのセレクタ{
display: grid;
grid-template-rows: 200px auto;
grid-template-columns: 200px 1fr 300px;
grid-template-areas:
“box1 box1 box3” /* 1行目のエリア名 */
“box4 box5 box3”; /* 2行目のエリア名 */
}エリア名が同じセルが結合されます。
セルを結合するためにも、エリア名の指定が必要になっています。
See the Pen 15-4 by Rayout-gw (@Rayout-gw) on CodePen.
grid-templateプロパティで一括設定
gridコンテナのセレクタ{
display: grid;
grid-template:
“box1 box2 box3” 200px
“box4 box5 box3” auto /
200px 1fr 300px ;
}エリア名の後に行トラックの高さを設定し、最後の行の高さの後に「/（スラッシュ）」で区切って列のトラック幅を記述します。
gridコンテナのセレクタ{
display: grid;
grid-template: 200px auto / 200px 1fr 300px ;
}エリア名を使わない場合はもっとシンプルになります。
複雑になるけど、覚えてしまうと簡単です！
トラック間の隙間（溝）を作る
マージンを使わず簡単に、セル間の余白（Gap）を作ることができます。
Gapは行の間、列の間で個別設定できますが、一括設定で覚えると良いでしょう。
gridコンテナのセレクタ{
display: grid;
grid-template:
“box1 box2 box3” 200px
“box4 box5 box3” auto /
200px 1fr 300px ;
gap:20px 40px;
}値は「row column」の順で半角スペースで区切って記述し、値を1つにすると行・列の両方になります。
gridアイテムの設定
エリア名を使うと、アイテムの設定も簡単になります。
gridアイテムのセレクタ{
grid-area:box1;
}CSS Gridをもっと簡単・便利に
CSSジェネレーターを使うと、視覚的にGridの設定を作ることができます。
Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually a…
grid.layoutit.com
cssgrid-generator.netlify.app
Generate CSS (+ HTML) code with simple UI, by Zinglecode
css-generator.netlify.app
練習問題の解答
body{
margin: 0;
}
div{
width:95%;
margin: auto;
/* display:grid; */
grid-template-rows:20vh 5vh 65vh 10vh;
grid-template-columns:auto 280px;
}
header{
grid-row: 1/2;
grid-column: 1/3;
background-color:rgb(175,210,230);
}
nav{
grid-row: 2/3;
grid-column: 1/3;
background-color:rgb(120,210,110);
}
aside{
display: block;
grid-row: 3/4;
grid-column: 2/3;
background-color:rgb(255,230,175);
}
main{
grid-row: 3/4;
grid-column: 1/2;
background-color:rgb(255,205,200);
}
footer{
grid-row: 4/5;
grid-column: 1/3;
background-color:rgb(175,210,230);
}
bodyセレクタの設定は、リセットCSSの代わりです