CSS Grid 布局揭秘

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

深入挖掘 CSS Grid 布局规范,发掘一些你可能不知道的特性,并探索即将到来的特性。

CSS Grid 布局于 2017 年 3 月 开始被浏览器所支持,在撰写本文时,大多数网站有超过百分之70的访问者有 CSS Grid 特性支持。 这个数据还在快速增长中, 并且在 Edge 浏览器发布更新支持后继续改善。

我希望你之前已经有时间去探索过 CSS Grid 布局的一些特性了。 这篇文章将带你探索一些你可能不知道的特性。 并且了解一下未来阶段中可能实现的规范。

minmax() 函数

不像其他的布局方式,设置元素大小均要在该元素本身,而在 Grid 布局中,我们在元素的容器级别去设置元素的大小。 我们通过定义网格轨道(Track),创建出网格单元格(Cells),并将内容至于单元格之中。

为了使得内容能都在超出或者小于设计预期时能够灵活的展现, Gird 给 CSS 带来了一些新的特性。 其中一个就是 minmax() 函数。 这个函数意味着你能够指定一个网格轨道的最小值和最大值。

在下面的例子中,我有一个左上角放置标题右边放置图片的小板块。 我想顶行的最小值为 150px 高, 无论标题有多少行或其他内容所需的空间大小。

然而, 如果内容需要占用多行或者字体更大, 我想这个容器能够增大到 150px 以上。 此时在这里使用 minmax(), 设置最小值为 150px 以及一个最大值为 auto

.grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: minmax(150px, auto) minmax(300px,auto);
}

minmax()函数

通过设置行的最小高度, 我们在设计中创建了一个大小刚好的行,即使内容比预想更短一些。

minmax()函数

minmax() 函数中设置最大值为 auto 意味着如果内容比预想的要多,则不会导致内容溢出。

通过使用 minmax(),如果我们只是有一个标题在这个容器中,容器大小比内容所需要的空间更大。 如果我们放入了更长的标题或者附加的文字,它能自动展开空间。

auto-fillauto-fit

Flexbox 开启了许多不需要学习媒体查询而实现响应式设计的模式。 Grid 则更进一步,允许元素在两个维度上排列的灵活设计模式: 通过设置行与列。 这种模式实用的地方就在于能够在一个容器中尽可能放入多的列, 为了达到这种效果,我们需要使用两个关键词: auto-fillauto-fit

为了能够在容器中放下尽可能多的 200px 大小的列轨道,我们可以这样:

.grid1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
}

为了能够使所有列都能保持灵活性但始终保持一个 200px 的最小值, 将上文提到的 minmax() 函数带入即可。 我们即可创建至少有200px最大 1fr 的列。 在放入尽可能多的 200px 大小的列之后, 浏览器会将所有剩余的空间均分分配给每一列。

.grid1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, auto));
}

minmax()函数

上图展示了 auto-fill 与固定大小列组合以及 auto-fillminmax() 组合创建的灵活大小列之间的区别。

我在这里使用的 auto-fill 关键词; 会使得即使列中没有内容,其所需要占用的空间仍然得到保留。如果使用 auto-fit, 任何空的轨道都会自动收缩起来,并将剩余的空间分配给其他的轨道。

密集填充模式

当你在元素上声明 display: grid 时, 所有的直接子级元素都会成为网格项, 所有的网格项都会自动将其排布在网格之中。 这是由于规范中所定义的自动排列规则。

如果你的网格项包含了其他的轨道, 这意味着将会有其他的网格项将无法填入剩余

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/blog/2352.html

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

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