之前,总是想学grid二维布局,介于浏览器兼容性不好以及grid的难度太大,所以很少用,就一直往后放。近期,被朋友又问起grid的一些用法,发现自己也不是很确定,就准备静下来,学一学这个“GFC- 网格块级格式化布局方式。
Grid网格布局常用属性大全及用法-Qui-Note
之前,网站也整理过关于gird的相关知识:css中的渲染规则:Formatting context,你100%用过它,可惜你不知道!,但是没有这篇详细!

Grid基本知识

1.单元格:n行和m列会产生n * m个单元格

Grid网格布局常用属性大全及用法-Qui-Note

2.网格线:n行有n + 1根水平网格线;m列有m + 1根垂直网格线

3.单元格大小:
grid-template-columns 列宽   grid-template-rows 行高
实例练习:https://course.51qux.com/grid_cell

4.间距:grid-gap,是grid-column-gap(行间距)和grid-row-gap(列间距)的合并简写形式
实例练习:https://course.51qux.com/gap

5.区域:grid-template-areas

Grid网格布局常用属性大全及用法-Qui-Note

6.横竖排版切换:grid-auto-flow,默认(row)先行后列;grid-auto-flow: column 变成"先列后行"

Grid网格布局常用属性大全及用法-Qui-Note

7.设置单元格内容对齐方式

  • justify-items 属性,设置单元格内容的水平位置
  • align-items 属性,设置单元格内容的垂直位置
  • place-items 属性,是align-items属性和justify-items属性的合并简写

justify-items | align-items | place-items : start | end | center | stretch;

三者参数都一样。

Grid网格布局常用属性大全及用法-Qui-Note

更多效果:

Grid网格布局常用属性大全及用法-Qui-Note

8.设置整个内容区域在容器的位置

  • justify-content 属性,整个内容区域在容器里面的水平位置
  • align-content 属性,整个内容区域的垂直位置
  • place-content 属性,place-content属性是align-content属性和justify-content属性的合并简写
justify-content : start | end | center | stretch | space-around | space-between | space-evenly;

三者参数都一样。

Grid网格布局常用属性大全及用法-Qui-Note

其他对齐效果:

Grid网格布局常用属性大全及用法-Qui-Note

9.指定子元素内容对齐方式

  • justify-self 属性,设置单元格内容的水平位置
  • align-self 属性,设置单元格内容的垂直位置
  • place-self 属性,是align-self属性和justify-self属性的合并简写

justify-self: start | end | center | stretch;

三者参数都一样。

Grid网格布局常用属性大全及用法-Qui-Note

10.创建隐式grid网格

  • grid-auto-columns 属性,创建网格的列宽
  • grid-auto-rows 属性,创建网格的行高

区别在于:grid-auto-rows/columns 可以创建空白的占位空间 ;即便元素超过了grid的布局,后面的也会按照指定的列宽和行高进行布局。

Grid网格布局常用属性大全及用法-Qui-Note

11.单元格定位

  • 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网格布局常用属性大全及用法-Qui-Note

grid-area属性,指定项目放在哪一个区域;还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写,直接指定项目的位置。

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