CSS 网格备忘单 - CSS

简介

CSS 网格布局是一种新的布局方式，允许我们使用网格来布置页面。它是响应式设计的理想选择，使我们能够轻松地管理布局和内容。

本备忘单将列出 CSS 网格布局的所有属性，以及如何使用它们来创建自适应和响应式布局。

基础语法

• display: grid; ：将一个元素更改为网格容器。
• grid-template-columns: 格子的列宽; ：指定网格列的宽度。
• grid-template-rows: 格子的行高; ：指定网格行的高度。
• grid-template-areas: "格子名称1 格子名称2" "格子名称3 格子名称4"; ：创建命名的网格区域。
• grid-gap: 列间距/行间距; ：指定列和行之间的间隔。

网格容器属性

• justify-content: start | end | center | stretch | space-around | space-between | space-evenly; ：定义如何将内容沿着主轴置于网格容器内。
• align-content: start | end | center | stretch | space-around | space-between | space-evenly; ：定义如何将内容沿着交叉轴置于网格容器内。
• justify-items: start | end | center | stretch; ：定义如何将内容置于网格项内沿着主轴。
• align-items: start | end | center | stretch; ：定义如何将内容置于网格项内沿着交叉轴。

网格项属性

• grid-column-start: <number> | <name> | span <number> | span <name> | auto; ：定义从哪一栏开始。可以使用名称、数字或 span 。
• grid-column-end: <number> | <name> | span <number> | span <name> | auto; ：定义从哪一栏结束。可以使用名称、数字或 span 。
• grid-column: <start> / <end> | <start> / span <value> | span <value> / <end> | <start> / auto | auto / <end> | auto / span <value>; ：定义列的开始和结束。可以使用名称、数字或 span 。
• grid-row-start: <number> | <name> | span <number> | span <name> | auto; ：定义从哪一行开始。可以使用名称、数字或 span 。
• grid-row-end: <number> | <name> | span <number> | span <name> | auto; ：定义从哪一行结束。可以使用名称、数字或 span 。
• grid-row: <start> / <end> | <start> / span <value> | span <value> / <end> | <start> / auto | auto / <end> | auto / span <value>; ：定义行的开始和结束。可以使用名称、数字或 span 。
• grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; ：定义一个网格项的位置和行列。

示例

Markdown 中，您可以使用以下代码块来创建 CSS 网格：

<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>
  <div class="item5"></div>
  <div class="item6"></div>
</div>

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

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
}

.item2 {
  grid-column: 3;
  grid-row: 1 / 4;
}

.item3 {
  grid-column: 1;
  grid-row: 2 / 4;
}

.item4 {
  grid-column: 2;
  grid-row: 2;
}

.item5 {
  grid-column: 2;
  grid-row: 3;
}

.item6 {
  grid-column: 3;
  grid-row: 4;
}
</style>

该示例创建了一个三列、四行的网格，该网格中的第一个项目 (item1) 横跨两列和一行，其余项目 (item2-item6) 则形成一个标准的矩形块。