南京网站优化公司,注册网站免费注册邮箱,24小时在线更新视频高清免费观看,盐城网站建设多少钱文章目录 grid概念容器和项目网格轨道#xff1a;网格单元网格线 使用分配item空间大小对于子元素的意义 行列指定隐式和显示网格默认排列 grid容器属性grid-template-rows: 100px 100px 200px;grid-template-columns: 100px 100px 100px;grid-auto-rows: 200pxgrid-column-ga… 文章目录 grid概念容器和项目网格轨道网格单元网格线 使用分配item空间大小对于子元素的意义 行列指定隐式和显示网格默认排列 grid容器属性grid-template-rows: 100px 100px 200px;grid-template-columns: 100px 100px 100px;grid-auto-rows: 200pxgrid-column-gap: 10pxgrid-row-gap: 10pxgrid-template-areasgrid-auto-flowplace-itemsplace-content指定行列的数据 grid元素属性grid-column-start: 1grid-column-end: 3grid-row-start: 1grid-row-end: 3place-self 注意子元素内容撑开grid网格解决方法 grid-gap设置导致内容溢出grid格子与padding移动端使用grid栅格元素高度为整个grid容器高度 grid
网格布局flex是一维的grid是二维的。 和flex一样grid的概念也有三个一个是整体的容器一个是格子一个是格子中存放的元素(也就是grid子元素)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PSARlw6i-1692416147621)(./images/grid.png)]
概念
容器和项目
在元素上声明 displaygrid 或 displayinline-grid 来创建一个网格容器。这个元素的所有直系子元素将成为网格项目。
网格轨道
grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行垂直区域称为列。
网格单元
一个网格单元是在一个网格元素中最小的单位 从概念上来讲其实它和表格的一个单元格很像。
网格线
划分网格的线称为网格线。应该注意的是当我们定义网格时我们定义的是网格轨道而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。 m 列有 m 1 根垂直的网格线n 行有 n 1 跟水平网格线。 一般而言是从左到右从上到下123 进行编号排序。当然也可以从右到左从下到上按照 -1-2-3…顺序进行编号排序
使用
display: griddisplay: inline-grid 理解参考flex 当一个父元素使用grid显示它内部就是grid子元素。
分配item空间大小对于子元素的意义
指定grid的大小指定的大小是整个元素的所有区域(包括margin)
行列指定
隐式和显示网格
显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西或者因为内容的数量而需要的更多网格轨道的时候网格将会在隐式网格中创建行和列; 假如有多余的网格也就是上面提到的隐式网格那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性浏览器完全根据单元格内容的大小决定新增网格的列宽和行高
默认排列
默认布局就是常规布局item由内部元素内容撑开。
grid容器属性
grid-template-rows: 100px 100px 200px;
指定几个就是指定几行数值指定的行的高度
grid-template-rows: repeat(10, 100px); 指定10个100pxgrid-template-rows: repeat(autofill, 100px); 每列100px自动填充完毕父元素宽度grid-template-rows: 1fr 1fr 2fr; fraction – 分数就是按比例对父元素进行分配grid-template-rows: repeat(4, 1fr); 平均分为4份 网格线可以进行命名命名之后就可以在原本使用网格线索引的位置直接使用自定义命名的网格线。grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; 可以指定的值100px 固定值1fr 相当比例auto 自动扩充minmax() 最大最小范围auto-fill 列数量、行数量自适应repeat() 重复几个数字 repeat(auto-fill, 100px);
grid-template-columns: 100px 100px 100px;
指定几个就是指定几列数值指定的是列的长度
grid-auto-rows: 200px
当没有指定行方向的
auto 内容撑开
grid-column-gap: 10px
列与列之间单元格的间隔
grid-row-gap: 10px
行与行之间单元格的间隔
grid-template-areas
定义区域定义完毕后可以在网格元素使用grid-area中引用区域 grid-template-areas: a b ca b ca b c;定义单元格区域匿名区域使用.表示 区域的命名会影响到网格线每个区域的起始网格线会自动命名为区域名-start终止网格线会自动命名为区域名-end
grid-auto-flow
划分网格后容器的子元素会按照顺序自动放置在每一个网格
row 该关键字指定自动布局算法按照通过逐行填充来排列元素在必要时增加新行。如果既没有指定 row 也没有 column则默认为 row。column 该关键字指定自动布局算法通过逐列填充来排列元素在必要时增加新列。dense 该关键字指定自动布局算法使用一种“稠密”堆积算法如果后面出现了稍小的元素则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白但同时也可能导致原来出现的次序被打乱。
place-items
justify-items 单元格中元素水平方向的对齐方式align-items 单元格中元素垂直方向的对齐方式start | end | center | stretch 上、中、下、拉伸
place-content
指定整个内容区域的排布方式
justify-contentalign-contentstart | end | center | stretch | space-around | space-between | space-evenly;
指定行列的数据
100px 固定像素1fr 按比例分配minmax(100px, 1fr) 指定最大最小值auto 由浏览器决定大小直接将剩余空间占据
grid元素属性
grid-column-start: 1
规定从哪一列开始显示项目或者跨越多少列
grid-column-end: 3
规定在哪一条列线column-line上停止显示项目或跨越多少列。
grid-row-start: 1
grid-row-end: 3
指定的是网格线指定元素占据网格范围网格线索引从1开始 简写
grid-column: 1 / 3grid-row: 1 / span 2负数为网格从后往前数的位置
place-self
justify-selfalign-self
注意
子元素内容撑开grid网格
当网格高度或者宽度设置为fr或者auto的时候当子元素高度或者宽度超过了网格设置子元素会将网格撑开
解决方法
将网格宽度或者高度设置为px、百分比但是此时不能设置grid-gap设置之后就会出现子元素内容溢出的问题网格中的元素设置overflow: hidden 网格元素设置width: 100%; height: 100%; overflow: hidden之后如果子元素越界可以将对应的子元素设置为width: 100%; height: 100%; overflow: auto这样就可以通过滑动进行子元素全部内容查看
grid-gap设置导致内容溢出
此时要留意gird-template-rows或者gird-template-columns的设置是不是用的百分比或者固定数值如果是的话那么设置grid-gap就可能会造成内容溢出就百分比而言grid整体长度和宽度是先计算百分比后叠加grid-gap此时可以使用fr的形式这种情况下会刨除grid-gap后再去计算fr这样就可以避免内容溢出
grid格子与padding
grid格子分配的是grid元素content内容区的区域因此如果当子元素超过grid单元格的时候就会出现滚动条(overflow: auto)而滚动条会紧贴grid格子可以通过设置padding来分隔开这两部分看起来会更舒服。
移动端使用grid栅格元素高度为整个grid容器高度
这个要排查一下grid元素是否有设置display: grid没哟设置改属性即使设置了grid-template-rows然后grid栅格元素中设置了height: 100%之后栅格子元素的高度就会直接为grid元素的高度而不是栅格的高度。
