让我们接着来看网格布局
有关显式网格和隐式网格
在之前例子中,我们使用 grid-template-columns 和 grid-template-rows 来构建我们的网格。根据我们对这俩个属性的设置所划分出来的区域就是 显式网格。当网格元素的数量多于由我们自己设置的列轨道和行轨道划分出的网格单元数量时,网格容器就会 自动生成 具有 一定宽度或者高度(宽高值通常是根据放置其中的元素的宽高决定的) 的行轨道和列轨道(这些行轨道和列轨道会综合 已经设置好的网格来进行分行或者分列)来容纳这些多出来的网格元素,这些由网格容器自动生成的部分就是隐式网格。
下面请看示例:
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 100px 200px;
}
</style>
<body>
<div class="wrapper"></div>
</body>
效果如图:
可以看到,网格容器根据我们设置的