Html 网格项按行排列，但应为列

我正在使用

display:grid

尝试一些非常基本的网格。我有一个简单的网格，有一行，分为6列。在HTML中，我有一个包含网格的div，然后是6个包含6个项目的嵌套div，它们应该在6列中显示一行

然而，相反，它们堆叠在一起——为什么

这是运行时的外观：

.gridnav{
显示：网格；
/*列与单元格之间的间隙*/
栅柱间隙：15px；
网格行间距：2px；
/*左右边缘的填充*/
填充：0px 10px 0px；
/*垂直和水平居中放置项目*/
对齐项目：居中；
网格模板柱：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
网格模板区域：“1 2 3 4 5 6”；
}
.navitem1{网格区域：1；}
.navitem2{网格区域：2；}
.navitem3{网格区域：3；}
.navitem4{网格区域：4；}
.navitem5{网格区域：5；}
.navitem6{网格区域：6；}

1.
2.
3.
4.
5.
6.

网格模板区域似乎不能命名为整数。将它们更改为

a

、

b

、

c

等，可以使其正常工作

.gridnav{
显示：网格；
/*列与单元格之间的间隙*/
栅柱间隙：15px；
网格行间距：2px；
/*左右边缘的填充*/
填充：0px 10px 0px；
/*垂直和水平居中放置项目*/
对齐项目：居中；
网格模板柱：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr；
网格模板区域：“a b c d e f”；
}
.navitem1{网格区域：a；}
.navitem2{网格区域：b；}
.navitem3{网格区域：c；}
.navitem4{网格区域：d；}
.navitem5{网格区域：e；}
.navitem6{网格区域：f；}

1.
2.
3.
4.
5.
6.

我有一个简单的网格，有一行，分为6列

事实上，你的情况正好相反。您有一个包含一列的网格，分为6行

网格区域

属性是一个速记属性。它分解如下：

grid-row-start
grid-column-start
grid-row-end
grid-column-end

.navitem1 { grid-area: a; }

因此，您的代码：

.navitem1 { grid-area: 1; }
.navitem2 { grid-area: 2; }
.navitem3 { grid-area: 3; }
.navitem4 { grid-area: 4; }
.navitem5 { grid-area: 5; }
.navitem6 { grid-area: 6; }

相当于：

.navitem1 { 
   grid-row-start: 1;
   grid-column-start: auto;
   grid-row-end: auto;
   grid-column-end: auto;
}

.navitem2 { 
   grid-row-start: 2;
   grid-column-start: auto;
   grid-row-end: auto;
   grid-column-end: auto;
}

...

下面是真正发生的事情：

容器中的这个规则正是您所期望的

grid-template-areas: '1 2 3 4 5 6'

但是，

网格区域

规则将覆盖

网格模板区域

。以上是Chrome开发工具中的外观

正如您所看到的，这些项目最初排列在一行六列中（正如您所期望的）。但最终，所有项目在一列中排列在六行上（因为

网格区域

覆盖）

但是，如果使用非整数值，如下所示：

grid-row-start
grid-column-start
grid-row-end
grid-column-end

.navitem1 { grid-area: a; }

这将转化为：

.navitem1 { 
   grid-row-start: a;
   grid-column-start: a;
   grid-row-end: a;
   grid-column-end: a;
}

。。。由于

网格模板区域

和

网格区域

的值是完全对齐的，因此这将符合您的目的

---

.

解决方案无需编写这么多行代码即可实现。您不需要使用

网格模板区域

，除非您想切换div位置。让我带你快速找到解决方案

.gridnav {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr; /* Optional */
  grid-template-columns: repeat(6,1fr);
  grid-column-gap: 15px;
  grid-row-gap: 2px;
  align-items: center;  
}


.gridnav div {
  border: 2px solid red;
  text-align: center;
}

首先，为父容器定义一些宽度。在您的例子中，它是带有class

.gridnav

的

div

。因为您已经将此部分定义为网格，所以我将首先定义行和列。因为您不需要很多行，只需要一行，所以不定义行是可以的

对于列，可以有

1fr 1fr 1fr 1fr 1fr 1fr但我会将代码简化为
网格模板列：重复（6,1fr）

进一步的风格，你可以有你想要的。如果您对此有任何进一步的问题，请告诉我

有关更多详细信息，您始终可以访问以下两个链接：



希望你能从中找到答案。您可以看到代码在这里工作：点击运行代码片段按钮


.gridnav{
宽度：90%；
保证金：0自动；
显示：网格；
网格模板行：1fr；/*可选*/
网格模板列：重复（6,1fr）；
栅柱间隙：15px；
网格行间距：2px；
对齐项目：居中；
}
.gridnav分区{
边框：2倍纯红；
文本对齐：居中；
}

1.
2.
3.
4.
5.
6.
网格区域
值可以是整数。它不起作用还有另一个原因。但你是对的，改成非整数值才是解决办法。@MichaelBenjamin你是对的，很好。这是个好办法。然而，对于简单的问题，我发现您的解决方案更复杂。请检查一下这件，告诉我是否更合适@液体木炭，我的答案并不是要对布局进行整体解决。这是对行为的一种解释，这就是问题所问的（“为什么？”）。我没有关注OP更广泛的布局目标。啊，我听到了。不过，我喜欢你详细阐述解决方案的方式。谢谢：）嗨，谢谢你-我很晚才意识到给区域标识符A、B、C等可以解决问题。再次感谢你，德莫特