利用 CSS Grid 实现栅格系统的详细教程-JavaScript中文网-JavaScript教程资源分享门户

在Web开发中，栅格系统是一种常用的布局方式。利用栅格系统可以灵活地对页面进行布局，同时也可以使页面看起来更加整洁美观。而CSS Grid作为Web开发中常用的布局方式之一，可以实现灵活的栅格系统，让我们在Web页面布局中更加轻松自如。

1. 了解CSS Grid

CSS Grid是CSS3新增的一种布局方式。它通过网格来实现对页面的排版布局，可以非常灵活地进行页面的布局。一个简单的CSS Grid布局如下：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 300px;
}

以上代码设置了一个.container容器，利用CSS Grid实现了三列等宽，分别占据容器宽度的1/3；同时设置了行高分别为100px和300px。我们可以通过CSS Grid中的grid-template-columns和grid-template-rows属性，非常方便地对页面进行布局。

2. 实现栅格系统

2.1 栅格系统介绍

在栅格系统中，常常将整个页面分成12列，并在每一列之间设置固定的间距。利用栅格系统就可以将页面中需要排版的内容按照12列进行排列，从而达到页面的整齐美观。

2.2 栅格系统的HTML结构

我们先来看一下栅格系统的HTML结构，下面是一个简单的栅格系统HTML结构：

// javascriptcn.com 代码示例
<div class="container">
  <div class="row">
    <div class="col-4">内容1</div>
    <div class="col-4">内容2</div>
    <div class="col-4">内容3</div>
  </div>
  <div class="row">
    <div class="col-6">内容4</div>
    <div class="col-6">内容5</div>
  </div>
  <div class="row">
    <div class="col-12">内容6</div>
  </div>
</div>

以上HTML结构中，.container是包裹整个栅格系统的容器；.row表示每行的内容，.col-表示每一列的宽度，数字表示该列所占据的列数（每行总共有12列）。

2.3 利用CSS Grid实现栅格系统

接下来，我们利用CSS Grid来实现上述栅格系统。代码如下：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 16px;
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 16px;
}

.col-4 {
  grid-column: span 4;
}

.col-6 {
  grid-column: span 6;
}

.col-12 {
  grid-column: span 12;
}

以上代码中，.container中的grid-template-columns设置了整个栅格系统的列数为12，宽度均分为1fr，并设置了列之间的间距为16px。.row中也设置了列数为12，宽度均分为1fr，间距为16px。.col-表示不同的宽度，利用grid-column可以指定该列占据的列数。

3. 案例演示

最后，我们来看一个基于CSS Grid的栅格系统演示。HTML结构如下：

// javascriptcn.com 代码示例
<div class="container">
  <div class="row">
    <div class="col-4">内容1</div>
    <div class="col-4">内容2</div>
    <div class="col-4">内容3</div>
  </div>
  <div class="row">
    <div class="col-6">内容4</div>
    <div class="col-6">内容5</div>
  </div>
  <div class="row">
    <div class="col-12">内容6</div>
  </div>
</div>

CSS样式如下：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 16px;
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 16px;
}

.col-4 {
  grid-column: span 4;
  background-color: #ffc300;
}

.col-6 {
  grid-column: span 6;
  background-color: #ff5733;
}

.col-12 {
  grid-column: span 12;
  background-color: #c70039;
}

演示效果如下图所示：

4. 总结

通过本篇文章，我们了解了什么是CSS Grid以及如何利用CSS Grid实现栅格系统。CSS Grid作为一种灵活的布局方式，可以使Web开发中的页面布局更加自由、灵活，同时通过栅格系统实现的页面布局也更加整洁美观。希望本文能够对Web开发者们在项目中利用CSS Grid实现栅格系统有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654772747d4982a6eb1d09ed