User:盐棋/Sandbox.css

.direct {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	text-align: center;
}

.header,
.main,
.figure {
	width: 100%;
	box-sizing: border-box;
}

/* 媒体查询 */
@media (min-width: 720px) {
	.direct {
		grid-template-areas:
			"header header"
			"main figure";
	}
}

@media (max-width: 719px) {
	.direct {
		grid-template-areas:
			"header"
			"figure"
			"main";
	}
}

/* 设置 grid area */
.header {
	grid-area: header;
}

.main {
	grid-area: main;
}

.figure {
	grid-area: figure;
	margin: 0 auto;
}