使用框架时样式冲突导致的 CSS 网格布局问题

Question

我正在试验一个名为 pico.css 的 CSS 框架。我已经开始使用单独的自定义样式表设计布局，该样式表覆盖了 pico 样式表提供的一些默认样式。

我在自定义样式表中创建了一个网格容器来布局元素，如下所示：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 200px);
    grid-column-gap: var(--grid-spacing-horizontal);
    grid-row-gap: var(--grid-spacing-vertical);
    grid-template-areas:
        "image text  text"
        "image name  name"
        "image email email"
        "image phone phone"
        "image pass  pass"
        "image btn   btn";
}

孩子们适用以下规则：

/* image */
.grid-item-1 {
    grid-area: image;
}

/* text */
.grid-item-2 {
    grid-area: text;
}

/* first and last name */
.grid-item-3 {
    grid-area: name;
}

/* email and phone */
.grid-item-4 {
    grid-area: email;
}

/* passwords */
.grid-item-5 {
    grid-area: pass;
}

/* submit button */
.grid-item-6 {
    grid-area: btn;
}

问题

布局未按预期显示，我在调试导致它的原因时遇到问题。我相信主 pico.slim.css 样式表中存在一些相互冲突的样式，但我不确定要更改什么。这是我要实现的布局：

例子

为清楚起见，请参阅此 Codepen 链接，它显示了我描述的当前布局问题。在评论下方

/* CUSTOM CSS */

的底部是我应用的其他 css 样式。

我试过的

我玩过

grid-template-rows: repeat(6, 1fr);

成为

grid-template-rows: repeat(6, 200px);

这有助于将元素定位到更靠近

grid-item-1

但是

.grid-item-2

的高度将其余元素推到页面下方太远。此外，似乎以下所有元素都被放置在

.grid-item-3

中，而不是遵循我的自定义CSS中定义的网格结构。

我已经尝试删除 pico.css 提供的

container

类样式，但没有任何改进。

我尝试用 !important 标记 CSS 的各个部分，但无法使用此方法进行纠正。

我一直在查看 Firefox devtools 中的代码，试图发现哪种样式存在冲突，但我无法看到导致问题的原因。从昨天开始就一直卡在这个问题上，感觉自己已经到了无法自己解决这个问题的地步

Answer 1

导致问题的不是框架。

预期的网格项不是网格项。

尽管

grid-item-1

（图像）和

grid-item-2 

（文本）是网格项——因为它们是网格容器的子项——其他“网格项”（3、4、5 和 6）是 not 网格项，因为它们是

form

元素的子元素（

form

是网格项）。

重要的是要记住，网格格式化上下文的范围仅限于父子关系。

这意味着网格容器始终是父级，而网格项始终是子级。网格属性仅在这种关系中起作用。

子级之外的网格容器的后代不是网格布局的一部分，不会接受网格属性。

这里有完整的解释：

• 网格属性不适用于网格容器内的元素

此规则的一个例外是

display: contents

，它使网格容器的后代（子级之外）能够接受网格容器的命令。但是，目前此功能浏览器支持度低。

display: subgrid

是目前正在考虑但不可用的另一个功能。

看这里：

• 是否有“子网格”功能，用于定位网格容器的“孙子”？
• 什么是 css 子网格的替代品？

定义高度。

容器上没有设置高度

因此，高度是不确定的，这会导致溢出。

这就是为什么您在

grid-template-rows: repeat(6, 200px)

的尝试帮助了这种情况。

保留原来的

grid-template-rows: repeat(6, 1fr)

并在

height: 100vh

中添加

.grid-container

.