CSS Grid：快速启动，基础使用-JavaScript中文网-JavaScript教程资源分享门户

什么是 CSS Grid？

CSS Grid 是一种二维网格布局系统，它可以帮助我们快速地创建复杂的布局。它不仅可以控制行和列，还可以控制它们之间的间隔、对齐方式等等。CSS Grid 拥有非常强大的功能，可以让我们更加灵活地布局页面，而且它的学习曲线相对来说比较平缓。

快速启动

要使用 CSS Grid，我们需要在容器上设置 display: grid 属性，然后在容器内设置网格行和网格列。下面是一个简单的例子：

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

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

上面的代码中，我们设置了一个容器 .container，它包含了六个子元素，我们设置了三列，每列的宽度都是 1fr，两行，每行的高度都是 100px，两个元素之间的间隔是 10px。

基础使用

网格行和网格列

我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格行和网格列的大小和数量。这两个属性都可以接受一个值或多个值，每个值表示一个网格线。网格线是网格中的一个虚拟线条，它可以是一个像素值、一个百分比值、一个关键字值或一个 fr 值。下面是一些例子：

// www.javascriptcn.com code example
/* 单个值 */
.container {
  grid-template-columns: 100px;
  grid-template-rows: 100px;
}

/* 多个值 */
.container {
  grid-template-columns: 100px 1fr 2fr;
  grid-template-rows: 100px 1fr 2fr;
}

/* 关键字值 */
.container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

/* fr 值 */
.container {
  grid-template-columns: 1fr 2fr 3fr;
  grid-template-rows: 1fr 2fr 3fr;
}

网格行和网格列的间隔

我们可以使用 grid-gap 属性来定义网格行和网格列之间的间隔。这个属性可以接受一个值或两个值，第一个值表示行间距，第二个值表示列间距。下面是一些例子：

// www.javascriptcn.com code example
/* 单个值 */
.container {
  grid-gap: 10px;
}

/* 多个值 */
.container {
  grid-gap: 10px 20px;
}

网格区域

我们可以使用 grid-template-areas 属性来定义网格区域。网格区域是一个由多个网格单元组成的区域，每个网格单元可以是一个或多个网格单元格。下面是一个例子：

// www.javascriptcn.com code example
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  grid-template-areas:
    "header header header"
    "main aside aside";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: main;
}

.item3 {
  grid-area: aside;
}

上面的代码中，我们定义了一个由两行三列组成的网格区域，每个网格单元格的大小是 1fr，两个元素之间的间隔是 10px。我们使用 grid-template-areas 属性来定义网格区域的布局，第一个参数表示第一行，第二个参数表示第二行，以此类推。我们还使用 grid-area 属性来指定每个元素所在的网格区域。

深入学习

网格项的排列顺序

我们可以使用 order 属性来指定网格项的排列顺序。这个属性接受一个整数值，值越小，越靠前。下面是一个例子：

// www.javascriptcn.com code example
.item1 {
  order: 1;
}

.item2 {
  order: 2;
}

.item3 {
  order: 3;
}

网格项的对齐方式

我们可以使用 justify-items 和 align-items 属性来指定网格项的水平和垂直对齐方式。这两个属性都可以接受一个关键字值或一个长度值。关键字值包括 start、end、center、stretch 和 baseline，分别表示左对齐、右对齐、居中对齐、拉伸对齐和基线对齐。下面是一个例子：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  justify-items: center;
  align-items: center;
}

网格项的自适应大小

我们可以使用 grid-auto-rows 和 grid-auto-columns 属性来指定网格项的自适应大小。这两个属性都可以接受一个值或多个值，每个值表示一个网格线。下面是一个例子：

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

网格项的命名

我们可以使用 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性来指定网格项所在的网格单元格。这四个属性都可以接受一个整数值或一个关键字值。关键字值包括 span 和 auto，分别表示跨越多个网格单元格和自动计算跨越的网格单元格数。下面是一个例子：

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

响应式布局

我们可以使用媒体查询来实现响应式布局。下面是一个例子：

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

上面的代码中，我们使用媒体查询来判断屏幕宽度是否小于 768px，如果是，我们将网格布局改为单列布局。

指导意义

CSS Grid 是一个非常强大的工具，它可以帮助我们快速地创建复杂的布局。但是，在使用 CSS Grid 时，我们需要注意以下几点：

CSS Grid 并不是所有浏览器都支持，所以我们需要在使用前检查浏览器兼容性。
CSS Grid 的学习曲线虽然相对平缓，但是它仍然需要一定的时间和精力来掌握。
在使用 CSS Grid 时，我们需要注意网格项的排列顺序、对齐方式、自适应大小和命名，这些都会影响网格布局的效果。
在实现响应式布局时，我们需要使用媒体查询来判断屏幕宽度，并根据情况调整网格布局。

总之，CSS Grid 是一个非常强大的工具，它可以帮助我们更加灵活地布局页面。但是，在使用 CSS Grid 时，我们需要注意浏览器兼容性、学习曲线、网格项的排列顺序、对齐方式、自适应大小和命名，以及实现响应式布局等问题。只有在掌握了这些技巧之后，我们才能更加自如地使用 CSS Grid。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d14d67a941bf71342bd945

CSS Grid：快速启动，基础使用