前言
在 CSS 中，布局一直是一个棘手的问题。没有了解过网页设计的人可能认为这个工作很简单，但实际上，由于不同设备及浏览器的差异，为了使网站看起来美观且易于使用，布局会耗费前端工程师很多精力。
利用现有的 CSS 框架可以大大加快这项任务的完成速度，其中 grif-layout 就是其中之一。
本文将详细介绍如何使用 grif-layout，以及能带来什么好处。
安装
为了使用 grif-layout，你必须先安装它。在命令行中输入以下内容：
npm install grif-layout
使用
1. 将样式添加到你的网页
你需要在你的网页中添加 grif-layout 的样式，以便进行布局。
有多种方法可以做到这一点，但最简单的方法是将下面的代码插入到你的 HTML 文件中：
<link rel="stylesheet" href="node_modules/grif-layout/dist/grif-layout.min.css">
2. 创建一个布局容器
在你的 HTML 中添加一个具有类名 .gl-container 的 div 元素，它将承载你的布局。
例如：
<div class="gl-container"> <!-- 这里是你的布局 --> </div>
3. 分配一个栏
要将元素放在网格布局中，你需要将其放置在一个栏中。栏具有一定的宽度和高度，并且可能在不同的屏幕大小和设备上呈现不同的样式
为了创建一个栏，请在创建容器后添加一个带有 .gl-col 类的 div 元素。这将成为旗下的子元素的容器。
例如，要在布局容器中创建两个带有 .gl-col 类的栏：
<div class="gl-container"> <div class="gl-col"></div> <div class="gl-col"></div> </div>
4. 分配栏的大小
栏可能需要有不同的大小。要分配栏大小，请使用以下类别：
.gl-lg：大型设备上的屏幕，宽度大于等于 1200 像素。.gl-md：中型设备上的屏幕，宽度在 992 像素到 1199 像素之间。.gl-sm：小型设备上的屏幕，宽度在 768 像素到 991 像素之间。.gl-xs：极小型设备上的屏幕，宽度小于 768 像素。
例如，要创建两个相同大小的栏：（其中一个栏在大型设备上占了两格，另一个栏则只占了一格）
<div class="gl-container"> <div class="gl-col gl-lg-2 gl-md-2 gl-sm-2 gl-xs-2"></div> <div class="gl-col gl-lg-1 gl-md-1 gl-sm-1 gl-xs-1"></div> </div>
5. 分配栏的偏移量
有时栏也需要相对于其十进制位置或另一个栏进行偏移。可以使用以下类名分配偏移量：
.gl-offset-lg-*：相对于大型设备上的偏移量。.gl-offset-md-*：相对于中型设备上的偏移量。.gl-offset-sm-*：相对于小型设备上的偏移量。.gl-offset-xs-*：相对于极小型设备上的偏移量。
例如，要创建一个具有大型设备上偏移量的栏：
<div class="gl-container"> <div class="gl-col gl-lg-2 gl-offset-lg-2"></div> <div class="gl-col gl-lg-1"></div> </div>
示例代码
下面的代码演示了如何创建一个网格布局，其中包含两个栏，并使用偏移量将第二个栏向右移动。
<div class="gl-container">
<div class="gl-col gl-lg-2 gl-md-2 gl-sm-2 gl-xs-2">
<!-- 第一个栏 -->
</div>
<div class="gl-col gl-lg-1 gl-md-1 gl-sm-1 gl-xs-1 gl-offset-lg-2">
<!-- 第二个栏 -->
</div>
</div>总结
grif-layout 是一个非常实用的 CSS 框架，它可以使网格布局变得更容易，而不需要复杂的样式和布局计算。使用 grif-layout ，可以大大加快你的布局速度，减少错误。
希望本篇文章可以帮助你了解如何使用 grif-layout，并更快地完成你的前端开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c181e8991b448e31c8