最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

如何get新技能,在未来css中使用grid风格布局

CSS&HTML AZ 1650浏览 0评论

grid网格属性是css3中新增的,方便构建各种网格布局需求。grid有点像tables,可以做到行、列页面布局和对齐。在语义化、页面流加载达到更优的效果。

基础示例

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Grid Row、Grid Column

设置网格布局中的行列,分别具有grid-auto-rows,grid-template-rows和grid-auto-columns,grid-template-columns自动大小属性。在设置相关性时,还可以设置其grid cell属性。
如下示例

.wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-auto-rows: 100px;
}
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

Grid Areas

网格区域是构成网格上矩形区域的一个或多个网格单元格。当您使用行放置项目或使用命名网格区域定义区域时, 将创建网格区域。显示突出显示的网格区域的图像,网格区域在本质上必须是长方形的;例如, 不可能创建 t 形或 l 型网格区域。

在下面的示例中, 我有一个带有两个网格项的网格容器。我用网格区域属性命名这些, 然后使用网格模板区域将它们放在网格上。这将创建两个网格区域, 一个覆盖四网格单元, 另外两个。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 100px 100px;
  grid-template-areas: 
    "a a b"
    "a a b";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
<div class="wrapper">
   <div class="item1">Item</div>
   <div class="item2">Item</div>
</div>

转载请注明:TUTERM.COM » 如何get新技能,在未来css中使用grid风格布局

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!