布局的神 |
您所在的位置:网站首页 › 弹性布局特点是什么 › 布局的神 |
网格布局
一、什么是网格布局
网格布局,顾名思义就是像网一样有一个个格子一样的布局。在一个容器里面,我们可以切割成很多行很多列,形成一个个网格,从而对这些网格进行规则性的排序,使用,达到我们复杂的页面布局效果。 Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。 Flex 布局是轴线布局,有主轴和侧轴之分,只能指定容器内子元素针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。 二.网格布局的使用 1.grid基本属性首先,我们要知道网格布局也是有“容器”和“项目”的,既给容器设置上display: grid;或者display: inline-grid; 表明该容器是网格容器,这个元素的所有直系子元素将成为网格元素。 grid:指明该容器本身是块级元素,块级元素独占一行。 inline-grid :指明该容器本身是一个行内元素,行内元素可以和其他行内元素共占一行。 container是一个网格容器,item为网格元素。而grandson却不是网格元素,所以父容器只能影响儿子容器。 网格线 grid line分隔网格结构的分界线。它们可以是垂直(‘列网格线’)或水平(‘行网络线’) 网格单元 grid cell网格单元格是指四条网格线之间的空间。所以它是最小的单位,就像表格中的单元格。 网格轨道 grid trackgrid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。一个网格轨道就是网格中任意两条线之间的空间。 就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小,用来控制宽度或高度。 网格区域 grid area多个网格线包围的总空间。网格区域可以包含任意数量的网格单元。 2.父容器上的属性首先肯定是 :display: grid | inline-grid | subgrid ;指定一个容器采用网格布局。 grid – 生成一个块级(block-level)网格inline-grid – 生成一个行级(inline-level)网格subgrid – 如果你的 grid container 本身就是一个 grid item(即,嵌套网格),你可以使用这个属性来表示你想从它的父节点获取它的行/列的大小,而不是指定它自己的大小。 1. 网格轨道宽高grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。在大小前面使用数组可以定义网格线的名称,可以有很多个名称。可写可不写,看需求。 .container { width: 200px; height: 200px; display: grid; /* 定义了三列 每一行50px */ grid-template-columns: [first] 50px [line2]50px [line3]50px; /* 定义了三行 每一行50px */ grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end]; }效果: 我们除了用绝对单位,还可以使用fr单位 , 一个 fr 单位代表网格容器中可用空间的一等份。也可以使用百分比,如果你定义了非常多行非常多列,还可以使用repeat()函数。也可以混合写。例如下面 grid-template-columns: 33.33% 33.33% 33.33%; grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(3, 33.33%);//第一个参数是几份,后面可以说绝对单位,百分比,fr grid-template-columns: repeat(3, 50px [col-start]);//携带网格线名字 grid-template-columns: repeat(2, 100px 20px 80px);//重复某种模式 grid-template-columns: 30% 50px auto;注意:混合使用单位的时候,例如下面,fr为可用宽度减去50px后,得到的空间再进行等量的分配。 grid-template-columns: 1fr 50px 1fr 1fr; 2. 网格间距grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距),grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式。grid-gap: .container { width: 200px; height: 200px; display: grid; grid-template-columns: [first] 50px [line2]50px [line3]50px; grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end]; grid-row-gap:5px; grid-column-gap:5px; /* grid-gap: 5px 5px;合并写法 */ }效果: 通过引用 grid-area-name属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称导致内容扩展到这些单元格。 点号表示一个空单元格。 语法本身提供了网格结构的可视化。 定义一个2*3的网格区域,并给上名字。可以使用任意数量的相邻的.来声明单个空单元格。 只要这些点号之间没有空格,他们就代表了一个单一的单元格。 .container { margin-left: 30%; width: 200px; height: 200px; display: grid; grid-template-columns: [first] 50px [line2]50px [line3]50px; grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end]; grid-row-gap:5px; grid-column-gap:5px; grid-template-areas: "head head " ". main" ". foot"; }效果: 注意: 区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end。 比如,区域名为header,则起始位置的水平网格线和垂直网格线叫做header-start,终止位置的水平网格线和垂直网格线叫做header-end。 4.网格对齐方式justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下)。 指的是整个内容在容器中的排列方式 取值有: start - 对齐容器的起始边框。end - 对齐容器的结束边框。center - 容器内部居中。stretch - 项目大小没有指定时,拉伸占据整个网格容器。space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔。space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。place-content属性是align-content属性和justify-content属性的合并简写形式place-content: .container { margin-left: 30%; width: 200px; height: 200px; display: grid; grid-template-columns: repeat(3,50px); grid-template-rows: repeat(3,50px); grid-row-gap:5px; grid-column-gap:5px; background: #def1a9; justify-content: start; align-content: end; }设置一个水平靠左,垂直靠底部。效果: 设置居中 justify-content: center; align-content: center;justify-items 属性设置单元格内容的水平位置(左中右),align-items 属性设置单元格的垂直位置(上中下) 取值: start:对齐单元格的起始边缘。end:对齐单元格的结束边缘。center:单元格内部居中。stretch:拉伸,占满单元格的整个宽度(默认值)。使用justify-items举一个例子: justify-items: start --对齐单元格的起始边缘 justify-items: end–对齐单元格的结束边缘 justify-items: center; --水平居中 justify-items: stretch;(默认)拉伸,占满单元格的整个宽度。 grid-auto-flow属性控制着自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行 如果改变为: grid-auto-flow: column;效果: 先看看能取哪些值 grid-auto-flow: row|column|dense|row dense|column dense; 值描述row默认值。 通过填充每一行来放置网格元素,在必要时增加新列。column通过填充每一列来放置网格元素,在必要时增加新列。dense该关键字指定自动布局算法使用一种"稠密"堆积算法,如果后面出现了稍小的元素,则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白,但同时也可能导致原来出现的次序被打乱。row dense按行来填充网格中前面留下的空白column dense按列来填充网格中前面留下的空白指定自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。 什么意思呢?当我创建了一个2*3的网格时候,我让第三个网格占有两个单元格宽度,代码如下 1 2 3 4 * { margin: 0px; padding: 0px; } body { height: 100%; } .item3 { grid-column: auto / span 2; } .grid-container { width: 300px; height: 200px; display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; /* grid-auto-flow: row dense; */ } .grid-container>div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; }当我给网格容器设置上grid-auto-flow: row dense;就会填充每一行上面留下来的空白。 当我让第三个占有三个宽度时候grid-column: auto / span 3;并设置grid-auto-flow: row ;就会补充一行,我前面只设置了2*3网格。 设置为grid-auto-flow: column;不足会补充一列。 grid-auto-columns属性和grid-auto-rows属性用来设置,浏览器自动创建的多余网格的列宽和行高。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。 7.grid-template属性、grid属性grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。 grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。 就我个人而言,我不喜欢简写,一两个同类型简写还可以,多个不同属性简写会导致可读性较差。看个人咯。 3. 项目上的属性项目属性,顾名思义就是定义在父容器的儿子节点上的属性。 1. grid-column 属性, grid-row 属性grid-column属性是grid-column-start和grid-column-end的合并简写形式,grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。 这就是网格最有魅力的地方,我感觉。它可以指定项目的位置放在那个地方,就是说可以放在哪个网格区域,这样就让布局变得灵活、复杂起来。,具体方法就是指定项目的四个边框,分别定位在哪根网格线。 grid-column-start属性:左边框所在的垂直网格线grid-column-end属性:右边框所在的垂直网格线grid-row-start属性:上边框所在的水平网格线grid-row-end属性:下边框所在的水平网格线例如: 浪 漫 主 义 码农 * { margin: 0px; padding: 0px; } body { height: 100%; } .container { width: 300px; height: 200px; display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3,50px); grid-gap: 5px; background-color: #2196F3; padding: 10px; justify-content: center; align-content: center; } .item1 { grid-column:1 / 3; background: #0F85CC; } .item2 { grid-row: 1 / 3; grid-column: 3 / 4; background: #1fe605; } .item3 { grid-row: 2/4; grid-column: 1/2; background: burlywood; } .item4 { grid-row: 3/4; grid-column: 2/4; background: #10caf9; } .item5 { border-radius: 50%; text-align: center; background: #E60537; }效果: 没有指定网格线的话就是默认1,2,3… 有几种写法: number: 可以是一个数字来指代相应编号的网格线,也可使用名称指代相应命名的网格线span: 网格项将跨越指定数量的网格轨道span: 网格项将跨越一些轨道,直到碰到指定命名的网格线auto: 自动布局, 或者自动跨越, 或者跨越一个默认的轨道例如: .item-c { grid-column: 3 / span 2;//从第3条网格线开始,跨过两列 grid-row: divname / 5;//从divname开始到第5条网格线 } 2.grid-area属性grid-area属性指定项目放在哪一个网格区域。 grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式,直接指定项目的位置。 例如: .item { grid-area: / / / ; }这里用法和上面一样不多解释。 3.justify-self 属性, align-self 属性, place-self 属性justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。 align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。 place-self属性是align-self属性和justify-self属性的合并简写形式。 这里比较简单就演示一个,作用在子元素上,只会影响自己一个元素的排列 .item1{ justify-self: start; }到这里我们的网格布局就都介绍完了。 写在最后最后再分享一个自己画的,用网格布局画一个奥运五环。下一篇贴代码和思路,觉得还不错的给小的就一键三连吧 🤺🏇🏂🏄♂️🏄♀️🚣🏊 你既然认准一条路,何必去打听要走多久呢⛹️🏋️♀️🚴🚴♂️🚵🚵♀️🤸♀️🤼 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |