网格列和行无法正确对齐答案

【问题标题】：Grid columns and rows failing to align properly网格列和行无法正确对齐
【发布时间】：2025-12-20 13:45:11
【问题描述】：

我是 CSS 新手，我一直在尝试使用 CSS 网格构建一个非常简单的布局。

我画了一个草图：

所以在阅读了css-tricks 中的很好的解释 之后，我开始编写代码，但由于某种原因，这些行没有像我预期的那样正确放置（我在codepen 上的代码）。

grid-template-rows: 5em 50vh 100vh 30vh;
grid-template-columns: 0.15% 0.3% 0.4 0.15%;

grid-template-areas: "logo search-bar menu . "
                        "description description description nav-bar"
                        "main main main . "
                        "footer footer footer footer";

有人可以解释并帮助我如何正确地做到这一点吗？

提前谢谢大家，寻求帮助。

【问题讨论】：

链接失效了，需要把它周围的`去掉。此外，您还需要在 * 上提供代码，否则编辑器将不允许仅链接到代码。
谢谢您，解决了您提到的问题！
grid-template-columns: 0.15% 0.3% 0.4 0.15%; 在0.4 之后缺少一个单位 .. 你不认为它们的价值很小吗？总需要是 100% 而不是 1%
谢谢你，我的错，修复它：grid-template-columns: 15% 30% 40% 15%;但是为什么“导航链接”（图标）没有位于正确的位置（如草图中所述）？

标签： html css grid css-grid

【解决方案1】：

首先，您在列值中缺少百分比单位：

grid-template-columns: 0.15% 0.3% 0.4 0.15%

这会使整个规则无效。

第二，grid-area property values don't use quotes.

这是无效的：grid-area: "logo"。

只是grid-area: logo。

第三，您的导航链接不合适，因为您的 HTML-CSS 不匹配：

<nav class="navigation-icon-links">navigation-links</nav>

.navigation-links {
    grid-area: nav-bar;
    background:orange;
}

revised codepen

【讨论】：