大佬教程收集整理的这篇文章主要介绍了grid栅格布局，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
之前用来布局的方法：
1、table布局
2、float浮动及 position定位布局，需要考虑对其他元素的影响
3、flex弹性盒模型布局，可以解决排列方向，对齐方式，自适应尺寸的问题
现在学习一种新的布局方法：Grid布局，网格布局。是基于二维网格的布局系统，网格内部是一个格一个格的。和flex布局一样也分容器属性和项目属性。
title="grid栅格布局" alt="grid栅格布局" src="https://cn.js-code.com/res/2019/01-14/23/38278556ddec02f9d621b0909243cc1f.jpg" >
display: grid; 块级网格
display: inline-grid; 行内块级网格
display: subgrid; 定义子网格，子网格会继承父网格的一系列规格
grid-template-columns: 60px 60px 60px 60px; 用来定义网格列的宽度即轨道宽度，代码表示将容器划分为4列，列的宽度都是60px， 宽度可以随意的更改。
grid-template-rows: 60px 60px 60px 60px; 用来定义网格行的高度，代码表示将容器划分为4个行。通过以上两行代码就实现了一个4*4的网格划分了。
grid-gap: 5px; 默认值为0，用来控制网格的间距，准确地说是用来控制网格区域的间距。是grid-row-gap和grid-column-gap两个属性的缩写。
注：grid-gap只能创建列与列或行与行之间的间距，但不能创建列和行与网格容器边缘的间距。可设任何非负值，px、%、em等单位均可。
html:
css
title="grid栅格布局" alt="grid栅格布局" src="https://cn.js-code.com/res/2019/01-14/23/640bc1f4eeb2123c81aadced223dce83.png" >
column-start 和 用来控制区域的列开始和行开始的位置;
column-end 和 用来控制区域结束位置;
注意：grid-column-start、grid-column-end、grid-row-start、grid-row-end的值都可以取负数，负数意味着从后往前数。
column是grid-column-start和grid-column-end的简写;
是grid-row-start和grid-row-end的简写;
: 关键词span后面紧随数字，表示横跨几个单元格。
</span><span style="color: #008000">/*</span><span style="color: #008000"> 2 </span><span style="color: #008000">*/</span><span style="color: #000000">
grid</span>-column: span <span style="color: #800080">2</span> / <span style="color: #800080">3</span><span style="color: #000000">;
</span><span style="color: #008000">/*</span><span style="color: #008000"> 3 </span><span style="color: #008000">*/</span><span style="color: #000000">
grid</span>-column-start: <span style="color: #800080">1</span><span style="color: #000000">;
grid</span>-column-end: span <span style="color: #800080">2</span><span style="color: #000000">;
</span><span style="color: #008000">/*</span><span style="color: #008000"> 4 </span><span style="color: #008000">*/</span><span style="color: #000000">
grid</span>-column-start: span <span style="color: #800080">2</span><span style="color: #000000">;
grid</span>-column-end: <span style="color: #800080">3</span><span style="color: #000000">;
</span><span style="color: #008000">/*</span><span style="color: #008000">row 也一样的</span><span style="color: #008000">*/</span><span style="color: #000000">
grid</span>-row: -<span style="color: #800080">1</span> / -<span style="color: #800080">3</span><span style="color: #000000">;
}
是grid-row和grid-column的简写。顺序是grid-row-start,grid-column-start,grid-row-end,grid-column-end
: fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间
该示例中，网格容器分成了4（1+1+2=4）等份，每一份1fr=网格宽度/4
当fr和其他长度单位的值结合在一起时，fr是基于网格容器可用空间来计算的。该示例中
:
可以通过这个函数来创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值，auto值允许网格轨道基于内容的尺寸拉伸或挤压
使用repeat()函数可以创建重复的网格轨道。用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数：第一个定义网格轨道应该重复的次数，第二个定义每个轨道的尺寸。
网格线命名
通过grid-template-rows和grid-template-columns定义网格时，网格线可以被命名。网格线名称也可以设置网格项目位置
分配网格线名称必须用放括号，然后后面紧跟网格轨道的尺寸值。定义网格线名称时需要避免使用规范中出现的关键词，以免导致混乱。
使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似，引用网格线名称的时候不应该带方括号
使用repeat()函数可以给网格线分配相同的名称。相同网格线名称指定网格线的位置和名称，也且会自动在网格线名称后面添加对应的数字，使其网格线名称也是唯一的标识符。
网格默认方向是row,可以通过grid-auto-flow属性把网格流的方向改变成column
: column
当网格项目确认在显示网格之外时就会创建隐性网格，当没有足够的空间或者显示的网格轨道来设置网格项目，此时网格项目就会自动创建隐式网格。
和columns属性可以定义隐式的网格， 默认值auto
网格项目可以具有层级和堆栈，必要时可能通过属性来指定
和指定网格项目沿着行轴对齐方式; 和指定网格项目沿着列轴对齐方式。
justify-items和align-items应用在网格容器上
justify-self和align-self应用于网格项目自身对齐方式
这四个属性主要接受以下属性值：
auto、normal、start、 end、 center、 stretch、 baseline、 first baseline、 last baseline
指定网格轨道沿着行轴对齐方式;
指定网格轨道沿着列轴对齐方式。它们支持下面的属性：
normal、 start、 end、 center、 stretch、
space-around、 space-between、 space-evenly、 baseling、
first baseline、 last baseline
以上是大佬教程为你收集整理的grid栅格布局全部内容，希望文章能够帮你解决grid栅格布局所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。