/* 指定起始行,结束行,起始列,结束列 */.child:first-child {grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:3;background: red; }/* 使用缩写形式 */.child:nth-child(2) {grid-row:2/3;grid-column:2/4;background: yellow; }/* 直接指定区域名 */.child:nth-child...
.width{width:var(--width);}.percentage{width:var(--percentage);}.min-content{width:min-content;}.max-content{width:max-content;}.fit-content{width:fit-content(20em);} Demo 地址:https://codepen.io/airen/full/eYmePdd 从上面的示例可以看出,使用width属性设置宽度时: 如果使用...
.child:first-child { grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3; background: red; } 有了网格大小的控制,我们还需要位置的控制。默认情况下,子元素都是先将行填充满,容器大小不够的时候才会生成新的隐式行。如果要改变这一默认行为,我们需要使用grid-auto-flow...
grid-template-columns和grid-template-rows:用于定义网格的列和行的大小。 grid-template-columns 属性设置列宽 grid-template-rows 属性设置行高 .wrapper{display:grid;/* 声明了三列,宽度分别为 200px 200px 200px */grid-template-columns:200px200px200px;grid-gap:5px;/* 声明了两行,行高分别为 50px 5...
.child:first-child { grid-row-start:1; grid-row-end:2; grid-column-start:1; grid-column-end:3;background:red;} 有了网格大小的控制,我们还需要位置的控制。默认情况下,子元素都是先将行填充满,容器大小不够的时候才会生成新的隐式行。假如要改变这一默认行为,我们需要使用grid-auto-flow属性来控制...
.child:first-child{grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:3;background:red;} image.png 有了网格大小的控制,我们还需要位置的控制。默认情况下,子元素都是先将行填充满,容器大小不够的时候才会生成新的隐式行。如果要改变这一默认行为,我们需要使用grid-auto-flow属性来...
auto-fill:表示自动填充,让一行(或者一列)中尽可能的容纳更多的单元格。 grid-template-columns:repeat(auto-fill,200px) 表示列宽是 200 px,但列的数量是不固定的,只要浏览器能够容纳得下,就可以放置元素。 fr:片段,为了方便表示比例关系。 grid-template-columns:200px1fr2fr ...
grid 是 grid-template-rows、grid-template-columns 和 grid-template-areas 三个属性的简写。 使用方式如下: .grid { grid-template: "header header header" 80px "nav article article" 600px / 100px 1fr; } 1. 2. 3. 4. 5. 6. 你可以像平时那样去定义模板区域,将每行的宽度放在最右面,最后再把...
.container{display:gird;grid-template-columns:repeat(auto-fill,100px);gird-template-rows:repeat(3,100px);} (3) fr 关键字 为了方便表示比例关系,网格布局提供了 fr 关键字(fraction的缩写,意为“片段”)。如果两列的宽分别为 1fr 和 2fr,就表示后者是前者的两倍。
与auto-fill的行为相同,只是在放置网格项后,任何空的重复轨道都会折叠。 代码语言:javascript 复制 #container{display:grid;grid-template-columns:repeat(2,50px 1fr)100px;grid-gap:5px;box-sizing:border-box;height:200px;width:100%;background-color:#8cffa0;padding:10px;}#container>div{background-...