问题标签 [css-grid]

我正在尝试将我的 Flexbox 布局更改为新的display: grid，并且默认情况下，列从左侧开始。

如何让它们从中心开始而不指定grid-column-start这样的？

（就像align-items: centerFlexbox 中的一样）

有可能display: grid吗？

编辑：这是我的 HTML 结构和 CSS 样式。

HTML

SASS

而且我还尝试将 应用于justify-self: center我想要居中的列，但结果不是我所期望的。（列不是从网格的中心开始的。）

我正在尝试将我的 Flexbox 布局更改为新的display: grid，并且我有三列。

它看起来像这样：

是否可以指定某些列从右侧而不是左侧开始，如下图所示？

（并且无需指定grid-column-start和grid-column-end，这可以通过margin-left: autoFlexbox 来完成）

我们有一个使用 Flexbox 完成的平铺项目的遗留部分。物品的容器是ul：

然后里面的项目是li：

我必须使用宽度和高度，因为图块的内容不同，并且我需要它们的大小相同。显然，如果我可以使用 css 网格，我就不会有这样的问题。

因此，我试图在@supportsfor 网格中添加一个 scss 块，尽管它可以工作，但项目的固定宽度正在摆脱网格排水沟。

如您所见，我尝试使用width: auto以删除以前用于width: 180px旧 flexbox 版本的内容，但是图块的大小不适合网格。

如果我从 flexbox 版本中删除，width: 180px网格版本看起来很完美。但是如果有人有一个支持 flex 但不支持 gris 的浏览器，它看起来很糟糕。

我怎样才能基本上“删除” width: 180px？

我有这种情况：https ://jsfiddle.net/johnsam/L811uzey/

我需要用内容覆盖（覆盖）container边界triangle。

我怎样才能？

编码：

我制作了一个简单的网站，其中一个#containerdiv 是两个 div 的父级：#left并且#right，通过使用Grid Layout：

有什么办法可以固定左列吗？我希望左边的文本保持在它的位置上，而右边的文本可以像现在一样滚动。添加position: fixed到#left破坏布局。

我知道这个问题已经解决了，但我很感激有一种方法可以让它与网格布局一起工作。

谢谢。

我正在使用padding-top将 div 的纵横比强制为 16:9。div 的内容是绝对定位并扩展以填充 div。

HTML：

CSS：

它可以很好地实现纵横比，但是由于某种原因，div 溢出了我的 CSS Grid 容器。

这是一个解决问题的工作示例：https ://jsfiddle.net/uo63yyer/30/

我有这种情况：https ://jsfiddle.net/johnsam/rdtva2fq/

在Chrome上效果很好，请参见：

它开始（参见“FIRST”和“LAST”btn）。好的。

在Safari上它没有（iPad/iPhone 也一样）看到这个：

“FIRST”btn OK，“LAST”一个不。该页面有一个滚动条，这是我不想要的！

如果我删除标题部分效果很好，所以我的猜测是 Safari 可能无法识别（height: 100vh减去该高度的标题部分）。我是正确的？

代码：

前段时间我问过这个关于 flexbox items 中等高元素的问题：Flexbox - Align elements of unknown height vertical inside items。事实证明，使用 Flexbox 是不可能的。

这可以通过CSS Grid布局实现吗？

我正在尝试使用以下设计为自己构建一个 flexbox：

我的 html 看起来像这样（我不想改变它）：

这是 joomla 联系页面的标准布局。我想在不更改 html/php 代码的情况下更改设计。

使用 flexbox 可以吗？

我可以使用@media查询进行right_1-在移动视图right_4下left移动（< 800px 或示例）？

我自己无法让它工作，我总是以right_1-right_4彼此相邻而不是它们堆叠到左侧部分的总高度结束。

当我不知道行数时，是否可以使网格项从第一行跨越到最后一行？

假设我有以下带有未知数量框的 html。

如何.box从第一条网格线到最后一条网格线的第三个跨度？