题解 | #display - grid - 区域#
display - grid - 区域
https://www.nowcoder.com/practice/020dce1079364b7dbba7b8d754f1c227
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
text-align: center;
display: grid;
grid-template-rows: 100px;
grid-template-columns: repeat(3,100px);
grid-template-areas: 'a b c''d e f''g h i';
}
article {
height: 100px;
border: 1px solid black;
}
article:nth-child(1) {
grid-area: e;
}
</style>
</head>
<body>
<section>
<article>1</article>
<article>2</article>
<article>3</article>
<article>4</article>
<article>5</article>
<article>6</article>
<article>7</article>
<article>8</article>
<article>9</article>
</section>
</body>
</html>
