css Grid网格布局

CSS Grid布局是一种强大的二维布局系统，它允许你创建复杂的网页布局，并且能够轻松地控制行和列的大小、位置以及对齐方式。Grid布局提供了比Flexbox更高级的功能，特别适用于需要精确控制行和列的设计。

基本概念

• Grid容器：通过设置display: grid;或display: inline-grid;来定义一个元素为Grid容器。
• Grid线：网格中的行和列之间的分界线。
• Grid单元格：由两条相邻的行线和两条相邻的列线所围成的空间。
• Grid区域：由一个或多个单元格组成的矩形区域。
• Grid轨道：一行或一列称为一个轨道。

主要属性

Grid容器属性

• display

  • grid：块级网格容器。
  • inline-grid：内联网格容器。

• grid-template-columns 和 grid-template-rows

  • 定义网格的列宽和行高。可以使用长度单位（如px, em）、百分比或fr单位（分数）。

  • 例如：

    .container {
      display: grid;
      grid-template-columns: 100px 1fr 200px;
      grid-template-rows: 100px 1fr 200px;
    }
    

• grid-template-areas

  • 使用命名区域来定义布局。

  • 例如：

    .container {
      display: grid;
      grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    }
    

• grid-gap (已废弃, 使用gap代替)

  • 设置行和列之间的间距。

  • 例如：

    .container {
      gap: 10px;
    }
    

• justify-items 和 align-items

  • 控制项目在单元格内的水平和垂直对齐方式。

  • 例如：

    .container {
      justify-items: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
    }
    

• justify-content 和 align-content

  • 控制整个网格在容器内的水平和垂直对齐方式。

  • 例如：

    .container {
      justify-content: center; /* 水平居中 */
      align-content: center; /* 垂直居中 */
    }
    

• grid-auto-columns 和 grid-auto-rows

  • 定义隐式创建的轨道的大小。

  • 例如：

    .container {
      grid-auto-columns: 100px;
      grid-auto-rows: 50px;
    }
    

• grid-auto-flow

  • 控制自动放置的算法。

  • 例如：

    .container {
      grid-auto-flow: row; /* 默认值，按行排列 */
      grid-auto-flow: column; /* 按列排列 */
      grid-auto-flow: dense; /* 尽可能紧密地填充空隙 */
    }
    

Grid项目属性

• grid-column 和 grid-row

  • 定义项目的起始和结束位置。

  • 例如：

    .item {
      grid-column: 1 / 3; /* 从第1条列线到第3条列线 */
      grid-row: 1 / 3; /* 从第1条行线到第3条行线 */
    }
    

• grid-area

  • 使用命名区域或行/列索引来定义项目的大小和位置。

  • 例如：

    .item {
      grid-area: 1 / 1 / 3 / 3; /* 等同于上面的grid-column和grid-row */
      grid-area: header; /* 如果使用了grid-template-areas */
    }
    

• justify-self 和 align-self

  • 控制单个项目在单元格内的水平和垂直对齐方式。

  • 例如：

    .item {
      justify-self: end; /* 水平靠右 */
      align-self: start; /* 垂直靠上 */
    }
    

示例代码

基本的网格布局

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */
  grid-template-rows: 100px 1fr 100px; /* 三行，中间行自适应高度 */
  gap: 10px; /* 项目间间距 */
}

.header, .footer {
  background-color: lightblue;
}

.sidebar, .content {
  background-color: lightgreen;
}

使用命名区域

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 100px 1fr 100px;
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: lightblue;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightgreen;
}

.content {
  grid-area: content;
  background-color: lightyellow;
}

.footer {
  grid-area: footer;
  background-color: lightpink;
}

自动布局

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

.item {
  background-color: lightblue;
  padding: 20px;
}