grid布局属性汇总

属性

关于grid常用的属性，我们可以划分为容器属性和容器成员属性

<!--最外层的<div>元素就是容器，内层的三个<div>元素就是项目。-->
<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

容器属性

display: grid 默认情况下，容器是块级元素
display: inline-grid 容器是行内元素

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

grid-template-columns：用于设置网格布局中的列数及宽度。
grid-template-rows：用于设置网格布局中的行数及高度。
row-gap ：设置行与行的间隔（行间距）
column-gap ：设置列与列的间隔（列间距）
grid-gap ：是grid-column-gap和grid-row-gap的合并简写形式
grid-template-areas：用于定义区域
grid-auto-flow：容器的子元素的顺序排列，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
justify-items：设置单元格内容的水平位置（左中右）
align-items ：设置单元格内容的垂直位置（上中下）。
place-items：align-items属性和justify-items属性的合并简写形式。
justify-content ：整个内容区域在容器里面的水平位置（左中右）
align-content ：整个内容区域的垂直位置（上中下）。
place-content ：align-content属性和justify-content属性的合并简写形式。
grid-auto-columns ：用来设置，浏览器自动创建的多余网格的列宽
grid-auto-rows ：用来设置，浏览器自动创建的多余网格的行高
grid-template：是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
grid：是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

grid-container {
  display: grid|inline-grid;
  grid-template-columns:none(默认)|length(px,%)|repeat(num/auto-fill/auto-fit,length)|fr|minmax(min,max)|auto| [网格线名称] 100px
  grid-template-rows:同上，关键字属性可以混用
  row-gap:0(默认值)|length(px,%)
  grid-gap: <row-gap> <column-gap>;
  grid-template-areas: none|itemnames('a b c')|.(表示没有名称的网格项);
  grid-auto-flow:row(默认值)|columns|dense|row dense|column dense;//row dense按行来填充网格中前面留下的空白
  justify-items:start | end | center | stretch(默认值);
  align-items：同上
  place-items: <align-items> <justify-items>; //如果省略第二个值，则浏览器认为与第一个值相等。
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: 同上
  place-content: <align-content> <justify-content>
  grid-auto-columns:同grid-template-columns写法相同
  grid-auto-rows:同上
  grid-template：none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
}

容器成员属性

下面这些属性都定义在项目上面

grid-column-start ：左边框所在的垂直网格线
grid-column-end ：右边框所在的垂直网格线
grid-row-start ：上边框所在的水平网格线
grid-row-end ：下边框所在的水平网格线
grid-column ：grid-column-start和grid-column-end的合并简写形式
grid-row ：grid-row-start属性和grid-row-end的合并简写形式。
grid-area ：指定项目放在哪一个区域。还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
justify-self ：设置单元格内容的水平位置（左中右），与justify-items属性的用法完全一致，但只作用于单个项目。
align-self ：设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self：是align-self属性和justify-self属性的合并简写形式。

.item-1 {
  grid-column-start: auto(默认)|span n|column-line;//span n指定网格元素将跨越的列数。column-line指定从哪个列上开始显示网格元素。
  grid-column-end:写法同上
  grid-row-start: auto|row-line;//auto按正常顺序排列 row-line 设置第几行开始
  grid-column: <grid-column-start> / <grid-column-start>;
  grid-row: <grid-row-start> / <grid-row-end>;
  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

参考链接：

阮一峰：CSS Grid 网格布局教程 https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

https://www.runoob.com/css3/css-grid.html

书中没有颜如玉

grid布局 属性汇总

容器属性

容器成员属性