网站建设 软件开发的公司哪家好,装修图片大全,wordpress登录页面背景图片尺寸,七牛云 微信 打开 wordpress比Flex更强大的Grid网格布局 什么是 Grid 布局浏览器兼容性Flex 兼容性更好Grid 看需求选择 基本概念容器属性grid-template-columns 划分列grid-gap / grid-column-gap 间距justify-items(水平方向) / align-items(垂直方向) 单元格内容的对齐方式justify-content(水平方向) /… 比Flex更强大的Grid网格布局 什么是 Grid 布局浏览器兼容性Flex 兼容性更好Grid 看需求选择 基本概念容器属性grid-template-columns 划分列grid-gap / grid-column-gap 间距justify-items(水平方向) / align-items(垂直方向) 单元格内容的对齐方式justify-content(水平方向) / align-content(垂直方向) 整个内容区域的对齐方式 项目属性占单元格从 grid-column-start / grid-row-start 到 grid-column-end / grid-row-endjustify-self(水平方向) / align-self(垂直方向) 项目对齐方式 什么是 Grid 布局
相信写过前端对齐布局的前端都知道 Flex 布局它是一种轴线布局指定“项目”针对轴线的位置针对行对齐、列对齐居中对齐、两端对齐这些布局场景使用 Flex 布局是一种非常常见且高效的方法。Grid 布局则是将容器分成“行”和“列”产生单元格然后指定“项目”所占的单元格远比 Flex 布局更强大。
浏览器兼容性
Flex 兼容性更好 Grid 看需求选择 基本概念
跟 Flex 布局类似Grid 也有两种属性容器属性和项目属性。
div classwrapdiv classbox box11/divdiv classbox box22/divdiv classbox box33/divdiv classbox box44/divdiv classbox box55/divdiv classbox box66/divdiv classbox box77/divdiv classbox box88/divdiv classbox box99/divdiv classbox box1010/divdiv classbox box1111/divdiv classbox box1212/divdiv classbox box1313/divdiv classbox box1414/divdiv classbox box1515/div
/div:root{--wrapSize: 400px;
}
.wrap {display: grid;grid-template-columns: repeat(2, 100px);margin: 30px auto;width: var(--wrapSize);height: var(--wrapSize);border: 1px solid green;
}
.box{text-align: center;font-weight: bold;
}容器属性
grid-template-columns 划分列 固定列 100px“项目”会自动撑满容器高度 当容器宽度未知时repeat(xx, 100px) 第一个参数将无法得知可以使用 repeat(auto-fill, 100px) 它会自动以一列 100px 宽度显示若容器宽度400就展示4列若容器宽度500就展示5个无需手动计算设置。 设置不同列为不同宽度
四列宽度分别为 100px 150px 50px 100px
grid-template-columns: 100px 150px 50px 100px;比例片段 fr(fraction)
列宽分成7份各列占比为 1:3:2:1
grid-template-columns: 1fr 3fr 2fr 1fr;长度范围 minmax() grid-template-columns: 3fr minmax(150px, 1fr);浏览器自动分配 auto
grid-template-columns: 100px auto 100px;grid-gap / grid-column-gap 间距
grid-row-gap: 10px;
grid-column-gap: 10px;简写方式
grid-gap: 10px;justify-items(水平方向) / align-items(垂直方向) 单元格内容的对齐方式 简写方式
place-items: stretch stretch;justify-content(水平方向) / align-content(垂直方向) 整个内容区域的对齐方式 项目属性
占单元格从 grid-column-start / grid-row-start 到 grid-column-end / grid-row-end
合并单元格行或列
.box1{grid-column-start: 1;grid-column-end: 3;
}简写方式
grid-column: 1/3;合并单元格区域
.box1{grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 3;
}简写方式
grid-area: 1/1/3/3;justify-self(水平方向) / align-self(垂直方向) 项目对齐方式 简写方式
place-self: stretch;
