逆战班：网格布局（grid）

Grid 是一个二维的布局方法纵横两个方向同时存在
使用display：grid 形成网格布局，将一个容器分成多分，网格可以进行多种组合

网格有行与列之分，水平的为行（row），垂直的为列（column）

网格的属性：
应用在父容器的属性：
grid-template-rows 该属性定义行数的同时也定义了行宽
grid-template-columns 该属性定义列的同时也定义列列的宽度

属性值的单位既可以使用像素作为单位，也可以使用百分比作为单位来定义网格，百分比所得出的最终宽度，基于父元素的容器的宽度。
还有一个网格中的fr关键字，利用fr对网格进行均分
fr代表每行或者每列在整个宽度或者高度中占多少 grid-template-rows :1fr 2fr;这代表在一行内，后一个网格的宽度是前一个网格的两倍，grid-template-rows ：150px;1fr 2fr;这表示在一行内第一个网格的宽度是150px，而剩下的两个根据剩余的空间，进行计算，第三个是第二个的两倍

单独的去设置每一行或者的列的宽度过于繁琐，可以使用repeat（）来进行多个设置
grid-template-columns: repeat(4，1fr);
grid-template-rows: repeat(4,1fr);
使用grid-column-gap 和grid-row-gap去设置单元格之间的距离，这个布局不会将网格挤出父元素，只会压缩单元格的宽度
grid-column-gap 设置列之间的宽度
grid-row-gap设置行之间的宽度
grid-gap 这是二者的复合写法有固定顺序，先行后列

对网格进行行列的设置后，要对网格进行区域的划分
使用grid-template-areas 对网格进行区域的划分划分有一个条件，便是，所有划分的区域必须为矩形，否则不会生效
常用的方法

a1，a2等为一个名称，可以变定义，这意味着将四个区域分别进行命名，使用时，更加方便

 子元素使用grid-area进行区域选择div{grid-area:a1;}   意思是，div占据了a1的区域

也可以给单元格中的元素定义对齐的方式
align-items 定义了整体子项的垂直居中方式
justify-items 整体子项的水平居中方式
值有 start end center 默认值为stretch
justify-content 定义了网格整体的水平对齐方式
alitems-contents 定义了网格整体的垂直对齐方式
默认 stretch
start 在开头对齐
center 在中间对齐
end 在尾部对齐
space-between 在两端对齐，中间空出空间
space-around 内容中间空出的距离是两端点空出的两倍
spce-evenly 端点空出的距离与中间的距离相等

给子项添加的属性：
以下四个属性用于移动每一个方块
grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上的结束位置
注：
只有在grid-column-end和grid-row-end中可以设置span操作
span去设置的不是结束的位置，而是个数
正常写数字是位置，加上span是个数是方块的个数，占据的了几个方块，

加上span之后，便不再是结束的位置，而是方块的个数
grid-area 值不需要加引号将子元素与网格所发分的区域对应起来
grid-area：水平开始 / 垂直开始 / 水平结束 /垂直结束
1.可以写对应网格的名字
2.也可以写对丁的线的数字
grid-row-start / grid-column-start / grid-row-end / grid-column-end
第二种遍试与上边类似

第一种：

子项也有自身的对齐方式
align-self 垂直方向单个子项的对齐方式
justify-self 水平方向单个子项的对齐方式

逆战班：网格布局（grid）相关推荐

【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格相关术语 1.2 网格布局的属性分类 2. grid 属性: 同时 ...
Css网格布局-Grid布局
Grid 概念 Grid布局是一种二维布局方法,能够在行和列中布置内容.因此在任何网格中都有两个轴,横轴(即行轴,内联)和纵轴(即列轴,块). 什么是网格网格是一组相交的水平线和垂直线,它定义了网格 ...
前端网格布局grid
网格布局 <style> .container {border:none;display: grid;height: 600px;grid-template-columns: 200px ...
CSS布局—网格布局Grid（一）
CSS网格可以定义由行和列组成的二维布局,然后将元素放置到网格中.有些元素可能只占据网格的一个单元,另一些元素则可能占据多行或多列.网格的大小既可以精确定义,也可以根据自身内容自动计算.你既可以将元素 ...
CSS进阶之关于网格布局(Grid) 你了解哪些
CSS 进阶:网格布局(Grid)及其基本属性网格布局(Grid)是最强大的 CSS 布局方案.起初我也认为 flex 布局就可以完成绝大部分布局场景,但谁不希望用更直观.更简洁的方式来布局自己的网 ...
网格布局--grid
目录一.定义网格及fr单位 1.1 定义网格及fr单位 1.2 容器 1.3 子项 c. justify-self/align-self/place-self 二.常见布局 2.1 叠加布局三.多 ...
CSS3 网格布局(grid layout)基础知识 - 隐式网格自动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)
网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道,构成显式网格. 当网格项目定位在这些界限之外,网格容器通过增加隐式网格线生成隐式网格轨道. 这些隐 ...
网格布局(Grid Layout)
.wrapper {/*类名*/ display: grid;/*规定为网格属性*/ grid-template-columns: repeat(3, 1fr);/*定义的行名称和跟踪的大小功能网 ...
CSS Grid网格布局全攻略
CSS Grid网格布局全攻略所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
CSS3中的display:grid网格布局介绍
1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...

逆战班：网格布局（grid）

逆战班：网格布局（grid）相关推荐

最新文章

热门文章