跳到主要内容

使用CSS Grid时尚灵活的布局

A woman sits at a laptop tweaking a CSS Grid layout

CSS Grid非常适合创建行和列的双轴布局。语法很简单,使页面布局变得轻而易举。现在可以在CSS中简单地描述需要多个嵌套容器的布局。

网格与其他布局属性的工作方式不同,因为将“网格”值应用于“显示”属性将影响任何直接子项。这些元素现在是网格项,将根据您在父项上设置的规则进行定位(除非特别放置)。

掌握网格

Grid带来了许多新功能:

  • 网格差距

Grid不是使用边距,而是有自己的属性来定义网格项之间的间隙,从而可以定义网格的布局,而不受任何间隙的影响。网格系统(如在因纽特和Twitter Bootstrap中发现的那些)通常依赖于设置负边距以便正确对齐所有内容。

  • Fr单位

分数的缩写,这个新的测量单位用于将布局分成几个部分,有或没有间隙。

  • 网格放置

CSS Grid允许在所有其他项目之前对网格中的任何元素进行优先级排序和定位,然后自动定位。

  • 网格区域和模板

定义网格上的命名区域,然后可以参考这些区域以几乎ASCII方式定义布局。

  • MINMAX()

'minmax()'属性值使您可以为网格项,列和行应用最小和最大大小。 Flexbox和CSS中的所有其他布局模块都遗漏了这个功能。

建立你的网格

CSS Grid强大的区域和模板可以轻松实现复杂的布局。首先,使用'grid-area'属性将名称应用于网格中的元素 - 例如'header {grid-area:header; }”。一旦为网格中的所有区域命名,就可以使用'grid-template-areas'属性来描述布局。

grid-template-areas:“header header header”“left-sidebar article right-sidebar”“footer footer footer”;

上面的代码示例描述了一个三乘三的网格,如果您希望它跨越多个列或行,则只需重复网格项的名称。您还可以使用媒体查询来更改不同大小屏幕的网格布局。

然后,您可以使用新的“fr”单元来定义宽度在不同列之间的分割方式:

grid-template-columns:1fr 3fr 1fr;

上面显示的示例将可用宽度分成五个相等的宽度值;换句话说,它将对第一列应用五分之一,对第二列应用五分之五,对最后一列应用五分之一。

为了调整行的大小,您可以使用新的“minmax”属性值来调整顶部和底部列的大小,然后允许中间行跨越网格中的剩余空间。

grid-template-rows:minmax(min-content,max-content)auto minmax(min-content,max-content);

本文最初发表于创意网页设计杂志Web Designer的第271期。购买问题271要么订阅Web Designer

想加强你的CSS Grid技能?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018

布伦达·斯塔尔(Brenda Storer)将于2018年4月25日至27日在纽约出生的现实世界中使用CSS Grid进行演讲

作为软件开发机构的设计师和前端开发人员,Brenda Storer自2017年3月首次发布到浏览器以来,一直在使用CSS Grid生产网站,并且是一个很大的粉丝。

在她的演讲中2018年4月25日至27日生成纽约,Brenda将逐步展示如何使用CSS Grid逐步增强您的网站,并为旧浏览器编写一个防弹后备(甚至继续使用您当前的网格框架作为后备),所有这些都使用纯CSS:无需JavaScript 。

Generate New York将于2018年4月25日至27日举行。
立即获取您的机票

相关文章:



翻译字数超限