网格布局的六个麻将：未完待续

网格布局是一项强大的 CSS 功能，它允许您创建复杂、响应式的布局，而无需依赖浮动或定位。在本文中，我们将探讨如何使用网格布局创建六个麻将。

基础布局

首先，让我们从创建一个基本的网格布局开始。为此，我们首先需要定义一个容器元素，并将其设置为网格容器：

<div class="container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

接下来，我们需要定义网格布局的列和行。为此，我们将使用 grid-template-columns 和 grid-template-rows 属性：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

此代码将创建三列两行的网格。

公共样式

接下来，让我们为我们的麻将添加一些公共样式：

.grid-item {
  width: 100px;
  height: 100px;
  background-color: black;
}

初始效果

现在，我们应该在页面上看到六个黑色麻将，排列成三列两行：

[图片：六个黑色麻将排列成三列两行]

微调布局

默认情况下，网格项将按顺序排列。但是，我们可以使用 grid-column-start 和 grid-row-start 属性来控制它们的定位：

.grid-item:nth-child(2) {
  grid-column-start: 2;
}

.grid-item:nth-child(3) {
  grid-row-start: 2;
}

.grid-item:nth-child(4) {
  grid-column-start: 2;
  grid-row-start: 2;
}

此代码将将第二个麻将移动到第二列，将第三个麻将移动到第二行，并将第四个麻将移动到第二列和第二行。

[图片：六个黑色麻将重新排列，形成一个“L”形]

响应式设计

网格布局是响应式的，这意味着它可以根据屏幕尺寸进行调整。我们可以使用媒体查询来定义不同的断点，并在这些断点处调整网格布局：

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

此代码将使网格布局在屏幕宽度小于 768px 时切换到单列布局。

结论

网格布局是一种强大且灵活的工具，可用于创建各种布局。在本教程中，我们学习了如何使用网格布局创建六个麻将。通过了解网格布局的基础知识，您可以创建复杂的、响应式的布局，而无需依赖浮动或定位。