CSS Grid网格入门实例教程: 强大的动态布局


发布者 ourjs  发布时间 1627981382659
关键字 css  Html5 

CSS Grid Layout 是一个二维布局,可以同时处理行和列上的布局。 像表格一样,网格布局让我们能够按行或列来对齐元素。 然而在布局上,网格比表格更可能做到或更简单。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。

基本示例

css grid 基本样式:
  • display: grid/inline-grid 指定一个容器采用网格布局。grid表示这个网络窗口是一个块级元素
  • grid-template-columns 属性定义每一列的列宽,可使用象素,也可以使用百分比。
  • grid-template-rows 属性定义每一行的行高
  • gap 属性是用来设置网格行与列之间的间隙(gutters),该属性是row-gap and column-gap的简写形式。
  • repeat() 可简化重复的值。上面的代码用repeat(),如 grid-template-rows: 33.33% 33.33% 33.33%; 可简化为: grid-template-rows: repeat(3, 33.33%);
下述代表会产生一个2行3列的表格,可更改代码,失去焦点时生效。 效果:
1
2
3
4
5
6

auto

auto 关键字表示自适应宽度。 效果:
1
2
3
4
5
6

auto-fill

如果希望每一行(或每一列)容纳尽可能多的列或者行,可以使用auto-fill关键字 效果:
1
2
3
4
5
6

fr 片段分割

fr 是非常强大的比例分割属性,比如两个 grid-template-columns: 1fr 2fr 3fr; 将容器分成6份,分别占 1/6, 2/6, 3/6 效果:
1
2
3
4
5
6

grid-column / grid-row

grid-column 是 grid-column-start 和 grid-column-end 的合并简写
grid-row 是 grid-row-start 和 grid-row-end 的合并简写,格式如下:
  grid-column: start-line / end-line;
  grid-row: start-line / end-line;
grid-line 网格线从1开始,一个网格会有两条网络线,所以 grid-column: 1 / 3; 和 grid-row: 1 / 3; 分列代表这个单元格占两列两行。 效果:

1
2
3
4
5
6

grid-auto-flow

默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行,grid-auto-flow: column,可以设置成先列后行: 效果:

1
2
3
4
5
6