CSS Grid Auto

关键词:隐式轨道 / 隐式网格 / 自动布局算法

隐式网格

隐式网格是指当网格项目确认在显式网格之外时所创建的网格,简单来说,当没有足够空间或显式网格轨道来分配网格项目时,此时剩下网格会自动创建隐式网格。

当设置网格容器的网格模板grid-template属性并指定固定数量轨道时创建出来的就是典型的显式网格,而在实际的HTML中存在网格项目多余既定数量,此时这些多余的网格是之前未声明定义的,因此网格容器会通过添加隐式网格线来生成网格轨道,在将这些多余的网格分配到其中,这些多余的就是所谓“隐式网格”。

隐式网格轨道的尺寸由grid-auto-rowsgrid-auto-columns属性来确定,使用grid-auto-flow属性来控制隐式网格自身主动定位(auto-placement),这三个属性都需要在网格容器上设置。

属性 描述
grid-auto-flow 用于设置自动放置隐式网格在网格容器中的插入方式,默认为row,即自己主动布局。
grid-auto-rows 用于设置隐式网格行高,即自己主动生成行的长度。
grid-auto-columns 用于设置隐式网格列宽,即自己主动生成列的宽度。

如何产生隐式网格呢?

例如:定义一个网格容器,网格间距为1px,默认存放两列等宽网格项目,创建具有隐式网格的布局。

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.grid-container{
  display:grid;
  grid-gap:1px;

  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:70px;

  grid-auto-flow:row;
  grid-auto-rows:140px;
}
.item{
  color:white;
  text-align:center;
}
.item:nth-child(1),.item:nth-child(2){
  background-color:#f00;
}
.item:nth-child(3),.item:nth-child(4){
  background-color:#000;
}
自动创建轨道

问题是虽然在网格容器中设置了2列等宽的位置用来容器网格项目,也就是说只定义了1行轨道,但实际上网格容器中具有4个网格项目,问题来了,第3和第4个网格容器是如何处理的呢?

第3和第4会自动创建下一个轨道,即隐藏网格。创建出来的隐式网格的方向若没有设置则默认为rowgrid-auto-flow:row

这里我们首先将这4个网格分成两种类型显式网格和隐式网格,其中可以发现第1和第2个为显式网格,第3和第4网格为隐式网格。换句话说第1行为显式行轨道,第2行为隐式行轨道。

自动布局(grid-auto-flow / auto-placed)

grid-auto-flow: [ row | column ] || dense;

grid-auto-flow属性用来设置自动布局算法,用于精确指定在网格中被自动布局的网格项是如何排列的,也就是说指定自动放置的网格项是如何流入网格中的,因此也被称之为“网格自动流”。

自动布局算法 描述
row 默认值,逐行填充排列,必要时新增行。
column 逐列填充排列,必要时新增列。
dense 使用“稠密”堆积算法

稠密堆积算法 VS 稀疏算法

dense使用稠密堆积算法,若【后面】出现小元素则算法会尝试填充网格中【前面】留下的空白,如此这样会填补上稍大元素所留下的空白,但同时可能导致原有出现次序被打乱。

若省略dense则会使用稀疏算法,即在网格中布局元素时,布局算法只会向前移动,永远不会倒回来去填补空白,这样做以保证所有自动布局元素是[按照次序]出现的,即使可能会留下被后面元素填充的空白。

例如:改变隐式网格默认方向rowcolumn,此时隐式网格行高grid-auto-rows将会失效。

.grid-container{
  display:grid;
  grid-gap:1px;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:70px;
  grid-auto-flow:column;
  grid-auto-rows:140px;
}
.item{
  color:white;
  text-align:center;
}
.item:nth-child(1),.item:nth-child(2){
  background-color:#f00;
}
.item:nth-child(3),.item:nth-child(4){
  background-color:#000;
}
网格自动流方向

隐式网格行高(grid-auto-rows)

网格容器的grid-auto-rows属性可以用来定义隐式网格中行轨道的大小

.grid-container{
  display:grid;
  grid-gap:1px;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:70px;
  grid-auto-rows:140px;
}
.item{
  background-color:#000;
  color:white;
  text-align:center;
}

这里grid-template-rows:70px设置的是显式轨道的行高,grid-auto-rows:140px则设置的是隐式轨道的行高。

隐式轨道行高

隐式网格列宽

设置隐式网格列宽,首先需使用grid-auto-flow:column自动创建隐式网格流方向为列,然后在使用grid-auto-columns:1fr设置隐式网格的列宽,这里使用1fr做等分处理。

.grid-container{
  display:grid;
  grid-gap:1px;
  
  grid-template-columns:repeat(2, 30%);
  grid-template-rows:70px;
  line-height:70px;
  
  grid-auto-flow:column;
  grid-auto-columns:1fr;
}
.item{
  color:white;
  text-align:center;
}
.item:nth-child(1),.item:nth-child(2){
  background-color:#f00;
}
.item:nth-child(3),.item:nth-child(4){
  background-color:#000;
}
隐式网格列宽

例如:排序与布局

第1个网格项横跨左2格,后4格按grid-auto-flow:column的流向排列。

image.png
<style>
.grid-container{
  display:grid;
  grid-gap:1em;
  grid-template-columns:1fr 1fr / 1fr 1fr;
  grid-template-areas:"a b d" "a c e";
  grid-auto-flow:column;
}
.item:first-child{
  grid-area:a;
}
</style>
<div class="grid-container">
  <div class="item"><img src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture" width="450"/></div>
  <div class="item"><img src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture" width="200"/></div>
  <div class="item"><img src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture" width="200"/></div>
  <div class="item"><img src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture" width="200"/></div>
  <div class="item"><img src="https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture" width="200"/></div>
</div>
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读