宁波建工,潍坊优化公司,个人网页制作简单方法,网站模板文件在哪里下载网格布局
网格布局#xff08;Grid#xff09;是将网页划分成一个个网格单元#xff0c;可任意组合不同的网格#xff0c;轻松实现各种布局效果#xff0c;也是目前CSS中最强大布局方案#xff0c;比Flex更强大。 基本概念
容器和项目
当一个 HTML 元素将 display 属性…网格布局
网格布局Grid是将网页划分成一个个网格单元可任意组合不同的网格轻松实现各种布局效果也是目前CSS中最强大布局方案比Flex更强大。 基本概念
容器和项目
当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid设成行内元素 后它就变成了一个网格容器container这个元素的所有直系子元素将成为网格元素称为项目item。
.box { display: grid | inline-grid;
}设为网格布局以后容器子元素项目的float、display: inline-block、display: table-cell、vertical-align等设置都将失效。
行和列
容器里面的水平区域称为行row垂直区域称为列column。
网格线
划分网格的线称为网格线grid line。水平网格线划分出行垂直网格线划分出列。 正常情况下n行有n 1根水平网格线m列有m 1根垂直网格线比如三行就有四根水平网格线。 单元格
行和列的交叉区域称为单元格cell。 正常情况下n行和m列会产生n x m个单元格。比如3行3列会产生9个单元格。 图示中绿的背景为4个单元格单元格各自有一个项目item。 注意需要区分单元格和项目元素比如一个3*3的九宫格项目元素不一定就是9个项目元素个数由开发者决定。
容器属性
grid-template-columns、 grid-template-rows
grid-template-columns属性定义每一列的列宽grid-template-rows属性定义每一行的行高
固定值 px
.container {display: grid;grid-template-columns: 50px 100px 50px;grid-template-rows: 50px 100px 50px;
}百分比 %
.container {display: grid;grid-template-columns: 25% 25% 25% 25%;grid-template-rows: 50% 50%;
}repeat()
重复写同样的值非常麻烦尤其网格很多时。可以使用repeat()函数简化重复的值。
将上面的代码用repeat()改写如下
.container {display: grid;grid-template-columns: repeat(4,25%);grid-template-rows: repeat(2,50%);
}repeat()接受两个参数
参数一重复的次数上例分别是列为4行为2参数二重复的值。
repeat()重复某种模式也是可以的。
.container {display: grid;grid-template-columns: repeat(2, 40px 60px 80px);grid-template-rows: repeat(2,50%);
}上述代码是将列宽为40px、60px、80px重复2次行高2行等分容器的高度。
fr 为了方便表示比例关系网格布局提供了fr关键字fraction 的缩写意为片段。
.container {width: 300pxdisplay: grid;grid-template-columns: 1fr 2fr 1fr;
}同时fr可以与绝对长度的单位结合使用这时会非常方便。
.container {width: 300pxdisplay: grid;grid-template-columns: 1fr 100px 2fr
}上面代码表示第二列的宽度为固定的100px第三列的宽度是第一列的2倍。
minmax() minmax()函数产生一个长度范围表示长度就在这个范围之中。它接受两个参数分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);上面代码表示第三列的宽度不小于100px不大于1fr。 6. auto auto关键字表示由浏览器自己决定长度。
.container {width: 300pxdisplay: grid;grid-template-columns: 50px auto 50px;
}上面代码中第二列的宽度为容器宽度除第一、第三列的总宽度外所占最大的宽度除非单元格内容设置了min-width且这个值大于最大宽度。
auto-fill、auto-fit auto-fill 与 auto-fit 直译为 自适应 与 自填充一般用来实现自适应布局的。
.container {display: grid;grid-template-columns: repeat(auto-fill, 100px);
}auto-fill If the grid container has a definite or maximal size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container. 如果网格容器在相关轴上具有确定的大小或最大大小则重复次数是最大可能的正整数不会导致网格溢出其网格容器。
.container {width: 400px;display: grid;grid-template-columns: repeat(auto-fill, minmax(200px , 1fr));
}auto-fit Behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed。 行为与 auto-fill 相同除了放置网格项目后所有空的重复轨道都将消失。简单来说就是如果元素数量不够放满一行则 auto-fit 会将元素平铺铺满一行。
.container {width: 400px;display: grid;grid-template-columns: repeat(auto-fit, minmax(200px , 1fr));
}网格线名称 grid-template-columns属性和grid-template-rows属性里面还可以使用方括号指定每一根网格线的名字方便以后的引用。
.container {display: grid;grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
}上述代码表示 3*3 的九宫格4根垂直的网格线的名称分别是c1、c2、c3、c44根水平的网格线名称分别是r1、r2、r3、r4。 同时网格布局允许同一根线有多个名字比如
grid-template-columns: [c1 c11 c111] 100px [c2 c22] 100px [c3] 100px [c4];
