-
-
-
-
width:1000px;height:1500px;
display:grid;
grid-tempalte-columns:10% 200px auto 3fr 2fr
w=1000*10%+200px+内容本身宽度,如果没有内容,默认为0
剩下部分1=1000-w*3/5
剩下部分2=1000-w*2/5
grid-template-rows:1fr第一行的高度=1500-剩下行的自动撑开的高度和
一般设置为auto
19:21
-
-
网格轨道(1,2网格线之间),网格单元(四个网格线组成的小单元),网格区域(2个及以上网格单元组成的)
单位:
fr类似于flex比例分布
gr不常用
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
在容器宽度内,auto-fill:可重复自动填充列数,不用像之前那样设定多少列数;auto-fit:有多少个网格项来确定可以有多少网格列
auto-fill、auto-fit要在repeat()中结合其他函数一起使用才有效,一般结合minmax()使用。
07:31
-
-
-
fit-content:与repeat()一样只能用于grid-template-columns/rows。
fit-content(100px):表示最大是100px列宽。
-
本章所讲的grid属性有:
display
grid-template-rows(行高),grid-template-columns(列宽),grid-template-areas。简写:grid-template
grid-row-gad(行间距),grid-column-gad(列间距)。简写:grid-gad(行,列)或gad(行,列)
注:gad 旧低版浏览器不支持
justify-items(水平方向) 和 align-items(垂直方向)
简写:place-items(垂直,水平)
justify-content(水平方向) 和 justify-content(垂直方向)
简写:place-content(垂直,水平)
grid-auto-rows,grid-auto-columns,grid-auto-flow(自动布局算法的工作方式)。
grid-auto:用于指定自动生成的网格轨道(也叫隐式网格轨道)的大小。
隐式网格轨道:指超出指定网格范围的行/列时被创建的轨道。
-
-
-
举报