CSS 网格基础

CSS 网格布局（Grid Layout）是 CSS3 的一部分，它提供了一种更强大、更灵活的方式来布局网页元素。在这个基础教程中，我们将介绍 CSS 网格布局的基本概念和使用方法。

基本概念

CSS 网格布局将容器划分为行和列，从而可以更精确地控制元素的位置和大小。

容器

使用 display: grid; 或 display: inline-grid; 属性可以将一个元素设置为网格容器。

.container {
  display: grid;
}

行和列

在网格容器中，行和列由网格线定义。默认情况下，网格线位于元素的四边。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 定义两列，第二列占两倍宽度 */
  grid-template-rows: 1fr 2fr; /* 定义两行，第二行占两倍高度 */
}

元素

将元素放置在网格容器中，可以使用 grid-column 和 grid-row 属性。

.item {
  grid-column: 1 / 3; /* 从第一列开始，跨越两列 */
  grid-row: 1 / 3; /* 从第一行开始，跨越两行 */
}

实例

以下是一个简单的网格布局示例：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 定义三列 */
  grid-template-rows: 1fr 1fr; /* 定义两行 */
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

扩展阅读

如果您想了解更多关于 CSS 网格布局的信息，请访问以下链接：

MDN Web Docs - CSS Grid Layout

希望这个基础教程能帮助您入门 CSS 网格布局！