今天写页面布局，突然想到了栅格布局，以往习惯了弹性布局，然后发现栅格布局有点香，然后就简单的整理了一下，用于学习与分享。

一、什么是栅格布局

可以理解为将一个元素分成行列，然后可以设置对应的大小、布局、位置。

二、栅格布局的基本语法

声明栅格

display: grid;
display: inline-grid;

划分行列

使用 grid-template-columns 划分列数
使用 grid-template-rows 划分行数

代码展示及说明

假定一个需求，在一个容器内，左右列表，默认展示4列2行。（画的有点丑，哈哈哈哈）

通过栅格布局进行页面的绘制。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="content"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div><div class="item">11</div></div>
</body></html>
<style>.content {width: 300px;height: 200px;background: #fff;border: 3px solid #F2F30E;display: grid;grid-template-columns: 50% 50%;grid-template-rows: 25% 25% 25% 25%;justify-content: center;}.item{border-bottom:1px solid red  ;}
</style>

上面代码发现，页面超出部分，高度不是25%了，那是因为容器外的没有设置到25%这个属性，解决方法：设置其余的行大小。

  grid-auto-rows:25% ;

补充

根据px设置大小、auto为自动填充（也可以使用百分比）

div {grid-template-rows: 100px 100px;grid-template-columns: 100px 100px 100px;
}

通过repeat设置统一值

div {grid-template-rows: repeat(2, 50%);grid-template-columns: repeat(2, 50%);
}

通过auto-fill自动填充

div {width: 300px;height: 200px;display: grid;grid-template-rows: repeat(auto-fill, 100px);grid-template-columns: repeat(auto-fill, 100px);/* 两行三列 （300/100,200/100） */
}

使用fr设置比例

div {width: 300px;height: 100px;display: grid;grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(2, 1fr 2fr);
}

简写形式

/** 简写形式 */
grid-template: 10vh 20vh 10vh/ 30vw 1fr;
grid-template: repeat(3, 100px) / repeat(3, 100px);

行列间距

row-gap 行间距
coliumn-gap 列间距
gap 组合定义

row-gap: 30px;
column-gap: 20px;
gap: 20px 10px;
gap: 20px;/*行列间距都为20px*/

元素定位

样式属性	说明
grid-row-start	行开始栅格线
grid-row-end	行结束栅格线
grid-column-start	列开始栅格线
grid-column-end	列结束栅格线

grid-row-start/grid-column-start/grid-row-end/grid-column-endgrid-area: 2/2/4/4;/* 2行2列开始，4行4列结束*/

栅格对齐


justify-content    所有栅格在容器中的水平对齐方式，容器有额外空间时    栅格容器
align-content    所有栅格在容器中的垂直对齐方式，容器有额外空间时    栅格容器
align-items    栅格内所有元素的垂直排列方式    栅格容器
justify-items    栅格内所有元素的横向排列方式    栅格容器

三、扩展

有不懂的可以相互交流，或者查看官网，本文更适用于作者本人记录总结。

CSS栅格布局（Grid）相关推荐

css 栅格布局 grid
效果1: 通过css 栅格布局,实现3行3列布局,实现行列都自动缩放的效果.效果如下
CSS栅格布局grid详解
栅格布局分为常规栅格和行内栅格,值分别为display:grid:和display:inline-grid:但是大多数栅格布局都是块级的.这里有一个需要注意的是,如果我们给一个标签设置了栅格布局,有的 ...
自适应 CSS 栅格布局
自适应 CSS 栅格布局 CSS 栅格布局(Grid)是一种全新的在 Web 上创建二维布局的方法.我们仅需几行 CSS,就可以创建一个之前不用 JavaScript 根本不可能实现的栅格布局.我们不 ...
【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格相关术语 1.2 网格布局的属性分类 2. grid 属性: 同时 ...
Css网格布局-Grid布局
Grid 概念 Grid布局是一种二维布局方法,能够在行和列中布置内容.因此在任何网格中都有两个轴,横轴(即行轴,内联)和纵轴(即列轴,块). 什么是网格网格是一组相交的水平线和垂直线,它定义了网格 ...
CSS基本布局——grid布局
grid布局简介: Grid布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局. 基本概念: 容 ...
css系列-grid栅格布局
栅格介绍名词解释 CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行. 栅格系统与FLEX弹性布局有相似之处理,都是由父容器包含 ...
html图片文字网格布局,【图片版】CSS网格布局（Grid）完全教程
## 简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Ha ...
T-Bootstrap-day02-辅助类、栅格布局
文章目录二.BootStrap 三.辅助类---所有元素都能用类四.栅格布局grid(重点) 二.BootStrap 列表相关(列表组) 去除标识项类:list-unstyled-内容list- ...

CSS栅格布局（Grid）