永久免费的移动建站平台,微信网站开发视频教程,用竹片做的网站,wordpress图片名网格布局在实现页面自适应#xff0c;大屏可视化中常常使用#xff0c;在这篇博客里#xff0c;记录一下网格布局的基本使用。
参考文档#xff1a;网格布局_菜鸟教程 文章目录 1. 体会grid的自适应性2. grid-template-arr配置网格行列3. 网格单位fr与repeat()简写属性值4…网格布局在实现页面自适应大屏可视化中常常使用在这篇博客里记录一下网格布局的基本使用。
参考文档网格布局_菜鸟教程 文章目录 1. 体会grid的自适应性2. grid-template-arr配置网格行列3. 网格单位fr与repeat()简写属性值4. gap属性设置格子间距5. 实现跨行/列合并网格 1. 体会grid的自适应性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlegrid/titlestyle* {padding: 0;margin: 0;}.container {width: 100vw;height: 100vh;background-color: skyblue;}.item {border: 1px solid #ccc;box-sizing: border-box;background-color: tomato;}/style
/head
bodydiv classcontainerdiv classitem1/divdiv classitem2/div div classitem3/divdiv classitem4/divdiv classitem5/divdiv classitem6/divdiv classitem7/divdiv classitem8/divdiv classitem9/divdiv classitem10/divdiv classitem11/divdiv classitem12/div/div
/body
/html以上代码实现了一个占满可视区天蓝色背景的父盒子内放入了12个灰色边框番茄色背景的块级盒子如下图
下面我们将父盒子的display属性设置为grid它就会变成一个网格容器如下代码以及页面结果
.container {width: 100vw;height: 100vh;background-color: skyblue;display: flex; /* 将盒子变为网格容器 */
}可以看到网格容器内的子盒子会自动拉伸以填满网格容器的可用空间父盒子占满可视区因此上图的番茄色子盒子占满了可视区我们可以试试改变浏览器可视区的大小会发现子盒子大小会跟着改变这就是网格布局的自适应性。
2. grid-template-arr配置网格行列
使用属性grid-template-rows/columns可以指定行/列的大小以及网格布局中设置行/列的数量。
其中该属性值的个数表示设置的行数属性值的大小代表行的高度。
下面我们通过代码来体会这两个属性
.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;/* 设置了三行 每行高200px 其余行行高会自适应 */grid-template-rows: 200px 200px 200px;
}上面我们在第一节的基础代码上通过grid-template-rows属性设置了前三行网格每行网格高度200rpx结果如下 可以看到前三行高度都改变成200px而未设置的行都根据可用空间自适应高度了。
下面我们在以上基础上再体会一下grid-template-columns属性。
.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;/* 设置了三行 每行高200px 其余行行高会自适应 */grid-template-rows: 200px 200px 200px;/* 设置了四列 每列宽100px 其余列宽会自适应 */grid-template-columns: 100px 100px 100px 100px;
}以上代码在原先的基础增加了网格列宽和列数设置页面结果如下 综合这两个属性以上代码实现了将12个格子渲染成3行3列的网格布局并且行高200px列高100px。
但是需要注意的是行数和列数的乘积必须等于格子数否则页面会自动忽略grid-template-row/columns属性值的末尾部分属性导致无法得到预想结果。
3. 网格单位fr与repeat()简写属性值
网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。
直接上代码
.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;grid-template-rows: 200px 1fr 1fr; // 使用了1frgrid-template-columns: 100px 100px 100px 100px;
}结果如下 可以看到第二三行格子在第一行定死行高的情况下自动占满了剩余可用空间由于都是设置的1fr因此均分了剩余可用空间。
另外这里介绍一下repeat()方法实现简写属性值。
repeat(行/列数, 行高/列宽)
直接看代码
.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;/* 简写 */grid-template-rows: 200px repeat(2, 1fr);/* 简写 */grid-template-columns: repeat(4, 100px);
}以上使用了repeat()方法简写了属性值但是可以实现跟上面同样的效果如下。
4. gap属性设置格子间距
gap属性可以设置网格之间的间距它是row-gap和 column-gap的简写属性分别使用这两个属性可以设置行和列网格之间的间距。
下面看代码
.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;/* 设置了三行 每行高200px 其余行行高会自适应 */grid-template-rows: 200px repeat(2, 1fr);/* 设置列数和列宽 这里设置了四列 每列宽100px 其余列宽会自适应 */grid-template-columns: repeat(4, 100px);gap: 10px;
}结果如下 可以看到行和列直接的间距都变成了10px。
5. 实现跨行/列合并网格
网格使用grid-row网格行属性实现跨行合并 网格使用grid-column网格列属性实现跨列合并 网格使用grid-area网格区域属性实现跨行列合并。
属性值说明 grid-row/column: span 行/列数 grid-area: span 行数 / span 列数
值的注意的是合并网格必须先删掉被合并的网格。
另外这三个属性都是单个网格使用的而不是放有网格的网格容器使用的跟前面几节的不一样。
下面看代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlegrid/titlestyle* {padding: 0;margin: 0;}.container {width: 100vw;height: 100vh;background-color: skyblue;display: grid;grid-template-rows: 200px repeat(2, 1fr);grid-template-columns: repeat(4, 100px);gap: 10px;}.item {border: 1px solid #ccc;box-sizing: border-box;background-color: tomato;font-size: 30px;font-weight: 600;}.one {/* 这个单元格跨越2列 合并序号1格子合并掉序号2的格子 */grid-column: span 2;}.two {/* 这个单元格跨越2行 序号4的格子合并掉序号8的格子*/grid-row: span 2;}.three {/* 这个单元格跨越2行2列 序号5的格子合并掉序号6、9、10三个格子*/grid-area: span 2 / span 2;}/style
/headbodydiv classcontainerdiv classitem one1/div!-- div classitem2/div --div classitem3/divdiv classitem two4/divdiv classitem three5/div!-- div classitem6/div --div classitem7/div!-- div classitem8/div --!-- div classitem9/divdiv classitem10/div --div classitem11/divdiv classitem12/div/div
/body/html通过自定义类one、two、three分别实现三种情况的格子合并效果如下 使用变量自定义熟悉值 以上就是最常用的grid相关属性了更多内容查看文档网格布局_菜鸟教程
