CSS 网格中基于线的定位

您所在的位置:网站首页 span的间距怎么调 CSS 网格中基于线的定位

CSS 网格中基于线的定位

2023-06-03 22:11| 来源: 网络整理| 查看: 265

除了”起始线与结束线“的定位方法,你还可以使用”起始线与跨越轨道数量“的定位方法

* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } One Two Three Four .box1 { grid-column: 1; grid-row: 1 / span 3; } .box2 { grid-column: 3; grid-row: 1 / span 2; } .box3 { grid-column: 2; grid-row: 1; } .box4 { grid-column: 2 / span 2; grid-row: 3; }

你也可以在 grid-row-start/grid-row-end 和 grid-column-start/grid-column-end 属性中使用 span 关键字。接下来两个例子会创建同样的网格。第一个例子中我们设定了起始行,然后说我们想结束线在跨越 3 条线之后。那这个元素就会从 1 号线开始,跨越 3 条线,到 4 号线结束。

.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: span 3; }

第二个例子中,我们定义了结束行线,然后设置起始线为跨越 3 条线。意味着这个元素会从指定的线往上跨越 3 条线。这个元素会从 4 号线开始,跨越 3 条线到 1 号线。

.box1 { grid-column-start: 1; grid-row-start: span 3; grid-row-end: 4; }

为了熟悉基于线的定位方式,你可以尝试用网格布置几个列宽不同的元素来实现一些常见布局。记住,如果你没有给所有元素定位,那些没被定位的元素就会按照自动定位规则定位。这么做的结果可能恰好和你的目标一样,但如果一些元素在你预料之外的地方出现,先检查一下你有没有给它定位。

再者,记住你明确定位的元素是可以互相重叠的。有时你能用这点创造一些有趣的效果,但有时也会因为你定位错了线而导致不正确的重叠。Firefox Grid Highlighter 可以在你学习时给你帮助,特别是当你的网格比较复杂时。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3