如何用css实现等宽列布局-css教程-PHP中文网

如何用css实现等宽列布局

P粉602998670

发布： 2025-09-18 10:46:01

原创

788人浏览过

使用Flexbox或Grid可轻松实现等宽列布局。1. Flexbox：容器设display: flex，子元素设flex: 1，平均分配空间；2. Grid：容器设display: grid，grid-template-columns: repeat(n, 1fr)创建n等宽列，gap控制间距。两者均支持响应式，Flexbox兼容性更佳，Grid功能更强，常结合使用于产品展示、表单布局等场景。

如何用css实现等宽列布局

实现等宽列布局最简单有效的方式是使用 CSS 的 Flexbox 或 Grid 布局。下面介绍两种常用方法，都能轻松实现等宽列。

使用 Flexbox 实现等宽列

Flexbox 非常适合创建等宽的响应式列布局。只需将容器设为 flex，子元素自动等宽。

示例代码：

.container {
  display: flex;
}
<p>.column {
flex: 1; /<em> 每列平均分配可用空间 </em>/
padding: 10px;
box-sizing: border-box;
}

登录后复制

说明：

display: flex 启用弹性布局
flex: 1 让每个列占据相等空间
可添加 margin、border 等样式，配合 box-sizing: border-box 避免宽度溢出

使用 CSS Grid 实现等宽列

Grid 布局更现代，适合二维布局，也能简洁地实现等宽列。

立即学习“前端免费学习笔记（深入）”；

序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

查看详情

示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建3个等宽列 */
  gap: 10px; /* 列间距 */
  width: 100%;
}
<p>.column {
padding: 20px;
background-color: #f0f0f0;
}

登录后复制

说明：