CSS Grid布局:图解网格布局中术语二

上一节中,主要介绍了CSS Grid布局中网格线、网格布局属性、单元格合并等相关术语,在这篇文章中将继续介绍网络布局中的相关术语:网格区域,网格轨道和网格单元格。希望对大家对学习CSS Grid布局有所帮助。

网格区域(Grid areas)

记得前面的文章中介绍网络线的一节中,了解到可以通过grid-rowgrid-column构建出grid-area(也就是我们要说的网格区域)。通过网格线构建的网格区域,其有一个明确的顺序:grid-row-start / grid-column-start / grid-row-end / grid-column-end。如下面示例所示:

.item-1 {
  grid-area: 1 / 1 / 2 / 4;
}
.item-2 {
  grid-area: 2 / 1 / 4 / 2;
}
.item-4 {
  grid-area: 2 /  3 / 4  / 4;
}
.item-6 {
  grid-area: 4 / 1 / 5 / 4;
}

效果如下:

上面这种方式,能通过网格线构造出想要的网格区域。但更妙的是,在CSS Grid布局中可以直接定义网格区域,用来放置对应的网格项目。CSS Grid布局有可以使用grid-template-areas属性来声明。然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。

假设我们有一个5 x 4的网格:

<section class="grid">
  <div class="title">title</div>
  <div class="nav">nav</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</section>

先在把.grid声明为网格容器:

.grid {
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-grid-layout-terminology-part2.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部