CSS Grid 网格布局教程 - 阮一峰的网络日志
1、基础知识
1.1 概述
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
1.2项目
项目只能是容器的顶层子元素，不包含项目的子元素
在该例子中，ul是容器，li是项目，li的子元素a就不是项目
1.3行列
row行
column列
1.4网格线
n行有n+1根水平网格线
m列有m+1根垂直网格线
2、容器属性
2.1 display
指定一个容器采用网格布局。
默认情况下，容器元素都是块级元素，但也可以设成行内元素。
2.2 划分行列
grid-template-columns 定义每一列的列宽
grid-template-rows 定义每一行的行高
2.21 使用绝对单位 200px
2.22 使用百分比 33.33%
2.23 使用函数repeat()
接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值
2.24 auto-fill
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用关键字表示自动填充。
该属性比较常见与响应式布局
2.25fr关键字
网格布局提供了关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为和，就表示后者是前者的两倍。
2.26minmax()
函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
这个与 auto-fill经常用于响应式布局
2.27auto关键字
关键字表示由浏览器自己决定长度。
2.28，实现两栏布局
grid-template-columns: 70% 30%;
2.3 间隔
grid-row-gap 属性，: 行与行的间隔（行间距）
grid-column-gap 属性，: 列与列的间隔（列间距）。
grid-gap 属性:和的合并简写形式
省略了第二个值，浏览器认为第二个值等于第一个值。
根据最新标准，上面三个属性名的前缀已经删除，和写成和，写成。
2.4排列顺序 grid-auto-flow
划分网格以后再调用
容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行
这个顺序由属性决定，默认值是，即"先行后列"。也可以将它设成，变成"先列后行"
3、单元格内容位置(所有的)
属性设置单元格内容的水平位置（左中右）
属性设置单元格内容的垂直位置（上中下）。
属性是属性和属性的合并简写形式。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）
- 如果网格项目（grid item）的宽度被明确设置（例如通过 width 属性），那么 将不会生效。
4、整个内容区域的位置
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
属性是属性和属性的合并简写形式。
5、项目属性
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
- 属性：左边框所在的垂直网格线
- 属性：右边框所在的垂直网格线
- 属性：上边框所在的水平网格线
- 属性：下边框所在的水平网格线
1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。
6、合并简写形式
7、只作用于（单个项目）
属性设置单元格内容的水平位置（左中右），跟属性的用法完全一致，但只作用于单个项目。
属性设置单元格内容的垂直位置（上中下），跟属性的用法完全一致，也是只作用于单个项目。
这两个属性都可以取下面四个值。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）。
如图所示，我们经常使用flex布局,当用space-between时就会出现问题
grid-template-column:repeat(auto-fill,minmax(260px,1fr));
四、b站布局
grid-row:从第几行开始 / 占n-1行
grid-column:1/3从第几列开始，占2列 （1+2=3）
图所示，我们经常使用flex布局，
[外链图片转存中…(img-4K0Cz6w5-45)]
grid-template-column:repeat(auto-fill,minmax(260px,1fr));
四、b站布局
grid-row:从第几行开始 / 占n-1行
grid-column:1/3从第几列开始，占2列 （1+2=3）
到此这篇grid布局阮一峰（gridbaglayout布局）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/42873.html