本篇内容正是第一大部分最后的内容,关于网格的一些学习总结。
第一个是将标签设置成为网格,将它的 display 属性设置为 grid 即可。
<style> .d1{background:LightSkyBlue;} .d2{background:LightSalmon;} .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} .container { font-size: 40px; width: 100%; background: LightGray; display:grid; } </style> <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </div>
grid-template-columns,为网格添加列,写几个加几个。
<style> .d1{background:LightSkyBlue;} .d2{background:LightSalmon;} .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} .container { font-size: 40px; width: 100%; background: LightGray; display: grid; grid-template-columns:100px 100px; } </style> <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </div>
这样便添加了两个宽度为 100px 的列;
grid-template-rows,为网格添加行,写多少加多少;
<style> .d1{background:LightSkyBlue;} .d2{background:LightSalmon;} .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} .container { font-size: 40px; width: 100%; background: LightGray; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows:100px 100px 100px; } </style> <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </div>
设置宽度有如下单位
1.fr按照比率占据一行或者一列的剩余大小的部分,比如行所剩宽度为30px,一个设置为1fr,另一个设置为2fr,则第二个占20px,第一个占10px;
2.% 3.px
<style> .d1{background:LightSkyBlue;} .d2{background:LightSalmon;} .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} .container { font-size: 40px; width: 100%; background: LightGray; display: grid; grid-template-columns: auto 50px 10% 4fr 1fr; grid-template-rows: 50px 50px; } </style> <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </div>
grid-column-gap:在网格的各个列之间加上一定的间隙。
<style> .d1{background:LightSkyBlue;} .d2{background:LightSalmon;} .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-column-gap: 10px; } </style> <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </div>
grid-row-gap:产生行间距;
<style> .d1{background:LightSkyBlue;} .d2{background:LightSalmon;} .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-row-gap: 5px; grid-column-gap: 5px; } </style> <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </div>
grid-gap:快捷的设置行列间距;
<style> .d1{background:LightSkyBlue;} .d2{background:LightSalmon;} .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap:5px 5px; } </style> <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> <div class="d4">4</div> <div class="d5">5</div> </div>
grid-column 这个属性就和上面的图片有关,用来设置子元素的起始行;
例如 grid-column:1/3 就是从第一行开始到第三行结束全部占用。
<style> .item1{background:LightSkyBlue;} .item2{background:LightSalmon;} .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5 { background: PaleGreen; grid-column:1/3; } .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } </style> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div>
grid-row:控制列的起始,用法和上面一致。
<style> .item1{background:LightSkyBlue;} .item2{background:LightSalmon;} .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5 { background: PaleGreen; grid-column: 2/4; grid-row: 2/4; } .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } </style> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div>
justify-self:用来控制对其的方式;它有四个备选值,stretch center start end
第一个为默认值,全部填充,第二个为剧中,第三个为左对齐,第四个为右对齐;
<style> .item1{ background: LightSkyBlue; justify-self:stretch; } .item2 { background: LightSalmon; justify-self:center; } .item3{ background:PaleTurquoise; justify-self:start; } .item4{ background:LightPink; justify-self:end; } .item5{background:PaleGreen;} .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } </style> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div>
上面的都是对单个元素进行设置,以下两个属性用在容器样式里,对所有的那内容进行设置。
justify-items:水平对齐
align-items:垂直对齐
赋值要求和上面两个相同,实现效果也差不多,就不做演示了。
grid-template-areas:划分区域模块。
效果就是将不同的块划分到不同的区域,每一个 “” 里面就是一行。
使用.()划分空格
<style> .item1{background:LightSkyBlue;} .item2{background:LightSalmon;} .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5{background:PaleGreen;} .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; grid-template-areas: "header header header" "advert content content" "footer footer footer"; } </style> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div>
grid-area:将方格填充到指定区域;
<style> .item1{background:LightSkyBlue;} .item2{background:LightSalmon;} .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5 { background: PaleGreen; grid-area:footer; } .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; grid-template-areas: "header header header" "advert content content" "footer footer footer"; } </style> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div>
grid-area 还有另一种用法,也可以用来实现上面的效果用法如下
grid-area:水平开始/竖直开始/水平结束/竖直结束
<style> .item1{background:LightSkyBlue;} .item2{background:LightSalmon;} .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5 { background: PaleGreen; grid-area: 3/1/4/4; } .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } </style> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div>
如果杨创建很多列的时候,可以使用 repeat(数量, 数值) 这种结构来创建。
<style> .item1{background:LightSkyBlue;} .item2{background:LightSalmon;} .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5{background:PaleGreen;} .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } </style> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div>
minmax(最小数值, 最大数值):使用这种格式可以创建在这个范围内的格;
<style> .item1{background:LightSkyBlue;} .item2{background:LightSalmon;} .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5{background:PaleGreen;} .container { font-size: 40px; min-height: 300px; width: 100%; background: LightGray; display: grid; grid-template-columns: repeat(3, minmax(50px,100px)); grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } </style> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div>
repeat(auto-fill, minmax(XXX,XXX ))
<style> .item1{background:LightSkyBlue;} .item2{background:LightSalmon;} .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5{background:PaleGreen;} .container { font-size: 40px; min-height: 100px; width: 100%; background: LightGray; display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } .container2 { font-size: 40px; min-height: 100px; width: 100%; background: Silver; display: grid; grid-template-columns: repeat(3, minmax(60px, 1fr)); grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } </style> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div> <div class="container2"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div>
repeat(auto-fit, minmax(XXX,XXX ))
<style> .item1{background:LightSkyBlue;} .item2{background:LightSalmon;} .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5{background:PaleGreen;} .container { font-size: 40px; min-height: 100px; width: 100%; background: LightGray; display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } .container2 { font-size: 40px; min-height: 100px; width: 100%; background: Silver; display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; } </style> <div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div> <div class="container2"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> </div>
上面两个属性都是对空间自动安排,当一行所不能够装得下所有的子元素时,就会换行来装子元素;区别就是当一行能够装的下所有的子元素还有剩余,auto-fill 会将剩余的部分空出来,而 auto-fit 则会将剩余空间分配;
网格之中也可以嵌套网格,只需要给子元素增加上网格属性即可。
关于freecodecamp社区教学第一大部分响应式网站的所有总结内容就全部结束了,如有错误还望大家在评论区批评指正;