HTML/CSS新手如何实现6个元素的三列div布局

用CSS Grid可以最简便实现你要的布局，完整代码如下：

完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>三列布局示例</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 父容器布局设置 */
.layout-container {
  display: grid;
  /* 三列等宽 */
  grid-template-columns: repeat(3, 1fr);
  /* 行列间距，可自行调整数值 */
  gap: 20px;
  width: 90%;
  max-width: 1200px;
  margin: 30px auto;
}
/* 子元素样式，可根据需求修改背景、高度等 */
.layout-item {
  height: 180px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  /* 文字居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #333;
}
/* 移动端适配可选：小屏幕下改为单列 */
@media (max-width: 768px) {
  .layout-container {
    grid-template-columns: 1fr;
  }
}
</style>
</head>
<body>
  <div class="layout-container">
    <div class="layout-item">1</div>
    <div class="layout-item">2</div>
    <div class="layout-item">3</div>
    <div class="layout-item">4</div>
    <div class="layout-item">5</div>
    <div class="layout-item">6</div>
  </div>
</body>
</html>

核心逻辑说明 #

• 父容器开启display: grid进入网格布局模式
• grid-template-columns: repeat(3, 1fr)表示将父容器可用宽度平均分为3份，每列占1份，自动实现等宽三列
• gap属性同时设置行和列的间距，不需要额外计算子元素的边距偏移
  如果偏好Flex布局也可以实现，父容器设置display: flex; flex-wrap: wrap; gap: 20px，子元素设置width: calc(33.333% - 14px)即可，整体写法比Grid稍繁琐。

内容的提问来源于stack exchange，提问作者judy