Html 列与css网格并排

我在理解CSS网格如何工作时遇到了一个问题

我希望3列并排排列，具有特定的宽度和高度，但每列之间有一个间隙

.grid容器{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：1fr；
栅柱间隙：0px；
}
.左{
网格柱：1；
边框：1px纯红；
高度：500px；
宽度：300px；
}
.中{
网格柱：2；
边框：1px纯红；
高度：500px；
宽度：300px；
}
.对{
网格柱：3；
边框：1px纯红；
高度：500px；
宽度：300px；
}

1.
2.
3.

您只需在

网格模板列

属性中指定所需的宽度即可。列之间没有可见的间隙

如果需要红色边框，可以为这些div指定一个公共类，只需执行一次即可

.grid容器{
显示：网格；
网格模板列：300px 300px 300px；
网格模板行：1fr；
列间距：0；
高度：500px；
}
.左{
边框：1px纯红；
}
.中{
边框：1px纯红；
}
.对{
边框：1px纯红；
}

1.
2.
3.

指定网格父元素上的宽度，删除子元素上的任何静态宽度。在

网格模板列中设置分数：1fr 1fr 1fr每列将占据父级宽度的三分之一。因此，如果您的父级设置为80 view width=>80%的视图端口，那么您的列将分布在每个视图端口宽度的三分之一以上

如果将4个项目分别设置为1fr，则它们将占25%，5个将占20%，基本上=>子元素的数量/父元素宽度


.grid容器{
保证金：自动；
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：1fr；
网格柱间距：0；
宽度：80vw；
}
.左>左{
身高：80%；
背景：粉红色；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：项目之间的间距；
}
.左{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
边框：1px纯红；
网格柱：1；
}
.中{
填充物：5px；
网格柱：2；
边框：红色实心1px；
}
.中跨{
显示器：flex；
弯曲方向：立柱；
证明内容：开始；
填充物：5px；
网格柱：2；
背景：浅蓝色；
边框底部：1px纯黑；
}
.对{
网格柱：3；
边框：1px纯红；
填充：.2rem；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
}
.行{
填充：0 1rem；
显示器：flex；
证明内容：之间的空间；
对齐项目：开始；
背景：#EEE；
}
.右分区：第n个类型（2）{
颜色：#A2A2；
文本对齐：居中；
}

下面是第1列的一些内容和列表项


显示器：flex


弯曲方向：柱


调整内容：周围的空间


对齐项目：flex start


这是在一个span标记中
父项具有列的弯曲方向
在开始时调整内容集
这是第2列的span标记“更多内容”中的内容。它比第一个文本内容稍长。Lorem ipsum dolor sit amet，是一位杰出的献身者。枕侧前庭。南康塞克特梅特斯和库斯鲁斯拍卖行。
暂时性特发性斜纹夜蛾。塞德·维塔·奥奇。
一行
空间
之间
父对象弯曲方向和显示弯曲和列
将“内容”设置为“周围空白”
好的ole文本对齐：居中。。。枕侧前庭。南康塞克特梅特斯和库斯鲁斯拍卖行。暂时性特发性斜纹夜蛾。
列之间没有间隙…删除所有宽度属性和所有网格列属性，然后为containerCSS网格设置固定宽度不像典型布局，网格列/行与放置在其中的元素是分开的，请将其视为无法直接访问的不可见元素。正如Temani所说，不要为列宽指定任何长度，请使用
网格模板列指定分数增量：1fr，1fr，1fr
，然后这些列将自动展开。3个元素将为33%+33%+33%，以构成父元素的100%宽度。4将是25%，5将是20%，依此类推…谢谢！现在我尝试使用flexbox垂直居中列，但它不适用于网格。有什么建议吗？你是想把内容放在列或主网格显示的中心吗？我在子对象及其子对象上添加了一些flex属性，以向你展示一些示例。此外，主
网格容器
内容设置为
边距：0自动
以使其在页面上居中。最好是整页查看，以获得想法。在“flex方向”设置为“column”的“display flex”上，您的“justify”内容将垂直居中