如何在HTML5中创建一个相当大的网格布局

我想创建一个6×x的网格。柱与外部容器（即主体本身）的宽度保持一致和尺寸。每行内的高度应一致，并随单元格内容的变化而变化

以下是我到目前为止的情况：

正文{
文本对齐：居中；
}
.项目{
填充：20px；
边缘底部：10px；
文本对齐：左对齐；
显示：块；
字体大小：0.75em；
}
.行{
利润率：10px；
显示：块；
边缘底部：25px；
框大小：边框框；
边框：纯蓝1px；
高度：100px；
}
.路政署{
边际：0px；
填充：0px；
框大小：边框框；
浮动：左；
身高：100%；
宽度：16.667%
}
.a排{
文本对齐：居中；
保证金：5px；
填充：20px；
}
.a排*{
显示：块；
}
.row img{
宽度：100%；
显示：内联块；
}

应用面板-底部左侧
应用面板-底座右侧
底座-3个抽屉堆叠，带应用门
底座-3个抽屉堆栈
底座-4个抽屉堆叠，带应用门
底座-4个抽屉堆栈
应用面板-底部左侧
应用面板-底座右侧
底座-3个抽屉堆叠，带应用门
底座-3个抽屉堆栈
底座-4个抽屉堆叠，带应用门
底座-4个抽屉堆栈
应用面板-底部左侧
应用面板-底座右侧
底座-3个抽屉堆叠，带应用门
底座-3个抽屉堆栈
底座-4个抽屉堆叠，带应用门
底座-4个抽屉堆栈

这是由浮动元素的所有子元素引起的。最简单的修复方法是设置

溢出：隐藏.row

上编码>并去掉设置的高度

这被称为“清除浮动”。可在此处找到更多方法：

正文{
文本对齐：居中；
}
.项目{
填充：20px；
边缘底部：10px；
文本对齐：左对齐；
显示：块；
字体大小：0.75em；
}
.行{
利润率：10px；
显示：块；
边缘底部：25px；
边框：纯蓝1px；
溢出：隐藏；
}
.路政署{
边际：0px；
填充：0px；
框大小：边框框；
浮动：左；
身高：100%；
宽度：16.667%
}
.a排{
文本对齐：居中；
保证金：5px；
填充：20px；
}
.a排*{
显示：块；
}
.row img{
宽度：100%；
显示：内联块；
}

应用面板-底部左侧
应用面板-底座右侧
底座-3个抽屉堆叠，带应用门
底座-3个抽屉堆栈
底座-4个抽屉堆叠，带应用门
底座-4个抽屉堆栈
应用面板-底部左侧
应用面板-底座右侧
底座-3个抽屉堆叠，带应用门
底座-3个抽屉堆栈
底座-4个抽屉堆叠，带应用门
底座-4个抽屉堆栈
应用面板-底部左侧
应用面板-底座右侧
底座-3个抽屉堆叠，带应用门
底座-3个抽屉堆栈
底座-4个抽屉堆叠，带应用门
底座-4个抽屉堆栈

您可以像这样使用display:flex：

.row {
    margin: 10px;
    display: flex;
    margin-bottom: 25px;
    border: solid blue 1px;
    height: auto;
}

.row > div {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    flex: 0 0 16.667%;
    height: auto;
}

检查更新的小提琴：