css - 如何跨越到隐式网格中的最后一列?
问题描述
我希望一个项目从第一列开始,到最后一列结束,不管有多少列。
它应该像这样工作:
item {
grid-column-start: 1;
grid-column-end: -1;
}
将第 n 条网格线添加到网格项的位置。如果给定一个负整数,则它会从显式网格的结束边缘开始反向计数。
所以这只适用于显式网格?为什么它不能在隐式网格上工作?
解决方案
为什么它不能在隐式网格上工作?
因为我们可以轻松地在未定义的情况1或循环依赖项上运行。如果是隐式网格,这意味着我们需要首先放置所有其他元素来识别隐式网格,然后我们放置我们的元素但是如果我们放置我们的元素,我们将获得另一个隐式网格,所以从技术上讲,如果没有隐式网格,您将无法知道放置元素。
隐式网格背后的想法是在放置具有已知位置的元素后自动放置没有为其放置定义任何内容的元素。
您可以通过对行或列使用一些技巧来克服这个问题:
1一个基本的例子:
.grid {
display: grid;
grid-template-columns: 50px;
grid-gap: 5px;
grid-auto-flow: column;
grid-auto-columns:50px;
}
.grid>span {
height: 50px;
background: red;
}
.grid>span.place {
grid-column: 1 / -1;
background: blue;
}
<div class="grid">
<span></span>
<span class="place"></span>
</div>
从逻辑上讲,我们首先将蓝色跨度放置在显式网格中,然后我们自动放置红色跨度以获得 2 列的隐式网格。
考虑到您的逻辑,我有以下情况:
我改变了蓝色的位置,所以它需要两列,这会将红色移动到第三列。我再重复一遍(无限循环)
我改变了蓝色的位置,所以它需要两列并与红色的一列重叠(不是很合乎逻辑和直观)
我没有放置蓝色,但我先放置红色,然后我要么与红色重叠(不合逻辑),要么将蓝色放在该列中并将红色推到另一个位置,然后我回到(1)
推荐阅读
- python - datetime.fromtimestamp() 比 datetime.utcfromtimestamp() 花费更长的时间
- python - Python GRPC 记录失败的连接尝试
- c# - 状态机的统一性能:代表还是条件?
- php - 我如何编写数据库查询代码 Joomla 文章?
- python-3.7 - 如何在 Python 中覆盖打印的一个衬里?
- php - Ajax 多个表单提交加载数据,在使用 PHP 的 div 中,不起作用
- android - Android中的未知状态图标
- python-3.x - 使用来自检查点的动量训练的模型的 TensorFlow 负载权重
- css - iPhone 上不显示背景图像
- python-3.x - 在python的列表中计算相似元素对