CSS网格:网格-行/列-开始/结束与网格-区域+网格-模板区域
CSS网格:网格-行/列-开始/结束与网格-区域+网格-模板区域
提问于 2019-03-17 23:45:54
我一直在阅读CSS的CSS网格教程，但是有一个基本的方面让我有点困惑。
似乎有两种方法可以决定一个网格项跨越多少个单元格：
grid-template-area使用赋予具有grid-area属性的网格项的名称- 使用
grid-column-start/end和grid-row-start/end
查看下面的测试代码，grid items的大小似乎是按照以下顺序确定的(左边的值覆盖右边的值)：
grid-row/column-start/end > grid-template-area >项目本身的大小
问题
- 我上面的订单大致正确吗？
- 是否有一种更好的方法(上面的1或2)指定
grid items的大小(即它们跨越多少个单元)？
码
.container {
display: grid;
border: 1px solid green;
grid-template-columns: 120px 120px 120px;
grid-template-rows: 120px 120px 120px;
grid-template-areas: "item-1 item-1 item-2" "item-3 item-4 item-4" "item-5 item-6 .";
}
.item-1 {
border: 1px solid blue !important;
grid-area: item-1;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 1;
}
.item-2 {
grid-area: item-2;
}
.item-3 {
grid-area: item-3;
}
.item-4 {
grid-area: item-4;
}
.item-5 {
grid-area: item-5;
}
.item-6 {
grid-area: item-6;
}
.box {
border: 1px solid red;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}<div class="container">
<div class="item-1 box">Box1</div>
<div class="item-2 box">Box2</div>
<div class="item-3 box">Box3</div>
<div class="item-4 box">Box4</div>
<div class="item-5 box">Box5</div>
<div class="item-6 box">Box6</div>
</div>
回答 1
Stack Overflow用户
发布于 2019-03-18 00:06:24
使用grid-template-areas属性，您仅限于矩形网格区域。
有了grid-column-*和grid-row-*属性，您就有了更多的灵活性。
使用grid-template-areas，您只能在显式网格中创建网格区域。
使用grid-column-*和grid-row-*，您可以在显式网格之外创建隐式网格中的网格区域。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55213061
复制相关文章
相似问题
腾讯云开发者
