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布局）分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/39966.html