grid布局

sheep筱孜
395 阅读6分钟

容器和项目

<!-- 最外层的叫容器 -->
<div class="container">
  <!-- 容器的直接子元素叫项目 -->
  <div class="item"><p>1</p></div>
  <div class="item"><p>2</p></div>
  <div class="item"><p>3</p></div>
</div>

容器属性

display(布局方式)

/* 使用grid布局
 * 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效
*/
display: inline-grid; // 行内元素
display: grid; // 块级元素

grid-template-columns,grid-template-rows(项目宽高)

/* 依次定义每一列的列宽 */
grid-template-columns: 100px 100px 100px;
/* 依次定义每一行的行高 */
grid-template-rows: 100px 100px 100px;

image.png

1. repeat(重复)

/* 参数1(重复的次数),参数2(要重复的值) */
grid-template-columns: repeat(3, 33.33%);
/* 参数1(重复的次数),参数2(重复的模式) */
grid-template-columns: repeat(2, 100px 20px 80px);

image.png

2. auto-fill(自动填充)

/* 每个项目列宽100px自动填充,直到一行撑不下了就换行 */
grid-template-columns: repeat(auto-fill, 100px);

3. fr(占比)

/* 类似flex布局 */
grid-template-columns: 1fr 2fr;
/* fr配合px(固定宽度)一起使用 */
grid-template-columns: 150px 1fr 2fr;

4. minmax(范围)

/* 表示一个范围(最小值, 最大值) */
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

5. auto(类似1fr)

/* 基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度 */
grid-template-columns: 100px auto 100px;

6. 网格线的名称

/* c1、c2...: 网格线的名称 */
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
/* r1、row-1: 同一根线可以有多个名字 */
grid-template-rows: [r1 row-1] 100px [r2] 100px [r3] auto [r4];

grid-row-gap,grid-column-gap,grid-gap(间距)

最新标准，grid-前缀已经删除，写成row-gap,column-gap,gap

/* 设置行与行的间隔（行间距） */
grid-row-gap: 20px;
/* 设置列与列的间隔（列间距） */
grid-column-gap: 20px;
/* grid-row-gap,grid-column-gap的简写 */
/* 参数2不写,默认和参数1的值一样 */
grid-gap: <grid-row-gap> <grid-column-gap>;

image.png

grid-template-areas(单元格命名与划分)

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

/* 给每个单元格命名 */
grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';
/* 划分区域: 将9个单元格分成a、b、c三个区域 */
grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
/* 某些不需要利用的区域,则使用"点"（.）表示 */
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

grid-auto-flow(项目排列顺序)

/* 默认值为row: 项目由`先行后列`排列 */
/* column: 项目由`先列后行`排列 */
grid-auto-flow: column;

image.png

1. grid-auto-flow: row;(先行后列)

image.png

2. grid-auto-flow: row dense(先行后列,紧密填满)

表示"先行后列"，并且尽可能紧密填满，尽量不出现空格 image.png

3. grid-auto-flow: column dense(先列后行,紧密填满)

表示"先列后行"，并且尽量填满空格 image.png

justify-items,align-items,place-items(单元格内容位置)

  • start：对齐单元格的起始边缘
  • end：对齐单元格的结束边缘
  • center：单元格内部居中
  • stretch：拉伸，占满单元格的整个宽度（默认值）
/* 设置单元格内容的水平位置（左中右） */
justify-items: start | end | center | stretch;
/* 设置单元格内容的垂直位置（上中下） */
align-items: start | end | center | stretch;
/* justify-items,align-items的简写 */
/* 参数2不写,默认和参数1一样 */
place-items: <align-items> <justify-items>;

1. justify-items: start(水平位置)

image.png

2. align-items: start(垂直位置)

image.png

justify-content,align-content,place-content(容器内容位置)

/* 整个内容区域在容器里面的水平位置（左中右） */
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
/* 整个内容区域在容器里面的垂直位置（上中下） */
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
/* justify-content,align-content的简写 */
/* 参数2不写,默认和参数1一样 */
place-content: <align-content> <justify-content>

1. start(对齐容器的起始边框)

image.png

2. end(对齐容器的结束边框)

image.png

3. center(容器内部居中)

image.png

4. stretch(拉伸占据整个容器)

项目大小没指定时，拉伸占据整个网格容器 image.png

5. space-around(项目两侧的间隔相等)

每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍 image.png

6. space-between(项目与项目的间隔相等)

项目与项目的间隔相等，项目与容器边框之间没有间隔 image.png

7. space-evenly(项目与项目的间隔相等,包括两侧)

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

image.png

grid-auto-columns,grid-auto-rows(自动宽高)

/* 前三行高度都是100px */
grid-template-rows: 100px 100px 100px;
/* 第三行之后未设置高度的行的高度都为50px */
grid-auto-rows: 50px;

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的合并简写

项目属性

grid-column-start,grid-column-end,grid-row-start,grid-row-end(指定项目位置)

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。 使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

  • grid-column-start：左边框所在的垂直网格线
  • grid-column-end：右边框所在的垂直网格线
  • grid-row-start：上边框所在的水平网格线
  • grid-row-end：下边框所在的水平网格线

1. 数字: 表示第几根网格线

.item-1 { /* 1号项目 */
  /* 指定左边框在第2根垂直网格线 */
  grid-column-start: 2;
  /* 指定右边框在第4根垂直网格线 */
  grid-column-end: 4;
}

image.png

2. 网格线的名字

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

3. span关键字

表示"跨越"，即左右边框（上下边框）之间跨越多少个网格

.item-1 {
  /* grid-column-end: span 2; */
  /* 与上行代码效果一致 */
  grid-column-start: span 2;
}

image.png

grid-column,grid-row(简写)

/* grid-column-start,grid-column-end的简写 */
grid-column: <start-line> / <end-line>;
/* grid-row-start,grid-row-end的简写 */
grid-row: <start-line> / <end-line>;

grid-column: 1 / 3;
grid-column: 1 / span 2;
/* 斜杠以及后面的部分可以省略，默认跨越一个网格 */
grid-column: 1;

grid-area(指定项目放在哪个区域)

/* 指定项目放在哪个区域 */
grid-area: e;
/* grid-row-start、grid-column-start、grid-row-end、grid-column-end的简写 */
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

justify-self,align-self,place-self

  • start：对齐单元格的起始边缘
  • end：对齐单元格的结束边缘
  • center：单元格内部居中
  • stretch：拉伸，占满单元格的整个宽度（默认值）
/* 设置单元格内容的水平位置（左中右），跟`justify-items`属性的用法完全一致，但只作用于单个项目 */
justify-self: start | end | center | stretch;
/* 设置单元格内容的垂直位置（上中下），跟`align-items`属性的用法完全一致，也是只作用于单个项目 */
align-self: start | end | center | stretch;
/* align-self,justify-self的简写 */
/* 参数2不设置,默认和参数1一样 */
place-self: <align-self> <justify-self>;

例子 css .item-1 { justify-self: start; } image.png

来源

阮一峰: CSS Grid 网格布局教程

avatar
文章
阅读
粉丝