css布局grid网格布局应用实例-css教程-PHP中文网

css布局grid网格布局应用实例

P粉602998670

发布： 2025-09-20 12:50:01

原创

214人浏览过

Grid布局适用于二维布局场景，1. 通过grid-template-columns实现左侧固定、右侧自适应的两栏布局；2. 利用repeat(auto-fit, minmax())创建响应式卡片网格，自动调整列数；3. 使用grid-template-areas构建头部、侧边栏、内容区和页脚的经典网页结构，布局清晰；4. Grid天然支持等高列，配合align-items可轻松实现内容垂直居中。这些实例展示了Grid在现代网页布局中的灵活性与强大功能。

css布局grid网格布局应用实例

Grid网格布局是CSS中最强大的布局工具之一，适合处理二维布局（行和列）。通过实际例子能更直观理解它的用法。以下是几个常见的Grid布局应用实例。

1. 基础两栏布局

实现一个左侧固定宽度、右侧自适应的两栏布局。

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左侧200px，右侧占剩余空间 */
  gap: 16px; /* 列间距 */
  height: 100vh;
}
<p>.sidebar {
background-color: #f0f0f0;
padding: 20px;
}</p><p>.main-content {
background-color: #d0e0f0;
padding: 20px;
}</p>

登录后复制

HTML结构：

<div class="container">
  <div class="sidebar">侧边栏</div>
  <div class="main-content">主内容区</div>
</div>

登录后复制

2. 响应式卡片网格

创建一个在不同屏幕尺寸下自动调整列数的卡片布局。

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

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}
<p>.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 20px;
text-align: center;
}</p>

登录后复制

说明： auto-fit配合minmax()让每张卡片最小250px，超出则换行，自动填充可用空间。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

3. 经典网页布局（头部 + 侧边栏 + 内容 + 页脚）

使用grid-template-areas构建清晰的页面结构。

.layout {
  display: grid;
  height: 100vh;
  grid-template-rows: 60px 1fr 40px;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}
<p>.header { grid-area: header; background: #4a90e2; }
.sidebar { grid-area: sidebar; background: #f0f0f0; }
.main { grid-area: main; background: #fff; }
.footer { grid-area: footer; background: #ccc; }</p>

登录后复制

每个区域通过grid-area分配位置，结构一目了然。

4. 等高布局与内容对齐

Grid天然支持等高列，无需额外计算高度。

.equal-height {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  align-items: center; /* 垂直居中内容 */
}
<p>.left-box {
background: #ffeaa7;
padding: 20px;
}</p><p>.right-box {
background: #fab1a0;
padding: 20px;
}</p>

登录后复制

即使左右内容长度不同，两列高度始终保持一致，且内部内容可轻松垂直居中。

基本上就这些常见用法。Grid布局灵活且语义清晰，特别适合复杂界面的搭建。掌握这几个实例后，可以组合出大多数现代网页布局需求。

以上就是css布局grid网格布局应用实例的详细内容，更多请关注php中文网其它相关文章！