整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
网站的布局是一个网站设计的根本，CSS的Grid布局已经成为了未来网站布局的基本方式。
今天这篇文章我们通过图文，一起看看如何自己实现Grid布局方式。
CSS
首先我们看看最基本的Grid布局是什么样的，HTML页面的代码如下所示。
HTML代码
然后设置其CSS属性，这里主要展示容器的CSS属性，给子元素添加的color属性就不在这里展示了。
CSS属性
在页面上看到的效果如下，目前因为没有对子div元素做任何设置，会自动将子div沿垂直方向排列。
页面效果
为了让外层的div(wrapper)为一个网格容器，需要设置其行数和列数，就像一个表格一样。
此时就需要用到grid-template-columns和grid-template-rows两个属性值。
grid-template-columns
用于设置网格容器的列属性，其实就相当于列的宽度。当我们需要几列展示时，就设置几个值，这个属性可以接收具体数值比如100px，也可以接收百分比值，表示占据容器的宽度。
需要注意的是：当给容器设定了宽度时，grid-template-columns设定的百分比值是以容器的宽度值为基础计算的。如果未设置宽度时，会一直向上追溯到设置了宽度的父容器，直到body元素。
比如我们设置了以下的CSS属性。
CSS属性
可以看出三列宽度加起来的百分比值为120%，而且wrapper容器并未设置宽度，会一直向上追溯到body元素，这样三列的总宽度已经超过了body的宽度，因此会出现滚动条。
页面效果
grid-template-rows
用于设置网格容器的行属性，其实就相当于行的高度，其特性与grid-template-columns属性类似。
下面简单修改grid-template-columns和grid-template-rows两个属性的值。
CSS值
得到的效果图如下所示。
效果图
接下来我们看看别的情况，通过CSS属性设置3*3的网格。
CSS属性
在页面上的呈现方式如下所示。
页面呈现
从页面上看我们看不出有什么问题，但是打开控制台后可以发现，这个网格已经占据了3*3的空间。它后面的元素只能排列在所有的网格后面。
页面实际情况
当我们需要得到特殊的排列方式，比如占满整行，占满整列，二三行合并等等。
这就需要用到grid-column和grid-row属性，表示行网线和列网线的序号。通过设置start和end值，来进行网格的合并。
网线序号
我们重新给wrapper容器内部的div添加class类。
HTML代码
然后添加以下的CSS代码，给不同的网格特定的行号和列号。
CSS代码
最终得到的效果图如下所示。
页面效果图
今天这篇文章介绍了CSS中Grid布局的基础知识，应该可以很快掌握，其他的复杂点的网格布局大家也可以自己去尝试。
CSS Grid Generator是一个由Sarah Drasner创建的免费工具。它是一个可视化设计工具，允许咱们创建一个基本的 grid 布局，然后就可以使用生成对应的代码，帮助咱们快速布局。
第一次进入是界面是这样子的：
当我正在学习一些东西时，我发现最好的学习方法是使用现有的工具构建实用的东西。 在本文中，咱们先从一个简单的布局开始，然后使用CSS Grid Generator创建在实际项目中使用所需的代码。
首先从一个典型的布局开始，如下所示：
接着在 CSS Grid Generator 界面的右侧更新对应的以下内容：
间距让咱们的内容之间有一定的空白。可以只使用列间距，但我想在 Header 和 Footer 之前留出一些空白，所以还同时使用行间距。
接下来，就是需要定义应用程序的不同区域。在 CSS Grid Generator 中，可以单击并拖动到需要合并地方来创建一个区域。咱们希望Footer跨越整个网格，侧边栏占用一个单元格，主内容区域跨越2列，Footer 跨越4列,最终效果，如下：
这看起来有点像咱们想要的布局，但仍然需要定义一些具体的尺寸。 在CSS Grid Generator 会注意到每行和每列旁边都有一个输入框，可用于设置特定大小。
这看起来更像更像咱们想要的布局，但是你可能会问1fr是多少。
轨道可以用任何长度单位来定义。Grid还引入了一个额外的长度单位，以帮助各位创建灵活的Grid轨道。新的fr单元表示网格容器中可用空间的一小部分。
第二行的1fr会告诉区域占用剩余的可用空间。如果将容器设置为100vh，就会占据整个页面的内容，列也是如此。
点击“请给我示例中的代码”就可以查看对应布局生成的 CSS 代码：
创建一个simple-layout.htm并添加以下代码：
接下来添加上面生成的 CSS:
接着添加对应的标签：
最后添加下面的CSS，它将为.div1 - .div5添加一些背景色：
div:not(.parent) {
padding: 10px;
background-color: rgb(199, 199, 199);
}运行：
这看起来很好，但你希望它占据整个浏览器窗口。所以需要向.parent类添加height: 100vh：
.parent {
display: grid;
grid-template-columns: 200px 1fr 1fr 200px;
grid-template-rows: 100px 1fr 50px;
grid-column-gap: 20px;
grid-row-gap: 20px;
height: 100vh;
}最终效果：
两个相邻的网络线之间为网络轨道。
图中的同方向 1 和 2， 2 和 3 都是相邻的网络线，当然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相邻的网络线。
相邻的网络线为网格轨道，如下，黑色1 和 2 之间就构成了网络轨道(背景深橘色)：
上面总共有 5 个网络轨道，水平方向灰色 1 和 2， 2 和 3， 3 和 4，竖直方向黑色的 1 和 2， 2 和 3，共 5 个。
两个相邻的列网络线和两个相邻的行网络线组成的就是网络单元，如下面的深橘色背景就是网络单元。
网络单元要与网络项(项目)区别开来，网络项是 Html 中可以找的到 Dom 元素，网络单元是在定义容器的时候，它就会分割出来的一个一个单元格。
四个网络线包围的总空间。
剩余空间分配数，用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。
【CSS Grid入门】看这一篇就够了：从零开始掌握网格布局艺术
### 引言
CSS Grid布局是近年来CSS领域的一项重大革新，它为Web开发者提供了一种强大、灵活且直观的方式来创建二维网格布局，彻底改变了我们构建网页布局的方式。本文将带你从零开始学习CSS Grid，通过一系列详细的示例和代码，让你一次性掌握这项革命性的布局技术。
### 一、CSS Grid基础概念
**1.1 容器与网格项**
- **grid container**：通过将display属性设置为grid或inline-grid，将一个元素变为网格容器。
```html
<div class="grid-container">
<!-- 网格项 -->
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<!-- 更多网格项... -->
</div>
<style>
.grid-container {
display: grid;
/* 其他Grid属性 */
}
</style>
```
**1.2 网格线与网格单元格**
- **grid lines**：网格线是网格布局中的分界线，分为行(grid-row)和列(grid-column)。
- **grid cells**：相邻的行和列网格线之间的区域称为网格单元格。
### 二、CSS Grid布局属性详解
**2.1 网格模板定义**
- `grid-template-columns` 和 `grid-template-rows`：定义每一行和每一列的大小。
```css
.grid-container {
grid-template-columns: repeat(3, 1fr); /* 3等份 */
grid-template-rows: auto 1fr; /* 第一行自适应，第二行填满剩余空间 */
}
```
**2.2 网格区域命名与定位**
- `grid-template-areas`：为每个网格项指定区域名称并布局。
```css
.grid-container {
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
```
**2.3 网格项目的定位**
- `grid-column` 和 `grid-row`：直接指定网格项目的起始和结束网格线。
```css
.item-a {
grid-column: 1 / 3; /* 从第一列到第三列 */
grid-row: 2 / 4; /* 从第二行到第四行 */
}
```
### 三、CSS Grid进阶特性
**3.1 自动布局：fr单位与auto-fill/auto-fit**
```css
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 根据窗口大小自动填充列 */
}
```
**3.2 对齐与间距**
- `justify-items`、`align-items`、`justify-content`、`align-content`：控制网格项目和行/列的对齐方式。
```css
.grid-container {
justify-items: center; /* 横向居中 */
align-items: start; /* 纵向顶部对齐 */
justify-content: space-between; /* 行间间距均匀分布 */
}
```
**3.3 动态网格：响应式布局**
根据不同的断点调整网格布局，实现响应式设计。
```css
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* 在小屏幕下变为单列布局 */
}
}
```
### 四、实战案例：使用CSS Grid构建常见布局
**4.1 两栏布局**
```html
<div class="grid-container">
<div class="sidebar">侧边栏</div>
<div class="main">主要内容区</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
}
</style>
```
**4.2 复杂网格布局（例如，杂志布局）**
此处提供一个复杂的网格布局示例，通过CSS Grid实现类似杂志布局的复杂排版。
```html
<!-- 省略布局HTML代码 -->
```
### 结语
通过这篇全面的CSS Grid入门教程，你已掌握了网格布局的基本要素与实用技巧。然而，CSS Grid的奥妙远不止于此，它的强大之处在于其无比灵活和自由的布局能力。继续深入研究和实践，你将在项目中发现更多的可能性，使你的Web设计变得更加优雅、高效。祝你在CSS Grid的道路上越走越远，享受到它带来的便利与乐趣！
*请认真填写需求信息，我们会在24小时内与您取得联系。
