CSS Grid 仅设置顶行的列数

Question

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100px repeat(3, 1fr);
}

我希望第一行只有 2 列，这将是我的导航栏、徽标和导航链接，但似乎无法找出可能导致我搜索错误内容的原因。

Answer 1

在您的子元素上使用grid-column

在您的网格子元素（例如您的导航栏）上，您可以使用grid-column 属性。您可以为希望放置孩子的位置设置开始值和结束值。

例如：

.navbar {
  grid-column: 1 / 7;
}

下一级：使用grid-areas 标记您的子元素

您可能还想考虑查看grid-areas，这是标记和引用标题和导航栏等区域的好方法。

参考资料：

• MDN: grid-column
• MDN: grid areas