12-Grid布局

移动 web 开发——grid 布局

1.0 grid 布局

1.1 容器属性

• 当元素设置了网格布局，column、float、clear、vertical-align属性无效。

1.1.1 grid-template-*属性的含义：

• grid-template-columns: 100px 100px; 有多少列
• grid-template-row: 100px 100px; 有多少行
  如果只设置列，那么行就会自动填充；如果只设置行，那么列就会自动填充
• grid-template-row: repeat(3,100px); 三行，每行 100px
• grid-template-row: repeat(auto-fill,100px); 自动填充，在行上面，不固定个数，随着窗体变化而变化
• grid-template-row: repeat(3,1fr);分 3 份等分
• grid-template-row: 1fr 2fr 3fr; 分 3 份按比例划分
• grid-template-row: 1fr minmax(150px 3fr); 最小值 最大值
• grid-template-row: 100px auto 100px; 中间自适应
• grid-template-row: 100px [c1] 100px [c2] 100px [c3]; 添加网格线，帮助定位用
• min-content列显示一个单词的宽度，max-content列扩展以适应句子的展示。

1.1.2 *-gap 设置行、列间的间距

• 之前是 grid-row-gap, grid-column-gap
• row-gap 行的间距
• column-gap 列的间距

1.1.3 grid-template-areas 单元格所属区域

• 一个区域由单个或多个单元格组成，由你决定（具体使用，需要在项目属性中设置）区域
• 区域不需要利用，则用 “.” 表示
• 区域的命名会影响到网格线，每个区域的起始网格线会自动命名为区域名-start，终止网格线会自动命名为区域名-end.

grid-template-areas:'a b c ' ' d e f' ' g h i'
grid-template-areas:'a a a ' ' b b b ' ' g h i';
grid-template-areas:'a . a ' ' b . b ' ' g . i';

1.1.4 ：grid-auto-flow 容器的子元素顺序

• 划分网格后，容器的子元素会按照顺序，自动放置在每一个网格。默认的顺序是"先行后列"，

grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: column dense;

1.1.5 grid-auto-columns / grid-auto-rows 用来设置多出来的项目的宽高

• grid-auto-columns是设置默认单元格的宽度，grid-auto-rows是设置默认单元格的高度

grid-auto-columns: 50px;
grid-auto-rows: 50px;

• 只设置了 3*3 个项目，但是实际有 10 个，整个属性就是用来设置多出来的项目的

1.1.6 容器属性：justify-items(水平方向) align-items(垂直方向)

• 设置每个单元格内容的水平和垂直的对齐方式

justify-items：start|end|center|strech;
align-items：start|end|center|strech;
// 组合属性
place-items：justify-items align-items;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9xPRV0MO-1600563025984)(F:\学习笔记\4移动端布局\images\8.png)]

1.1.7 容器属性：justify-content(水平方向) align-content(垂直方向)

• 设置整个网格内容的水平和垂直的对齐方式

 justify-content：start|end|center|strech|space-around|space-between|space-evenly; 
 align-content：start|end|center|strech|space-around|space-between|space-evenly;

1.2 项目属性

1.2.1 元素跨行，跨列

• grid-column-start / grid-column-start / grid-rows-start / grid-rows-start

 grid-column: 1 / 3; /*当前元素从第一个线开始，第三个结束*/
 grid-rows: 1 / 3;

1.2.2 span 跨行 跨列

grid-column-start: span 2; /*当前元素从跨越两列*/
grid-rows-start: span 3;

• 用来指定 item 的具体位置，根据在那根网格线

1.2.3 grid-area 指定项目存放的区域

1.2.4 grid-area 项目属性的简写

1.2.5 项目自身属性 justify-self / align-self / pace-self

1.3 minmax()函数

• 可以为轨道指定一个最小值和最大值。
• 在下面的示例中，我有一个整洁的面板，左上方标题，右侧有大图。我想要顶部的最小高度为150像素，想要让那个盒子可以大到大于150像素。这里我用了minmax()函数，设置了150像素的最小值，和auto的最大值。