Css布局 Grid布局

Grid布局

    Grid布局，即网格布局，通过将容器划分为"行"和"列"来创建网格，然后将内容放置在网格的单元格中，咱们可以简单理解为二维布局。

常用属性

1. display: grid; 或 display: inline-grid;

2. grid-template-columns 和 grid-template-rows

    grid-template-columns 定义网格布局中的列的大小、数量和间距等。
    grid-template-rows 定义网格布局中的行的大小、数量以及间距等。
    两者的属性值一致，搭配使用可以定义一个二维网格的相关属性参数

.box {  
	/*定义一个三行两列的网格，其中两列列宽长度一致；行：第一行占容器高度的25%，第二行高度根据内容高度自动设置，第三行为固定高度60px*/
	grid-template-columns: repeat(2, 1fr); 
	grid-template-rows: 25% auto 60px;
} 

• 长度值：例如 px（像素）、em、rem 等 CSS 长度单位来指定列宽或行高。举例：grid-template-columns: Apx Bpx Cpx（em | rem）; 会创建三列，列宽分别是 Apx、Bpx、Cpx（em | rem）。

• 百分比值：使列宽或行高根据网格容器的宽度或高度自动调整。举例：grid-template-columns: 50% 50%; 会创建两列，每列都占据容器宽度的 50%。

• flex 值（也称为 fr 单位）：fr 用于在可用空间内按比例分配空间。举例：grid-template-columns: 1fr 2fr; 会创建两列，列宽比例为 1:2。

• 自动值（auto）：列的宽度（行的高度）将由其内容决定。举例：grid-template-columns: auto 50px; 会创建两列，第一列宽度自动调整以适应其内容，第二列固定为 50px 宽。

• minmax() 函数 ：minmax(最小值，最大值) 函数允许你同时设置列（或行）的最小值和最大值。例如，grid-template-columns:1fr minmax(100px, 1fr); 会创建两列，第一列长度为1fr，第二列的宽度至少为 100px，且不超过1fr。

• repeat() 函数：repeat(重复次数，重复值) 函数用于重复指定次数的值。这个适用于创建重复且相似的网格。例如，grid-template-columns: repeat(3, 1fr); 会创建三列，每列宽 1fr。当无法确定重复次数的时候，可以采用auto-fill 或 auto-fit。举例：grid-template-columns: repeat(auto-fit, 1fr);

2. grid-template-areas

    grid-template-areas 的属性值是一个或多个由空格分隔的字符串，每个字符串代表网格布局中的一行。在这些字符串中，你可以使用自定义的区域名称来定义网格单元格（grid cells）的分组，区域名称之间用空格分隔。如果一个单元格不属于任何区域，可以使用点（.）或留空来表示。

3. grid-gap

    定义了网格线与网格项之间的间隙（grid-row-gap 和 grid-column-gap 的简写）。

.box {   
  grid-gap: 10px 20px; /* 设置行间距为10px，列间距为20px */  
}

• 一个值：该值将同时应用于行间距和列间距。举例：grid-gap: 10px; 表示行间距和列间距均为 10px。
• 两个值：第一个值应用于行间距（grid-row-gap），第二个值应用于列间距（grid-column-gap）。举例：grid-gap: 10px 20px; 表示行间距为 10px，列间距为 20px。

4. 对齐方式

justify-self

    设置单独一个单元格内容的水平对齐方式。

.box {
     justify-self: stretch | start | end | center ;  
}

• stretch：默认值，如果项目的尺寸小于其网格区域，则项目会被拉伸以填满网格区域的宽度（或主轴方向上的尺寸）。
• start：内容左对齐。
• end：内容右对齐。
• center：内容居中对齐。

align-self

    设置单独一个单元格内容的垂直对齐方式。

.box {
     align-self: stretch | start | end | center ;  
}

• stretch：默认值，。
• start：内容顶部对齐。
• end：内容底部对齐。
• center：内容居中对齐。

justify-items

    这个属性是Grid布局特有的，用于设置所有单元格内容的水平对齐方式。

.box {
  justify-items: stretch | start | end | center ;  
}

• stretch（默认值）：如果项目的尺寸小于其网格区域，则项目会被拉伸以填满网格区域的宽度（或主轴方向上的尺寸）。
• start：左对齐。
• end：右对齐。
• center：居中对齐。

align-items

     设置所有单元格内容的垂直对齐方式。

.box {
  align-items: stretch | baseline | start | end | center ;  
}

• stretch（默认值）：如果项目的尺寸小于其网格区域，则项目会被拉伸以填满网格区域的高度。
• baseline：项目的基线对齐。
• start：顶部对齐。
• end：底部对齐。
• center：居中对齐。

justify-content

    设置整个网格在容器内的水平对齐方式。（可以理解为所有行对包裹其的容器的对齐方式）

.box{
  justify-content: stretch | start | end | center | space-around | space-between | space-evenly;
}

• stretch：默认值，尝试拉伸网格行以填满网格容器的行轴方向上的空间，但这通常不是justify-content的常规用途。
• start：整个网格在网格容器内左对齐。
• end：整个网格在网格容器内右对齐。
• center：整个网格在网格容器内居中对齐。
• space-around：网格每列之间的间隔相等，且网格列与网格容器边缘的间隔是网格列之间间隔的一半。
• space-between：网格列之间的间隔相等，第一列对齐到网格容器的起始边缘，最后一列对齐到网格容器的结束边缘。
• space-evenly：网格列之间的间隔（包括网格列与网格容器边缘的间隔）都相等

align-content

    设置整个网格在容器内的垂直对齐方式。

.box{
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

• stretch：默认值，尝试拉伸网格行以填满网格容器的列轴方向上的空间，但这通常意味着网格列（实际上是网格行）的高度会改变以填满空间，这在实际应用中可能不太常见。
• start：整个网格在网格容器内顶部对齐。
• end：整个网格在网格容器内底部对齐。
• center：整个网格在网格容器内居中对齐。
• space-around：网格每行之间的间隔相等，且网格行与网格容器边缘的间隔是网格行之间间隔的一半。
• space-between：网格行之间的间隔相等，第一行对齐到网格容器的起始边缘，最后一行对齐到网格容器的结束边缘。
• space-evenly：网格行之间的间隔（包括网格列与网格容器边缘的间隔）都相等