5分で完璧に分かる！CSS Gridの基本的な使い方を解説

wrap_01
1
2
3
4
5
6
#wrap_01 .wrap {
	display: grid;
}

wrap_02
1
2
3
4
5
6
#wrap_02 .wrap {
	display: grid;
	grid-template-columns: 100px 100px 200px;
	grid-template-rows: 50px 100px;
}

wrap_03
1
2
3
4
5
6
#wrap_03 .wrap {
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px 100px;
}
#wrap_03 .wrap .item1 {
	grid-column-start: 1;
	grid-column-end: 4;
}

wrap_04
1
2
3
4
5
6
#wrap_04 .wrap .item1 {
	grid-column:1 / 4;
}

wrap_05
1
2
3
4
5
6
#wrap_05 .wrap .item1 {
	grid-column-start: 1;
	grid-column-end: 3;
}
#wrap_05 .wrap .item3 {
	grid-row-start: 2;
	grid-row-end: 4;
}
#wrap_05 .wrap .item4 {
	grid-column-start: 2;
	grid-column-end: 4;
}