网站重购,wordpress kickstart,wordpress模版c2c商城,php做电子商城网站网格布局是一个二维布局系统#xff0c;允许开发者以行和列的形式创建灵活的网络#xff0c;并将内容放置在网络的单元格中。有些元素可能只占据网络的一个单元#xff0c;另一些元素则可能占据多行或多列。
网格的大小既可以精确定义#xff0c;也可以根据自身内容自动计… 网格布局是一个二维布局系统允许开发者以行和列的形式创建灵活的网络并将内容放置在网络的单元格中。有些元素可能只占据网络的一个单元另一些元素则可能占据多行或多列。
网格的大小既可以精确定义也可以根据自身内容自动计算。既可以将元素精确地放置到网络的某个位置也可以让其在网格内自动定位。
1 网格的组成部分
将一个DOM元素设置为display:grid; 使其成为一个网格容器它的子元素则变成网格元素。 图 网格布局示意图
网格容器样式设置为display:grid;的元素。
网格元素网格容器下的子元素。
网格线构成了网格的框架一条网格线可以水平或垂直并且有对应编号例如从左到右是从编号1开始。图中数字编号注明的框架线。
网格轨道一个网格轨道是两条相邻网格线之间的空间。例如图中粉色和青色的部分。
网格单元水平和垂直的网格轨道交叉重叠的部分。
网格区域位于两条垂直网格线和两条水平网格线之间由一个或多个网格单元组成。
1.1 网格容器相关属性 display display: grid; 将元素设置为网格容器。 display: inline-grid; 将元素设置为行内块级网格容器。 图 网格容器与行内块级网格容器 grid-template-* grid-template-columns、grid-template-rows: 定义网格容器的轨道大小列或行。同时可以指定轨道数量。可以使用px、fr以及css函数repeat()、minmax()来定义。 grid-template-areas: 用于定义区域名称每个字符串用引号括起来代表网格的一行。 grid-auto-* grid-auto-columns、grid-auto-rows: 定义自动生成的网格轨道行或列的大小。 grid-auto-flow: 自定自动布局的方式可以是行优先(row默认值)或列优先(column)。 还可以设置为dense表示稍后出现较小的网格项时尝试填充网格中较早的空缺。 grid-gap 定义行和列之间的间距。 是grid-row-gap和grid-column-gap的简写.
表 网格容器的相关属性 grid-[column|row]-[start|end] grid-column-start、grid-row-start、grid-column-end、grid-row-end网格项开始结束的网格线编号。 grid-column、grid-row: 是对应start和end的缩写可以使用开始编号/结束编号、开始编号/span 行数列数来指定。 grid-area 指定网格项所占的自定义区域。可以使用grid-template-areas 中定义的区域名称来指定。 order 表示网格项的层叠位置值越小网格项越靠前。
表 网格项目的相关属性 图 网格容器与项目的示意
第2个元素从水平网格线1到水平网格线2从垂直网格线2到垂直网格线4。
第7个元素从水平网格线1开始跨了2行从垂直网格线1到垂直网格线3。
第7个元素与第2个元素有重叠因为第二个元素的order值更大所以其在上面。
注意图中元素的顺序与代码中的顺序不同图中元素1的位置位于元素7和元素2的后面。
1.2 网格线与区域的命名
1.2.1 网格线命名
记录所有网格线的编号很麻烦可以给网格线命名并在布局时使用网格线的名称而不是编号。
1.同一个网格线可以用多个命名
grid-template-columns: [left-start] 1fr 1fr [left-end right-send]1fr [right-start] 1fr;
/*left-start/ left-end 的简写*/
grid-column: left;
2.可以给不同区域命名同一个名称
grid-template-columns: [row] 1fr 1fr [row] 1fr [row];
/*表示第1个叫row的网格线到第3个叫row的网格线 */
grid-column: row 1 / row 3;
1.2.2 区域命名
grid-template-areas: title title . . . . . . .;
grid-area: title;
不同的区域可以同样的命名但是同名区域必须相连。title . title 这样是错误的。
1.3 显式和隐式网格
使用grid-template-*定义网络轨道时创建的是显式网络但是有些网格元素仍然可以放在显式轨道外面此时会自动创建隐式轨道以扩展网络从而包含这些元素。
grid-auto-* 属性为隐式轨道指定大小。
grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
上面两行都是用于创建一个弹性的网格轨道。不同点在于auto-fill与auto-fit。 定义 特点 auto-fill 会尽量填满容器的宽度或高度同时确保每个网格项的大小不小于minmax指定的最小值。 网格项目的数量会根据容器的大小变化而变化。网格项目的大小不会因容器的大小增加而无限拉伸。可能会出现空的网格轨道。 auto-fit 会填满容器的宽度或高度尽可能插入更多的网格项但是能确保每个项目项的大小不小于minmax指定的最小值。 网格项目可能会因为容器的大小增加而拉伸以填充额外的空间。不会出现空的网格轨道。
表 auto-fill 与 auto-fit 的对比 图 auto-fill 与 auto-fit 效果图
当不指定网格上元素的位置时元素会按照其布局算法自动放置。默认情况下布局算法会按元素在按元素在标记中的顺序将其逐列逐行摆放。当一个元素无法在某一行容纳时算法会将它移动到下一行寻找足够大的空间容纳它。
grid-auto-flow 可以控制布局算法的行为。它的初始值时row上面描述的就是这个值的行为。如果值为column按元素在标记中的顺序将其逐行逐列摆放当一个元素无法在某一列容纳算法会将它移动到下一列。 图 布局算法row 与 column的对比
上面布局中网格中出现了空白部分可以在上面属性中加上一个关键字(dense)它让算法紧凑地填满网格里的空白但是可能会改变某些网格元素的顺序。加上这个关键字小元素就会“回填”大元帅造成的空白区域。 图 布局算法加上dense的效果
1.4 对齐
justify-* 是设置水平方向的位置。align-* 是设置垂直方向的位置。 属性 作用于 对齐 常用属性值 justify-items align-items 网格容器 网格区域内的所有元素。 stretch(默认值)网格单元会拉伸以填满整个网格轨道。 start、end、center网格单元对齐到网格轨道起始/结束/居中的位置。 self-start、self-end网格单元对齐到自身的起始/结束(取决于writing-mode和direction等属性)边缘 align-items 还有baseline属性值表示网格单元对齐到它们的基线。 justify-content align-content 网格容器 网格区域内的网格轨道。 start(默认值)、end、center网格区域从容器起始/末尾/居中边缘开始排列。 stretch: 拉伸以填满较少用 space-around: 网格轨道之间的空间相等网格轨道距容器边缘的空间等于轨道之间空间的一半。 space-between: 网格轨道之间的空间相等但网格轨道与容器边缘之间没有空间。 space-evenly: 网格轨道之间、网格轨道与容器边缘之间的空间相等。 justify-self align-self 网格元素 网格区域内的网格元素。 会覆盖justify-items 或align-items的值。 auto: 使用*-item属性的值。 start、end、center: 网格项对齐单元格的起始/结束/居中边缘。 stretch: 默认值。
表 网格内的对齐属性
