学习小程序时学习过Flex布局,Grid和Flex有一些相似,都可以指定容器复杂的排列布局。
容器----container (#app就是容器)
项目----item (.section就是项目)
<div id="app"> <section class="section"></section> <section class="section"></section> <section class="section"></section> </div>
容器里面的水平区域称为"行"(row)
垂直区域称为"列"(column)
行和列的交叉区域,称为"单元格"(cell)
行数*列数=单元格数量
划分网格的线,称为"网格线"(grid line)
水平网格线划分出行,垂直网格线划分出列
正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线
比如三行就有四根水平网格线
1.1 容器属性------display属性
display: grid指定一个容器采用网格布局
#app{ display:grid }
默认情况下,容器元素都是块级元素,但也可以设成行内元素
#app{ display:inline-grid }
#app{ display:grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }
repeat()接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。
#app{ display:grid; grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%); } grid-template-columns: repeat(2, 100px 20px 80px);
每列宽度100px,然后自动填充,直到容器不能放置更多的列
#app{ display:grid; grid-template-columns: repeat(auto-fill, 100px); }
fraction 的缩写,意为"片段"
如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍
#app{ display: grid; grid-template-columns: 1fr 1fr; } //第一列的宽度为150像素,第二列的宽度是第三列的一半 grid-template-columns: 150px 1fr 2fr;
它接受两个参数,分别为最小值和最大值
minmax(100px, 1fr)表示列宽不小于100px,不大于1fr
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
第二列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width
且这个值大于最大宽度。
grid-template-columns: 100px auto 100px;
grid-template-columns属性和grid-template-rows属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用。
#app{ display: grid; grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; }
网格布局允许同一根线有多个名字,比如[fifth-line row-5]
两栏式布局
.wrapper { display: grid; grid-template-columns: 70% 30%; }
十二网格布局
grid-template-columns: repeat(12, 1fr);
#app{ grid-row-gap: 20px; grid-column-gap: 20px; } #app{ grid-gap: 20px 20px; }
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成
grid-template-areas属性用于定义区域
#app { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: 'a b c' 'd e f' 'g h i'; }
grid-auto-flow属性除了设置成row和column
还可以设成row dense和column dense
#app{ justify-items: start | end | center | stretch; align-items: start | end | center | stretch; } place-items: start end;
#app { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; //或者 place-content: space-around space-evenly; }