随着移动设备日益普及，全屏布局成为越来越受欢迎的设计趋势。CSS Grid 布局是一种强大的工具，可以快速简便地构建全屏布局。本文将介绍如何使用 CSS Grid 布局来实现全屏布局，包括基础概念、属性及实例代码。
基础概念
在开始之前，我们需要了解一些基本概念。CSS Grid 布局是一种二维网格（grid）布局系统，可以将一个容器（container）分割成行和列，从而创建出一个二维的布局。容器中的项目（item）可以放置在网格中的任意位置。
CSS Grid 布局中的两个主要组成部分是容器和项目。容器是一个带有 display: grid 属性的元素，它指定了要创建的网格的行和列。项目是容器中被放置在网格中的元素。
属性
CSS Grid 布局有许多属性可以用于控制网格和项目的位置和大小。下面是一些常用的属性：
grid-template-columns/grid-template-rows
grid-template-columns 和 grid-template-rows 属性用于定义网格的列和行。它们可以使用多个值，每个值都代表一个网格轨道（grid track）。网格轨道可以是一个固定的长度、一个百分比值，也可以是一个 fr 单位，该单位代表剩余空间的比例。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 50px 100px;
}上述代码创建了一个含有三列、两行的 6 个网格单元格的网格。第一行高度为 50 像素，第二行高度为 100 像素。第一列和第三列宽度为剩余空间的 1 / 4，第二列宽度为剩余空间的 2 / 4。
grid-column/grid-row
grid-column 和 grid-row 属性用于定义项目在网格中的位置。它们的值可以是一个数字来表示项目所处的网格线位置，也可以是 span 关键字，表示项目跨越多个网格单元格。
.item {
grid-column: 2 / 4;
grid-row: 1;
}该示例代码定义了一个项目，它跨越第二列和第三列，位于第一行。
grid-gap
grid-gap 属性用于定义网格行和列之间的间距。它可以设置一个值，左右间距和上下间距默认相同，也可以分别设置水平和垂直间距。
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 50px 100px;
grid-gap: 10px;
}上述代码创建了一个含有两列、两行的 4 个网格单元格的网格。每个单元格之间有 10 像素的间距。
实例代码
下面我们来看一个例子，如何用 CSS Grid 布局实现全屏布局。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------ ------ ---- --- ------------
-------
---- -
------- --
-------- --
-
---------- -
-------- -----
---------------------- --- --- ----
------------------- ---- --- -----
------- ------
-
------- -
----------------- -----
------------ - - --
--------- --
-
-------- -
----------------- -----
------------ - - --
--------- --
-
------- -
----------------- -----
------------ - - --
--------- --
-
------------- -
----------------- -----
------------ --
--------- --
-
-------------- -
----------------- -----
------------ --
--------- --
-
------ ----------- ------ -
---------- -
---------------------- ----
------------------- ---- --- -----
-
-------- ------- -
------------ - - --
-
-------- -
------------ - - --
-
-------------- -------------- -
--------- --
-
------------- -
------------ --
-
-------------- -
------------ --
-
-
--------
-------
------
---- ------------------
------- ------------------------------
---- -----------------------------
------- ------------------------------
------ ------------------------- ---------------
------ --------------------------- ---------------
------
-------
-------在上述代码中，我们使用了一个 container 容器，并在其中放置了一个头部、主体、尾部和两个侧边栏。在大屏幕设备上，容器被分成三列，中央部分占用 1 / 3 宽度，侧边栏占用剩余宽度的 1 / 6。
在小屏幕设备上，我们使用媒体查询将容器的列数设置为 1，使其在移动设备上呈现出简洁的单列布局。
总结
CSS Grid 布局是实现全屏布局的强大工具，它可以快速简便地创建二维的网格布局。通过了解基本概念和属性，并参照上述实例代码，您可以轻松地实现全屏布局。如果您想深入学习 CSS Grid 布局，可以查看官方文档和其他相关资料。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65334ba77d4982a6eb6ceab0