grid-template 是 grid-template-rows 和 grid-template-columns 的简写,例如:grid-template: 50px 50px / 100px;会创建两个 50px 高的行以及一个100px宽的列。 1.1.1 使用 fr 单位 除了长度和百分比,我们也可以用fr这个单位来灵活地定义网格的行与列的大小。这个单位表示了可用空间的一个比例,类似 flex ...
1.grid-columns-start:number;元素从哪个网格线列开始。 2.grid-columns-end:number;元素到哪个网格线列结束。 3.grid-row-start:元素从哪个网格线行开始; 4.grid-row-end:元素从哪个网格行结束; 1~4这几个属性就相当于设置元素的跨几行、跨几列这样。 下面是我自己写的例子,仅供参考哦: <!DOCTYPE html>...
initial-scale=1.0" /> Document .box { margin: 50px auto; display: grid; grid-template-rows: repeat(2, 50%); grid-template-columns: repeat(2, 50%); width: 300px; height: 200px; border: 5px solid #3333; } .box div { padding: 20px; back...
.container{display:grid;grid-template-columns:100px 400px;grid-template-rows:50px 150px 50px;gap:10px}.header{grid-column:1/3;}.sidebar{grid-column:1/2;}.content{grid-column:2/3;}.footer{grid-column:1/3;} 我们还可以使用负数来指定分隔线,-n就代表倒数第n条网格线。有时候我们不好确定...
display: grid;/* 设置列数 同时设置了列的宽度 */ grid-template-columns: 100px 100px 100px;/* 设置行数 同时设置了行的宽度 如果没有设置行数将会自动根据 元素数量自动设置*/ grid-template-rows: 100px 100px 100px;} .item { border: 1px solid black;} 1 2 3 4 5 6 7 8 ...
.demo{display:inline-grid;grid-template-columns:100px100px;grid-template-rows:100px100px;border:1px solid#eee}.item:nth-of-type(1){background:red;}.item:nth-of-type(2){background:green;}.item:nth-of-type(3){background:purple;} ...
grid-template-columns: 50px 50px 50px; grid-template-rows: 50px 50px 50px; } .item{ font-size: 24px; text-align: center; border: 1px solid #fff; } head 1 2
grid-template-rows 设置行的数量以及大小 .container {display: grid;/* 设置列数 同时设置了列的宽度 */grid-template-columns: 100px 100px 100px;/* 设置行数 同时设置了行的宽度 如果没有设置行数将会自动根据元素数量自动设置*/grid-template-rows: 100px 100px 100px;}.item {border: 1px solid bl...
前端css 经典:grid 栅格布局 前言:flex 是一维布局、grid 是二维布局 1. 容器属性 .container {width: 500px;height: 500px;/* 容器的类型为块元素grid还是行内元素inline-grid */display: grid;border: 1px solid;/* 设置列和列宽:auto-fill,屏幕每行容纳最多的200px的盒子 */grid-template-columns: ...
*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif;}body{height:100vh;margin-top:150px;}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}.item{background:red;padding:20px;color:wheat;margin:10px;} ...