CSS Grid布局（一）

2024-01-23 08:14:28

学习小程序时学习过Flex布局，Grid和Flex有一些相似，都可以指定容器复杂的排列布局。

容器和项目

容器----container (#app就是容器)
项目----item （.section就是项目）

<div id="app">
 	<section class="section"></section>
 	<section class="section"></section>
 	<section class="section"></section>
</div>

行和列

容器里面的水平区域称为"行"（row）
垂直区域称为"列"（column）

单元格

行和列的交叉区域，称为"单元格"（cell）
行数*列数=单元格数量

网格线

划分网格的线，称为"网格线"（grid line）
水平网格线划分出行，垂直网格线划分出列

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线
比如三行就有四根水平网格线

容器属性

1.Grid 布局的属性分成两类

容器属性
项目属性

1.1 容器属性------display属性

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

#app{
	display:grid
}

默认情况下，容器元素都是块级元素，但也可以设成行内元素

#app{
	display:inline-grid
}

1.2 容器属性------grid-template-columns、 grid-template-rows 属性

grid-template-columns 属性定义每一列的列宽
grid-template-rows 属性定义每一行的行高

#app{
	display:grid；
	grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
}

1.2.1 repeat()

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

#app{
	display:grid；
	grid-template-columns: repeat(3, 33.33%);
   grid-template-rows: repeat(3, 33.33%);
}

grid-template-columns: repeat(2, 100px 20px 80px);

1.2.2 auto-fill 关键字自动填充

每列宽度100px，然后自动填充，直到容器不能放置更多的列

#app{
	display:grid；
	grid-template-columns: repeat(auto-fill, 100px);
}

1.2.3 fr 关键字比例关系

fraction 的缩写，意为"片段"
如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍

#app{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

//第一列的宽度为150像素，第二列的宽度是第三列的一半
grid-template-columns: 150px 1fr 2fr;

1.2.4 minmax() 一个长度范围

它接受两个参数，分别为最小值和最大值

minmax(100px, 1fr)表示列宽不小于100px，不大于1fr

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

1.2.5 auto 关键字由浏览器自己决定长度

第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width
且这个值大于最大宽度。

grid-template-columns: 100px auto 100px;

1.2.6 网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

#app{
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

网格布局允许同一根线有多个名字，比如[fifth-line row-5]

1.2.7 布局实例

两栏式布局

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

十二网格布局
grid-template-columns: repeat(12, 1fr);

1.3容器属性------grid-row-gap、 grid-column-gap、grid-gap 属性

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

#app{
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}


#app{
	grid-gap: 20px 20px;
}

1.4 grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成
grid-template-areas属性用于定义区域

#app {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
			           'd e f'
			           'g h i';
}

1.5 grid-auto-flow 属性

grid-auto-flow属性除了设置成row和column
还可以设成row dense和column dense

1.6 justify-items 、align-items 、place-items 属性

justify-items属性设置单元格内容的水平位置（左中右）
align-items属性设置单元格内容的垂直位置（上中下）
place-items属性是align-items属性和justify-items属性的合并简写形式

#app{
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

place-items: start end;

1.7 justify-content 、align-content 、place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右）
align-content属性是整个内容区域的垂直位置（上中下）。
place-content属性是align-content属性和justify-content属性的合并简写形式

#app {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  

//或者
  place-content: space-around space-evenly;
}

码农公寓