在前端开发中，经常需要使用到两栏式布局来达到页面美观、功能完整的效果。传统的方式是使用浮动、定位等 CSS 属性来实现，但这些方法都存在一些问题，如代码复杂、响应式不友好等。而使用 CSS Grid 可以提供更加简便、灵活的方式来实现两栏式布局。本文将从基础知识讲起，逐步介绍使用 CSS Grid 实现两栏式布局的技巧和经验。
Grid 基础知识
CSS Grid 是一个基于网格布局的 CSS 模块，可以轻松地实现网格化布局。要使用 CSS Grid，需要先对以下几个概念进行了解：
网格容器(Grid Container)
与传统的网页布局不同，CSS Grid 的布局是基于网格容器的。网格容器是一个具有 display 属性值为 grid 或 inline-grid 的 HTML 元素，它的子元素就是放置在这个网格中的其他元素。
.container {
display: grid;
}网格线(Grid Line)
网格线是一个虚拟的线条，用于将网格容器分为一系列网格单元格。在一个网格容器中，会有水平和垂直两种网格线。水平网格线被称为“行”，垂直网格线被称为“列”。
网格轨道(Grid Track)
网格轨道是相邻网格线之间的空间。可以通过设置网格轨道的大小和位置来设置网格单元格的大小和位置。
.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 200px;
}
/* 上面的代码表示网格容器中有两列，第一列宽度为 100px，第二列宽度为 200px，有两行，第一行高度为 100px，第二行高度为 200px */网格单元格(Grid Cell)
网格单元格是由四个相邻的网格线包围而成的矩形区域。它的大小和位置可以由所在轨道的大小和位置决定。
网格区域(Grid Area)
网格区域是由一个或多个网格单元格组成的区域，可以用来放置 HTML 元素。
.item {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
}
/* 上面的代码表示 .item 元素占据了网格容器的第一列，从第一行开始到第三行结束 */更多关于 CSS Grid 的基础知识，可以参考 CSS Grid 理解指南。
实现两栏式布局
理解了 CSS Grid 的基础知识之后，就可以开始使用它来实现两栏式布局了。以下是一些实现两栏式布局的技巧和经验。
1. 设置网格容器的列数和行数
首先需要根据需求设置网格容器的列数和行数。例如，要实现一个左侧宽度为 300px，右侧自动占据剩余宽度的两栏式布局，可以这样设置：
.container {
display: grid;
grid-template-columns: 300px 1fr;
}其中，grid-template-columns 表示设置网格容器的列数和宽度。1fr 表示剩余空间的占比，即右侧的宽度自动占据剩余宽度。
2. 设置网格容器的边距和间隔
如果需要在两栏之间设置一定的距离，可以使用 grid-column-gap 和 grid-row-gap 属性。如下所示：
.container {
display: grid;
grid-template-columns: 300px 1fr;
grid-column-gap: 10px;
}3. 设置网格单元格的大小
由于一个网格单元格的大小是由所在轨道的大小和位置决定的，因此可以通过设置轨道的大小和位置来设置网格单元格的大小。例如，要设置左侧栏的高度和右侧栏的宽度，可以这样设置：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- ---- ---------------- ----- -- ------- -- ------------------- ------ - ----- - -- ------ -- - ------ - -- ------ -- -- ------- -- ------------------ -- ---------------- -- -
其中，grid-template-rows 表示设置网格容器的行数和高度。对于左侧栏，设置 grid-template-rows: 100vh; 表示高度为视口高度，即占据整个视口的高度。对于右侧栏，设置 grid-column-start: 2; grid-column-end: 3; 表示起始列为第二列，结束列为第三列，即占据整个右侧栏的宽度。
4. 设置网格区域的大小和位置
除了设置网格单元格的大小和位置，还可以通过设置网格区域的大小和位置来实现布局。如下所示：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- ---- ---------------- ----- -- ------- -- ------------------- ------ - ----- - -- ------ -- -- ----------- -- --------------- -- ------------- -- - ------ - -- ------ -- -- ----------- -- --------------- -- ------------- -- ------------------ -- ---------------- -- -
其中，grid-row-start 表示网格区域（包含多个网格单元格）的起始行，grid-row-end 表示网格区域的结束行，grid-column-start 和 grid-column-end 也是同理。
示例代码
以下是一个完整的使用 CSS Grid 实现两栏式布局的示例代码：
-- -------------------- ---- -------
---- ------------------
---- -------------------
---- --------------------
------
-------
---------- -
-------- -----
---------------------- ----- ----
---------------- -----
-- ------- --
------------------- ------
-
----- -
-- ------ --
-- ----------- --
--------------- --
------------- --
-
------ -
-- ------ --
-- ----------- --
--------------- --
------------- --
------------------ --
---------------- --
-
--------总结
本文介绍了使用 CSS Grid 实现两栏式布局的技巧和经验，重点讲解了 CSS Grid 的基础知识、实现两栏式布局的步骤，以及一些实用的 CSS 属性。CSS Grid 具有简便、灵活、响应式友好等特点，在实际开发中可以用来代替传统的布局方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a0d14f48841e9894d19b24