css - 在CSS网格中,对网格列使用1值意味着什么?

标签 css css-grid

我知道在grid-row-startgrid-column-start中可以键入一个值,但是,当对grid-column使用一个值时,这是什么意思。

grid-column:3;
grid-column-start:2;
grid-column-end:4;

最佳答案

这是official spec,这是user friendly translation

根据经验,搜索“ mdn +属性名称”将使您在MDN上的页面易于理解,该页面还包含指向任何当前,以前或将来(拟议)官方文档的链接。

关于速记属性(如果使用Chrome)的另一个非常有用的经验法则是,在开发控制台中的“元素”选项卡上的“样式”抽屉中,速记属性在该值之外总是带有一个小箭头。单击它会显示完整的“翻译”。

grid-column: 3解释为:

grid-column-start: 3;
grid-column-end: auto;


最后,另一个经验法则是不要将W3C(官方Web联盟文档:http://w3.org)与w3cschools混淆,后者是一家私有企业,试图通过提供模糊且很少更新的内容来通过搜索网络文档获利。
从技术上讲,它是网络钓鱼,但是一种无害的网络钓鱼。

关于css - 在CSS网格中,对网格列使用1值意味着什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53346020/

相关文章:

html - 嵌套 div 的流体高度

css - 在元素中嵌套@media 规则

html - CSS 网格自动展开

html - 在 css 网格中实现 flexbox 行反转

css - 在网格模板行 : repeat() 中设置 "max rows"

javascript - div 正在淡入,但突然淡出(Jquery)

javascript - 单击新 h3 后隐藏以前打开的 p 标签

jquery - 元素不显示时如何重新初始化插件

CSS 关键帧从下到上动画 div 高度

html - 如果父级在 Chrome 中有 flex-direction 列,则网格行不会拉伸(stretch)到整个元素高度