grid布局笔记2
今天的笔记详细讲解grid中的几个属性
- grid-template-columns
- grid-template-rows
- grid-column
- grid-row
直接举例说明
1
2
3
4
5
6
7
8
9
<style>
.grid{
display:grid;
grid-template-columns:120px 5px 120px 5px 120px;
grid-template-rows:auto 5px auto 5px auto;
}
.grid>div{
color:#fff;
text-align:center;
padding:20px;
}
.grid1{
background:#673ab7;
grid-column:1;
grid-row:1;
}
.grid2{
background:#3f51b5;
grid-column:3;
grid-row:1;
}
.grid3{
background:#2196f3;
grid-column:5;
grid-row:1;
}
.grid4{
background:#00bcd4;
grid-column:1;
grid-row:3;
}
.grid5{
background:#4CAF50;
grid-column:3;
grid-row:3;
}
.grid6{
background:#8bc34a;
grid-column:5;
grid-row:3;
}
.grid7{
background:#ffc107;
grid-column:1;
grid-row:5;
}
.grid8{
background:#ff5722;
grid-column:3;
grid-row:5;
}
.grid9{
background:#795548;
grid-column:5;
grid-row:5;
}
</style>
<div class="grid">
<div class="grid1">1</div>
<div class="grid2">2</div>
<div class="grid3">3</div>
<div class="grid4">4</div>
<div class="grid5">5</div>
<div class="grid6">6</div>
<div class="grid7">7</div>
<div class="grid8">8</div>
<div class="grid9">9</div>
</div>
实现的一个9宫格。现在详解这几个属性的作用。
grid-template-columns
grid-template-columns:120px 5px 120px 5px 120px;
指的就是横向分成5份，每个单元格排列是120px 5px 120px 5px 120px; 其中属性可以写成百分比，比如
grid-template-columns:10% 20% 10%
如果单元格布局很规律可以使用repeat(3,33.3%)，就是分成3分，每份33.3%。当前的这个例子可以简写
grid-template-columns:repeat(2,120px 5px) 120px
grid-template-rows
基本和上面一样，它是纵向分割。他们还有个特殊的单位就是fr。就是一个自动计算，和flexbox布局中的flex:1类似。具体写法
grid-template-rows:1fr 1fr
grid-column
grid-column是grid-column-start和grid-column-end的缩写，意思就是这个单元格可以横跨几行
grid-column:1/2
第一个1就是起始位置，第二个就是结束位置，具体看图。
。
可以简写grid-column:1,就是占第一格。此外，还有span的属性。和table中的colspan差不多，就是跨几格。
grid-column:1 / span 1
grid-row
与上面类似，竖跨。
今天到此为止，如果意见不予回复。