グリッドレイアウトの基本概念(2)

wrap_01(CSS Grid)
One
Two
Three
Four
Five
Six
#wrap_01 .wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 100px;
	column-gap: 2.0%;
	grid-row-gap: 1em;
}

wrap_01(flexbox)
One
Two
Three
Four
Five
Six

		

		
		wrap_02(入れ子上のグリッド)
		

			

				

					
a

					
b

					
c

				

				
Two

				
Three

				
Four

				
Five

				
Six

			

			
#wrap_02 .wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 100px;
}
#wrap_02 .wrap .box1 {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 3;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
}
#wrap_02 .wrap .box2 {
	grid-row-start: 3;
	grid-row-end: 5;

}

		

		

		

		wrap_03(z-indexによる項目のレイヤー可)
		

			

				
One

				
Two

				
Three

				
Four

				
Five

			

			
#wrap_03 .wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 100px;
} 
#wrap_03 .wrap div {
	box-sizing: border-box;
	padding: 10px;
}
#wrap_03 .wrap .box1 {
	grid-column-start:1;
	grid-column-end:4;
	grid-row-start: 1;
	grid-row-end: 3;
	border: 1px solid #000;
	z-index: 1;
}
#wrap_03 .wrap .box2 {
	grid-column-start: 1;
	grid-row-start: 2;
	grid-row-end: 4;
	z-index: 2;
}