1. 首页
  2. css

关于CSS网格的另一组有趣的事实

去年,我在一次研讨会之后收集了一组关于CSS网格布局的有趣事实。今年,我参加了另一个研讨会,我学到了一些关于我们都非常喜欢的布局规范的更令人兴奋的事实。
当然,我不会把我的知识留给自己。我很高兴再次与你分享我的发现,CSS技巧社区。
了解\”grid\”快捷方式是如何工作的
有时,阅读和理解部分网格或任何其他规范可能非常困难。
例如,我花了很长时间才理解如何使用grid速记适当地。规范规定,有效值为:
| / [ auto-flow && dense? ] ? | [ auto-flow && dense? ] ? /
如果您花时间或有阅读规范的经验,您可以理解它。我尝试了几种组合,但都失败了。最终帮助我的是规范中的一条注释:
注意,您只能在单个网格声明中指定显式或隐式网格属性。
Rachel Andrew有一系列文章,以CSS网格为例,帮助解释如何阅读规范。
So,我们可以使用grid速记来指定许多事情,但不能同时指定所有事情。以下是一些示例。使用\”grid\”代替\”grid template\”
grid-template属性是在单个声明中设置grid-template-columns、grid-template-rows和grid-template-areas的缩写。我们也可以用grid速记法来做同样的事情,它稍微短一点。
grid: \”one one\” 200px\”two four\”\”three four\”/ 1fr 2fr;/* shorthand for: */ /*grid-template-areas: \”one one\” \”two four\” \”three four\”;grid-template-rows: 200px;grid-template-columns: 1fr 2fr;*/
这个速记法创建了三行两列,四个命名的网格区域。第一行的显式高度为200px,而第二行和第三行的隐式高度为auto。第一列的宽度是1fr,第二列的宽度是2fr。
想知道更多关于显式网格和隐式网格的区别吗?看看我写的这篇关于CSS技巧的文章。
如果我们不需要它们,就不必指定区域。我们可以使用grid速记来定义显式的行和列。下面的两个代码片段基本上是在做相同的事情:
grid-template-rows: 100px 300px;grid-template-columns: 3fr 1fr;
grid: 100px 300px / 3fr 1fr;处理隐式行和列
也可以使用grid速记来指定grid-auto-flow,但它并不像我们预期的那样工作。我们不只是在声明的某个地方添加row或column关键字。相反,我们必须在斜杠的正确一侧使用auto-flow关键字。
如果它在斜杠的左侧,速记将grid-auto-flow设置为row,并创建显式列。
grid: auto-flow / 200px 1fr;/* shorthand for: */ /*grid-auto-flow: row;grid-template-columns: 200px 1fr;*/
如果它在斜杠的右侧,速记将grid-auto-flow设置为column并创建显式行。
**26***/pre>
我们还可以将隐式轨迹的大小与auto-flow关键字一起设置,后者分别将grid-auto-rows或grid-auto-columns设置为指定的值。
**30***/pre>Feature queries in Edge
检查对CSS网格的支持对功能查询非常有用,因为所有支持网格的浏览器都能理解功能查询。这意味着我们可以检查浏览器是否支持旧规范或新规范,或者两者都支持。两个都有,你问?从Edge 16开始,Edge不仅支持新规范,还支持旧规范。
因此,如果您想区分支持新规范和不支持新规范的Edge版本,您必须这样编写查询:
/* Edge 16 and higher */@supports (display: -ms-grid) and (display: grid) {div {width: auto;}}/* Edge 15 and lower */@supports (display: -ms-grid) and (not (display: grid)) {div {margin: 0}}
这里有一个方便的小演示,它显示了在打开浏览器时使用的功能查询触发器。
作为补充说明,您不应该过分使用(mis)功能查询进行浏览器嗅探,因为浏览器检测不好。指定每列的确切项数对于页面布局来说非常有用,但它可能非常有用在组件级别上也很有用。我最喜欢的一个例子是在多列组件中指定每列项目的确切数量。
假设我们有一个包含11个项目的列表,并且希望在每四个项目之后添加一个新的列。在父对象上设置display: grid之后,我们要做的第一件事就是改变网格自动放置算法的工作方式。默认情况下,它依次填充每一行,并根据需要添加新行。如果我们把grid-auto-flow设为column,网格将依次填充每一列,这就是我们想要的。最后我们要做的是指定每列的项数。这可以通过使用grid-template-rows属性定义所需的任意多个显式行来实现。我们可以显式地设置每一行的高度,或者使用auto关键字使其与内容一样大。
ul {display: grid;grid-template-rows: auto auto auto auto;/* or shorter and easier to read: *//* grid-template-rows: repeat(4, auto); */grid-auto-flow: column;}
如果我们必须将每列的项数更改为5,我们只需在曲目列表中添加另一个曲目,或者使用重复符号,只需更改第一个p

关于CSS网格的另一组有趣的事实 为WP2原创文章,链接:https://www.wp2.cn/css/%e5%85%b3%e4%ba%8ecss%e7%bd%91%e6%a0%bc%e7%9a%84%e5%8f%a6%e4%b8%80%e7%bb%84%e6%9c%89%e8%b6%a3%e7%9a%84%e4%ba%8b%e5%ae%9e/