css3-grid 网格布局

Ammy米
273 阅读6分钟

基本概念

  • 容器（container）:采用网格布局的区域。
  • 项目（item）:容器内部采用网格定位的子元素。
  • 行（row）: 水平区域。
  • 列（column）:垂直区域
  • 单元格（cell）：行和列的交叉区域。比如，3行3列会产生9个单元格。
  • 网格线（grid line）：水平网格线划分出行，垂直网格线划分出列。

容器属性

1、display

  • display: grid指定一个容器采用网格布局。

  • display: inline-grid;默认块级元素,但也可以设成行内元素。

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

2、grid-template-columns ， grid-template-rows 属性

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

  • 值有几个就代表 为几行几列

  • 值可以是 页面可使用的单位值 （如px 、%、vw、calc计算值等）

.container {
  display: grid;
  grid-template-columns: 33px 33.33% 33vw;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
  • 值可以为 repeat(重复的次数，重复的值) 函数：重复某种模式
grid-template-columns: repeat(2, 100px 20px 80px);
  • 值可以是 auto-fill 关键字 有时，单元格的大小是固定的，但是容器的大小不确定。有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
  • 值可以是 fr 关键字 比例关系
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 150px;
}
  • 值可以是 minmax(minValue，maxValue) 函数 ：长度范围
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
  • 值可以是 auto 关键字
grid-template-columns: 100px auto 100px;
  • 网格线的名称 [name] 指定每一根网格线的名字，方便以后的引用
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];

3、grid-row-gap ， grid-column-gap ， grid-gap 属性

grid-row-gap属性设置行与行的间隔（行间距）
grid-column-gap属性设置列与列的间隔（列间距）。
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式。

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap、grid-row-gap、grid-gap。

.container {
  grid-row-gap: 20px;
  grid-column-gap: 30px;
  /*等同于*/
  grid-gap: 20px 30px;
}

.container {
  row-gap: 20px;
  column-gap: 20px;
  gap: 20px;
}

4、grid-auto-flow 属性

子元素排列 顺序

  • row 先行后列 （从左到右 ->从上到下）
  • column 先列后行 (从上到下->从左到右)
  • row dense 有空隙时先填空（先行后列）

image.png

  • column dense 有空隙时先填空（先列后行）

image.png

5、justify-content ， align-content， place-content 属性

整个内容区域在容器里面的位置

  • justify-content水平位置（左中右），- -
  • align-content垂直位置（上中下）。
  • justify-content 简写

    • start - 对齐容器的起始边框。

    • end - 对齐容器的结束边框。

    • center - 容器内部居中。

    • stretch - 项目大小没有指定时，拉伸占据整个网格容器。

    • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

    • space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

    • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

6、justify-items ， align-items ， place-items 属性

单元格内容位置

  • justify-items水平位置（左中右），
  • align-items 垂直位置（上中下）。
  • place-items 是上面两个的简写
    • start：对齐单元格的起始边缘。
    • end：对齐单元格的结束边缘。
    • center：单元格内部居中。
    • stretch：拉伸，占满单元格的整个宽度（默认值）。
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  place-items：start
}

7、grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成

/*`a`到`i`的九个区域，分别对应这九个单元格*/
grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
 /*多个单元格合并成一个区域的写法如下。*/
grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
 /*某些区域不需要利用，则使用"点"（`.`）表示*/
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

比如，区域名为a，则起始位置的水平网格线和垂直网格线叫做a-start，终止位置的水平网格线和垂直网格线叫做a-end。

8、grid-auto-columns 属性， grid-auto-rows 属性

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

  • grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
  • 它们的写法与grid-template-columns和grid-template-rows完全相同。
  • 如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

9、grid-template 属性， grid 属性

  • 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这六个属性的合并简写形式

项目属性

1、grid-column-start ， grid-column-end ， grid-row-start ， grid-row-end 属性

有此属性的元素 会优先决定位置，其他元素在此之后根据规则排列

  • grid-column-start属性：左边框所在的垂直网格线
  • grid-column-end属性：右边框所在的垂直网格线
  • 简写grid-column:<grid-column-start> / <grid-column-end>;
  • grid-row-start属性：上边框所在的水平网格线
  • grid-row-end属性：下边框所在的水平网格线
  • 简写grid-row:<grid-row-start> /<grid-row-end>;
    • 属性值 可为 数字 、网格线的名字。
    • 属性值 可为 span 即左右边框（上下边框）之间跨越多少个网格。
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
  /* 等同于 */
  grid-column：1/3
  grid-row：2/4
  /*斜杠以及后面的部分可以省略，默认跨越一个网格。*/
}

2、 grid-area 属性

  • 指定项目放在哪一个区域。
.item-1 {
  grid-area: e;
}
  • 还可用作 合并简写形式 grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

3、justify-self ， align-self ， place-self 属性

值的用法 与justify-items，aligin-items,palce-items 的一样

  • justify-self属性设置单元格内容的水平位置（左中右） justify-self: start | end | center | stretch;

  • align-self属性设置单元格内容的垂直位置（上中下） align-self: start | end | center | stretch;

  • 简写 place-self: <align-self> <justify-self>;

    • start：对齐单元格的起始边缘。
    • end：对齐单元格的结束边缘。
    • center：单元格内部居中。
    • stretch：拉伸，占满单元格的整个宽度（默认值）。
.item-1  {
  justify-self: start;
  align-self:end;
  /* 等于 */
  place-self：start end;
}
avatar
文章
阅读
粉丝