course/css-grid-tutorial

CSS Grid 概述 🌐 CSS Grid 布局提供了一种简单而强大的方式来在网页上创建复杂的布局。以下是一些关键点：

特点

• 基于网格的布局
• 高度灵活的响应式设计
• 简化的布局控制

术语

• grid-template-columns: 定义列的数量和大小。
• grid-template-rows: 定义行的数量和大小。
• grid-item: 网格中的单个元素。

快速开始

要创建一个基本的 CSS Grid，您可以使用以下样式：

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

示例

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- 更多项 -->
</div>

相关资源

想要深入了解 CSS Grid？可以查看我们提供的CSS Grid 教程。

<center><img src="https://cloud-image.ullrai.com/q/css_grid_example/" alt="CSS Grid Example"/></center>