大家好，我是前端君呀！今天我们来聊聊 CSS Grid 布局——号称是最强大的的 CSS 布局方案。
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。与传统的 Flexbox 布局不同，Grid是一种二维布局方式，它允许你同时在水平和垂直方向上进行布局，从而创建复杂的页面布局。本文将带你从基础到进阶，逐步掌握 CSS Grid 布局的使用方法。
Grid 布局基础概念
容器与项目
容器（Grid Container）：应用了 display: grid或display: inline-grid属性的元素。项目（Grid Items）：容器内的直接子元素。
行与列
行（Row）：垂直方向上的线。 列（Column）：水平方向上的线。
网格轨道（Tracks）
行轨道（Row Track）：两个相邻行之间的空间。 列轨道（Column Track）：两个相邻列之间的空间。
网格区域（Area）
由一个或多个单元格组成的矩形区域。
网格单元（Cell）
行轨道和列轨道交叉形成的最小单位。
网格线（Line）
划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 根水平网格线。比如上图示例中就有 4 根垂直网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。当然也可以从右到左，从下到上，按照 -1，-2，-3...顺序进行编号排序。
创建一个简单的 Grid 容器
首先，我们来看一个简单的例子，创建一个基本的 Grid 容器。
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
grid-template-rows: auto; /* 自动高度 */
gap: 10px; /* 格子间距 */
width: 100%;
height: 300px;
background-color: #f0f0f0;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
在这个例子中，.grid-container 是一个 Grid 容器，包含六个 .grid-item 子元素。通过设置 grid-template-columns: repeat(3, 1fr)，我们将容器分为三列等宽的轨道。gap: 10px 设置了网格项之间的间距。
最终的显示结果如下：
定义行和列
我们可以更精细地控制行和列的大小。以下是一个示例：
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 第一列和第三列占1份，第二列占2份 */
grid-template-rows: 100px 200px; /* 第一行高100px，第二行高200px */
gap: 10px;
width: 100%;
height: 300px;
background-color: #f0f0f0;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
在这个例子中，我们设置了不同的列宽比例 (1fr 2fr 1fr) 和固定的行高 (100px 200px)。
最终的显示结果如下：
行和列的命名
你可以为行和列命名，以便更方便地引用它们。以下是一个示例：
<style>
.grid-container {
display: grid;
grid-template-columns: [col-start] 1fr [col-end] 1fr [col-end];
grid-template-rows: [row-start] 100px [row-end] 200px [row-end];
gap: 10px;
width: 100%;
height: 300px;
background-color: #f0f0f0;
}
.item-a {
grid-column: col-start / col-end;
grid-row: row-start / row-end;
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
.item-b {
grid-column: col-end / -1;
grid-row: row-end / -1;
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="item-a">Item A</div>
<div class="item-b">Item B</div>
</div>
在这个例子中，我们为列和行命名，并使用这些名称来定位网格项。
显示结果如下：
使用 auto-fit 和 auto-fill
auto-fit 和 auto-fill 可以根据可用空间自动调整网格项的数量。
auto-fill 会尽可能多地填充网格项，即使有些网格项没有内容也会显示空位。
下面是一个例子：
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
width: 100%;
height: 300px;
background-color: #f0f0f0;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
结果如下图所示：
auto-fit 类似于 auto-fill，但它会在没有足够空间容纳所有网格项时收缩网格项的大小。
下面同样是一个例子：
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
width: 100%;
height: 300px;
background-color: #f0f0f0;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
结果如下图所示：
对齐和分布
我们可以使用多种属性来对齐和分布网格项。
内容对齐
justify-items: 水平对齐网格项的内容。align-items: 垂直对齐网格项的内容。place-items: 同时设置水平和垂直对齐。
网格项对齐
justify-content: 水平对齐整个网格。align-content: 垂直对齐整个网格。place-content: 同时设置水平和垂直对齐。
这里有一个例子供大家参考：
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
width: 100%;
height: 300px;
background-color: #f0f0f0;
justify-items: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
在这个例子中，我们使用 justify-items 和 align-items 将网格项的内容水平和垂直居中。
显示效果如下图所示：
使用区域（Areas）
我们可以通过命名区域来创建复杂的布局。
下面是一个例子：
<style>
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-gap: 10px;
width: 100%;
height: 300px;
background-color: #f0f0f0;
}
.header {
grid-area: header;
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #FFC107;
color: white;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #9C27B0;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
在这个例子中，我们使用 grid-template-areas 来定义布局结构，并通过 grid-area 属性将各个部分放置在相应的区域。
显示效果如下图所示：
（本文完）
相关阅读
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
