前言
CSS Grid 是一个强大的布局系统，可以让开发者更容易的实现各种复杂的布局。但对于初学者而言，如何使用 CSS Grid 来实现等分布局还是一个难点，下面我们将介绍具体实现方式。
等分布局的基础概念
在实现等分布局之前，我们需要了解 CSS Grid 布局的基础概念。CSS Grid 由容器（Grid Container）和项目（Grid Item）两个部分组成。容器是用来定义整个布局的，项目是具体的每一个格子，类似于我们之前使用的表格布局。
CSS Grid 的布局最基础的概念是网格行（Grid Row）和网格列（Grid Column）。网格行和网格列可以通过定义网格线（Grid Line）来实现。容器和项目都可以同时定义行数和列数。
如何实现等分布局
等分布局的概念
等分布局就是将一个容器等分成若干个网格行和网格列，让每一个项目都均分这些行和列，从而实现等分布局。
实现方法
- 先定义容器的行数和列数，然后将容器内的项目按照定义的行和列进行布局。
<div class="container"> <div class="item item1"> 1 </div> <div class="item item2"> 2 </div> <div class="item item3"> 3 </div> <div class="item item4"> 4 </div> <div class="item item5"> 5 </div> <div class="item item6"> 6 </div> </div>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}通过 grid-template-columns 和 grid-template-rows 定义了容器的行和列数，然后将项目进行布局。
- 等分布局并非只能按照等分行或者等分列来实现。我们还可以通过定义具体每一个项目占用的行数和列数，来实现更加丰富的布局。
<div class="container"> <div class="item item1"> 1 </div> <div class="item item2"> 2 </div> <div class="item item3"> 3 </div> <div class="item item4"> 4 </div> <div class="item item5"> 5 </div> <div class="item item6"> 6 </div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- - ------ - ------------ ---- -- - ------ - --------- ---- -- - ------ - --------- ---- -- - ------ - ------------ ---- -- --------- ---- -- -
通过 grid-column 和 grid-row 定义了每一个项目占用的行数和列数，从而实现了更加丰富的布局。
注意事项
在实现等分布局的过程中需要注意以下几点：
- 确定容器的行和列数，以及每一个项目的行数和列数
- 给容器和项目添加 CSS Grid 属性，并避免与其他布局方式冲突
- 灵活运用
grid-column和grid-row，来进行更加复杂的等分布局
总结
CSS Grid 是一种强大的布局方式，能够让我们更加容易的实现各种复杂的布局。通过灵活的运用 grid-column 和 grid-row，我们能够实现各种等分布局的需求。希望这篇文章能对大家有所帮助，让大家更加深入理解 CSS Grid。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c613c968c7c53b0b5d54b