PHP小码农

Appearance

Grid ​

CSS Grid 布局是一种二维布局系统，允许开发者在行和列上同时控制布局。

它比传统的布局方式（如浮动和定位）更强大和灵活，适用于复杂的网页布局设计。

Grid布局的基本概念 ​

容器（Grid Container） ​

应用 display: grid 或 display: inline-grid 的元素，其子元素成为 Grid 项目。

项目（Grid Items） ​

Grid 容器内的直接子元素。

网格线（Grid Lines） ​

划分网格的线条，分为行网格线和列网格线。

网格轨道（Grid Track） ​

两条相邻网格线之间的空间，分为行轨道和列轨道。

网格单元格（Grid Cell） ​

行和列交叉形成的最小单位。

网格区域（Grid Area） ​

由四条网格线包围的矩形区域，可以包含一个或多个单元格。

Grid容器的属性 ​

  • display: grid：设置元素为 Grid 容器。
  • grid-template-columns：定义每一列的宽度。
  • grid-template-rows：定义每一行的高度。
  • grid-template-areas：定义区域的名称。
  • grid-template：简写属性，用于同时设置 grid-template-columns、grid-template-rows 和 grid-template-areas。
  • grid-gap：定义行和列之间的间距。
  • justify-items: 定义项目沿主轴（水平）方向的对齐方式。
  • align-items: 定义项目沿交叉轴（垂直）方向的对齐方式。
  • justify-content: 定义了网格线沿主轴（水平）方向的对齐方式。
  • align-content: 定义了网格线沿交叉轴（垂直）方向的对齐方式。

网格项目的属性 ​

  • 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-area：定义项目所在的区域。
  • justify-self: 定义项目沿主轴（水平）方向的对齐方式。
  • align-self: 定义项目沿交叉轴（垂直）方向的对齐方式。

Grid 布局的常见用例 ​

等宽列布局 ​

css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

响应式布局 ​

css
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

复杂网格布局 ​

css
.container {
    display: grid;
    grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
    grid-template-rows: 50px 1fr 50px;
    grid-template-columns: 150px 1fr 1fr;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}