提供网站建设空间,建筑设计是干嘛的,嘉兴网站设计公司,免费.网站最新域名概述
Grid 布局即网格布局#xff0c;是一种新的 CSS 布局模型#xff0c;比较擅长将一个页面划分为几个主要区域#xff0c;以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案#xff0c;是目前唯一一种 CSS 二维布局
参数配置说明
属性说明可…概述
Grid 布局即网格布局是一种新的 CSS 布局模型比较擅长将一个页面划分为几个主要区域以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案是目前唯一一种 CSS 二维布局
参数配置说明
属性说明可配置选项说明grid-template-rows/grid-template-columns定义行高/列宽px: 固定值%百分比fr: 片段分配剩余空间auto: 先于fr计算获取必要的最小空间repeat: 简化重复值grid-auto-flow定义项目的排列顺序控制排列方向row: 先填入第一行column 先填入第一列row dense: 按行填充空白column dense按列填充空白grid-auto-rows/grid-auto-columns定义多余网格的行高/列宽row-gap/column-gap行间距/列间距gap同时设置行间距和列间距grid-template-areas定义区域布局位置通过grid-area设置某个块处于哪个位置justify-items/align-items设置内部布局相对于容器的水平/垂直位置stretch: 默认值拉伸start: 开始位置center: 居中位置end 结束位置place-itemsalign-items和justify-items的简写同时设置水平和垂直位置配置 参数同上justify-content/align-content设置容器相对于外部区域的水平/垂直位置start: 从行首开始end从行尾开始center: 居中stretch: 拉伸 占满space-around: 剩余空间平均分配space-between: 平均分配行、列间距space-evenly: 所有间距平均分配place-contentalign-content和justify-content的简写配置参数同上grid-row-start/grid-row-end/grid-column-start/grid-column-end每个单元格的位置配置配置标识从第几根网格线开始到第几根网格线结束也可以使用span 标识间隔几根网格线number: 从第几根网格线开始到第几根网格线结束name: 需要先定义网格线span number: 标识跨域几根网格线grid-column/grid-row上面配置的缩写形式1/3 标识从1开始到3结束grid-area缩写形式1/1/3/3 标识行和列都是从1开始到3结束align-self/justify-self单元格内容相对于单元格的水平和垂直位置stretch: 默认值 拉伸start: 开始位置center: 居中位置end 结束位置place-self上面配置的缩写形式配置值同上
