前言
在前端开发中，经常会遇到项目不对齐的问题，这是一个十分常见的问题。常常我们会使用 flex 或者 position 来实现对齐，但是这些方法对于一些复杂的场景，很难得到满足。那么如何解决这个问题呢？今天，我将为大家介绍另一种实现项目对齐的方法，即使用 CSS Grid。
CSS Grid 是什么
CSS Grid 是一种新的 CSS 布局方式，它可以将一个网格分成多行多列的区域，并且可以在这些区域内物品更好地对齐。这种布局方式相对于之前的布局方式有很多的优势。常常我们会使用 flex 或者 float 来实现对齐，但是有些情况下并不能满足需求。那么对于一些特殊的需求来说，使用 CSS Grid 就是一个不错的选择。
如何使用 CSS Grid
定义一个网格
首先，我们需要定义一个网格。定义网格很简单，只需要将容器设置为 display:grid 即可。例如：
.container {
display: grid;
}定义行和列
为了定义网格的行和列，我们可以使用 grid-template-columns 和 grid-template-rows 属性。这两个属性可以接受一个值的列表，每个值表示一个列或者一行。值可以是一个长度、一个百分比或者一个 fr 单位（表示剩余部分）。例如：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px 50px;
}这个例子定义了一个宽度为 300 像素，高度为 150 像素的网格。这个网格被分成了三列和三行，每个列的宽度是 100 像素，每个行的高度是 50 像素。
指定网格区域
为了指定某一个元素属于哪一个网格区域，我们需要使用 grid-column 和 grid-row 属性。这两个属性接受起始和结束值，表示元素占据的网格区域。例如：
.item {
grid-column: 2 / 4;
grid-row: 1 / 3;
}这个例子将一个元素放置在第二列到第四列之间，和第一行到第三行之间。这个元素将占据两列和两行。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
-------- -----
---------------------- ----- ----- ------
------------------- ---- ---- -----
---- -----
-
------- -
------------ - - --
--------- - - --
----------------- --------
------ ------
-
------- -
------------ - - --
--------- - - --
----------------- --------
------ ------
-
------- -
------------ - - --
--------- - - --
----------------- --------
------ ------
-
------- -
------------ - - --
--------- - - --
----------------- --------
------ ------
-
------- -
------------ - - --
--------- - - --
----------------- --------
------ ------
-
--------
-------
------
---- ------------------
---- ----------- ------------ -------
---- ----------- ------------ -------
---- ----------- ------------ -------
---- ----------- ------------ -------
---- ----------- ------------ -------
------
-------
-------上述代码会在页面上创建一个 3 x 3 的网格，并且将 5 个元素放置在不同的网格区域内。效果如下：
总结
CSS Grid 是一个非常强大的前端布局方式，它的灵活性和强大的功能可以帮助我们解决很多布局问题。如果你还没有学习过 CSS Grid，我非常推荐你去尝试一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c60c0968c7c53b0eb9e9e