2026 css自适应实现布局方式

SunnyJingJing2026-03-16 17:32

css布局 grid王者 -> flex布局 -> inline、float布局本文带你过一遍css

1、实现手机1列，平板2列，桌面3列，大屏4列，超大屏6列

<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4"> </el-col>

2、实现大屏3列，小屏1列

grid实现：

flex实现：

3、如果左右固定像素，3列怎么实现大屏3列，小屏1列

grid实现：

flex实现：

css 复制代码

@media (max-width: 767px) {
    //父容器加这一句
    .flex-layout {
        flex-direction: column;
    }
}

.flex-layout{
    display: flex;
}

.left-sidebar, .right-sidebar {
    flex: 0 0 200px;
 }
 .center-content{
    flex: 1;
 }

4、实现经典的 "左侧侧边栏 + 右侧主内容 + 上下固定导航 / 页脚" 布局，代码直观且易维护

css 复制代码

.container {
  display: grid;
  grid-template-rows: 60px 1fr 60px; /* 3 行：header(60px)、main(自适应)、footer(60px) */
  grid-template-columns: 200px 1fr;  /* 2 列：sidebar(200px)、main(自适应) */
  grid-template-areas: 
    "header header"  /* 第 1 行：header 占据 2 列 */
    "sidebar main"   /* 第 2 行：sidebar 占第 1 列，main 占第 2 列 */
    "footer footer"; /* 第 3 行：footer 占据 2 列 */
  gap: 10px;
  height: 100vh; /* 容器高度占满视口，确保 main 区域自适应 */
}
/* 网格项关联区域 */
.header { grid-area: header; background: #f00; }
.sidebar { grid-area: sidebar; background: #0f0; }
.main { grid-area: main; background: #00f; }
.footer { grid-area: footer; background: #ff0; }

5、在大屏幕上显示多列卡片，小屏幕上自动减少列数（如手机端显示 1 列），无需媒体查询即可实现响应式

css 复制代码

.card-container {
  display: grid;
  /* 自动创建列数，每列最小 200px，最大自适应，列间距 20px */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}
.card {
  height: 200px;
  background: #eee;
}

auto-fit：适配宽度时，空列会被折叠，剩余列均分空间（推荐，适配性更好）；
auto-fill：空列不会折叠，仅隐藏，适合需要固定列数的场景；