CSS Grid布局:网格单元格布局

CSS Grid布局对于我等来说就是一个全新的布局,但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容(《CSS Grid布局:什么是网格布局》和《CSS Grid布局:浏览器开启CSS Grid Layout》)为这篇文章做足了铺垫。或许你想知道的是如何使用?各位看官不用太急,接下来通过各种实例向大家阐述CSS Grid布局,让我们一起领略其强大的魅力。

当然,接下来的示例不是我想出来的,这是我挖出来的,主要制作者是Rachel Andrew。在继续往下阅读之前,我们应该一起感谢Rachel Andrew,感谢他给我们提供这么多有关于CSS Grid Layout的示例。同时如果你想在你的浏览器中能正常的演示接下的有关于CSS Grid Layout的示例,你得先保证你已阅读了《CSS Grid布局:浏览器开启CSS Grid Layout》一文,并且按照文章中的方法进行过设置。如果没有话,或许你将看不到下面示例的效果。咱也不纠结了,开始实战吧。

定义一个网格

可以给父容器的display属性设置为grid或者inline-grid来定义一个网格。这样你就可以使用grid-template-columnsgrid-template-rows属性来创建一个网格。

在这个示例中,创建了一个三列网格,其中三个列的列宽是100px,并且指定列与列之间的间距为10px。同时网格具有三行,每行的高度是自动的,另外行与行之间的间距是10px。简单点说就是一个三行三列的网格,并且列与列之间,行与行之间的间距都是10px

此时浏览器将容器中的子元素自动填入到每个网格单元格中,当超过指定的列数时,网格会自动换行,如下图所示:

定义网格

看看代码是怎么完成的:

HTML
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/line-base-placement-layout.html

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

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