20/80原则告诉你，原来CSS Grid 布局如此简单！

前端

2023-10-17 19:14:06

正文

随着网页技术的发展，CSS Grid 布局作为一种新的布局方式，因其强大而灵活的功能受到了众多前端开发人员的青睐。它不仅能够轻松创建复杂而响应式的布局，还能够让网页在不同设备上都能呈现出最佳效果。

然而，对于许多初学者来说，CSS Grid 布局可能看起来有些复杂和难以理解。如果你也对Grid 布局感到困惑，那么你可以尝试使用20/80原则来快速入门和掌握这项技术。

20/80原则，又称为帕累托原理，它指出，在许多情况下，80%的结果是由20%的努力造成的。换句话说，如果你能掌握20%的关键知识，你就能获得80%的成果。

在CSS Grid 布局中，也有这样20%的关键知识，一旦你掌握了它们，你就能快速入门并轻松使用这项技术。

1. 理解Grid 术语

在学习Grid 布局之前，你需要先理解一些基本术语，包括Grid 容器、Grid 项目、Grid 线、Grid 单元格、Gap等。这些术语是Grid 布局的基础，只有理解了它们，你才能继续学习更高级的知识。

2. 创建Grid 容器

Grid 布局的第一个步骤是创建一个Grid 容器。Grid 容器是一个包含Grid 项目的元素，它可以是任何元素，比如div、header、footer等。要创建一个Grid 容器，你只需要添加一个display: grid属性即可。

3. 添加Grid 项目

在创建了Grid 容器之后，你就可以开始添加Grid 项目了。Grid 项目是放置在Grid 容器中的元素，它们可以是任何元素，比如div、p、img等。要添加一个Grid 项目，你只需要将它放在Grid 容器中即可。

4. 设置Grid 布局属性

为了让Grid 布局正常工作，你需要设置一些Grid 布局属性，包括grid-template-columns、grid-template-rows、grid-gap等。这些属性决定了Grid 容器的列数、行数、列宽、行高、间距等。

5. 定位Grid 项目

在设置了Grid 布局属性之后，你就可以开始定位Grid 项目了。你可以使用grid-column、grid-row、grid-column-start、grid-column-end、grid-row-start、grid-row-end等属性来定位Grid 项目。这些属性决定了Grid 项目在Grid 容器中的位置。

掌握了以上5个关键知识点，你就能快速入门CSS Grid 布局，并轻松使用这项技术来创建复杂的布局。

当然，CSS Grid 布局还有一些更高级的知识点，比如Grid 模板区域、Grid 线命名等。如果你想了解更多，可以查阅相关资料。但是，对于大多数人来说，掌握以上5个关键知识点就足以满足他们的需求了。

现在，让我们以一个简单的例子来演示如何使用CSS Grid 布局。

<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>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
}