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

wrap_01
One
Two
Three
Four
Five
#wrap_01 .wrap {
	display: grid;
	grid-template-columns: 200px 200px 200px;
}

wrap_02
One
Two
Three
Four
Five
#wrap_02 .wrap {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

wrap_03
One
Two
Three
Four
Five
#wrap_03 .wrap {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
}

wrap_04
One
Two
Three
Four
Five
#wrap_04 .wrap {
	display: grid;
	grid-template-columns: 500px 1fr 2fr;
}

wrap_05
One
Two
Three
Four
Five
#wrap_05 .wrap {
	display: grid;
	grid-template-columns: repeat(3 , 1fr);
}

wrap_06
One
Two
Three
Four
Five
#wrap_06 .wrap {
	display:grid;
	grid-template-columns: 80px repeat(3 , 1fr) 100px;
}

wrap_07
One
Two
Three
Four
Five
Six
#wrap_07 .wrap {
	display: grid;
	grid-template-columns: repeat(5, 1fr 2fr);
}

wrap_08
One
Two
Three
Four
Five
#wrap_08 .wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 80px;
}

wrap_09
One
Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac rutrum odio. Suspendisse volutpat varius nulla, sit amet posuere neque accumsan sit amet. In facilisis turpis vel ligula fermentum, ut consequat magna pharetra. Praesent sit amet nulla ligula.

Three
Four
Five
#wrap_09 .wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(100px, auto);
}