首页 > 文章 > 前端

CSSGrid布局入门与实战指南

时间：2025-10-06 13:36:52 284浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《CSS Grid布局实战教程》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

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，超出则换行，自动填充可用空间。

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布局灵活且语义清晰，特别适合复杂界面的搭建。掌握这几个实例后，可以组合出大多数现代网页布局需求。

理论要掌握，实操不能落！以上关于《CSSGrid布局入门与实战指南》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！

响应式布局 grid-template-columns CSSGrid布局 grid-template-areas 等高列