Wix

# 容器本身的属性

# display

  • grid：块级盒子
  • grid-inline：行级盒子

# grid-template-cloumns,grid-template-rows

  • 100px 1fr：fr可以自适应剩下的空间
  • repeat()：重复次数repeat(3, 33.33%)
  • auto-fill：单元格固定大小，容器不确定，但尽可能容纳多的单元repeat(auto-fill, 100px)
  • minmax()：长度范围的最小值和最大值minmax(100px, 1fr)
  • auto：由浏览器自己决定长度

# grid-gap <grid-row-gap> <grid-row-gap>

  • 行间距、列间距

# grid-template-areas

自行设定位置

.contain{
  grid-template-areas:
    "fw . . . ."
    "dz rz yyr zs jl"
    "lx rz yyr zs jl"
    "cc . . . .";
}
.fw {
    grid-area: fw;
    color: gray;
}
.dz {
    grid-area: dz;
}
.lx {
    grid-area: lx;
}
.cc {
    grid-area: cc;
}
.rz {
    grid-area: rz;
}
.yyr {
    grid-area: yyr;
}
.zs {
    grid-area: zs;
}
.jl {
    grid-area: jl;
}

# grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行。

  • column：先列后行
  • row ：先行后列
  • row dense：紧密填满，尽量不出现空格

# justify-items(水平),align-item(垂直),place-items(结合)

项目的子元素在项目这个容器的位置

img

  • start：项目的内容对齐起始边缘
  • end：项目内容对齐结尾边缘
  • center：项目内容居中
  • stretch：项目内容拉伸

# justify-content,align-content,palce-content

所有项目占容器的位置

img

  • start：对齐容器的起始边框
  • end：对齐容器末尾边框
  • center：容器内部居中
  • stretch：拉伸占满
  • space-around：每个项目两侧间隔相等，项目之间的间隔比项目容器的间隔大一倍
  • space-between：项目之间间隔相等，项目与容器无间隔
  • space-evenly：项目之间、项目与容器之间间隔相等

# grid-auto-columns,grid-auto-rows

一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。该属性指定多出来项目的大小

img

# 设置项目属性

# grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}

img

# grid-column,grid-row

grid-column:1/3等同于grid-column-start:1,grid-clumn-end:3

# justify-self 属性， align-self 属性， place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

#