SOURCE

	<div class="wrapper">
		<div>
			<div>ajanuw</div>
			<div>alone</div>
			<div>asd</div>
		</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>

		.wrapper {
		  background-color: #fff;
			display: grid;
			text-align: center;
			/* grid-template-columns: 200px auto; */
			/* 把列切成两分，并从左到右定义宽度 */
			/* grid-template-columns: 1fr 1fr; */
			/* rf单位 定义相等宽度的轨道，这些轨道会随着可用空间增长和收缩 */
			/* grid-template-columns: repeat(2, 1fr); */
			/* repeact 重复几次，效果和上面的一样 Docs: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#%E5%9C%A8%E8%BD%A8%E9%81%93%E6%B8%85%E5%8D%95%E4%B8%AD%E4%BD%BF%E7%94%A8repeat()*/
			/* grid-template-columns: 50px repeat(2, 1fr) 50px; */
			/* repeat 混合 */
			/* grid-template-columns: 2fr 1fr; */
			/* 可用空间被3等分。其中两份给了第一个轨道*/
			/* grid-template-columns: 100px 1fr 100px; */
			/* 也可以使用混合尺寸 */
			grid-template-columns: 100px 1fr 100px;
			/* grid-auto-rows: 200px; */

			/* 行最小为100px */
			grid-auto-rows: minmax(100px, auto);

			/*列之间的间距*/
			grid-column-gap: 10px;

			/*行之间的间距*/
			grid-row-gap: 5px;
		}

		.wrapper>div:nth-child(1) {
			background-color: red;
			/*改变网格线 网格线， Docs: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#%E5%9C%A8%E8%BD%A8%E9%81%93%E6%B8%85%E5%8D%95%E4%B8%AD%E4%BD%BF%E7%94%A8repeat()#%E7%BD%91%E6%A0%BC%E7%BA%BF*/
			grid-column-start: 1;
			grid-column-end: 3;
			grid-row-start: 1;
			grid-row-end: 3;

			/* 网格嵌套 */
			display: grid;
			grid-template-columns: 1fr;
		}

		.wrapper>div:nth-child(2) {
			background-color: #f48;
			grid-row-start: 1;
			grid-row-end: 3;
		}