发牌过程中：卡片数量 < 3，要 左对齐（flex-start），一张张从左往右加
发满3张时：要 两端对齐（space-between），刚好铺满宽度
这总动态布局在flex中比较麻烦，虽然可以用动态class或style来可以改变flex的对齐模式，用gird会更简单明确。
.desk-box {
width: 696rpx;
display: grid;
grid-template-columns: repeat(3, 220rpx); // 固定 3 列，每列 220rpx
grid-auto-rows: 220rpx;
gap: 18rpx; // 列/行间距 = (696 - 3*220) / 2 = 18rpx
justify-content: start; // ← 关键：不满时左对齐
}CSS Grid 是一种强大的布局系统，特别适用于创建复杂的网页布局。它提供了一种通过行和列来排列元素的方法，同时允许你控制这些元素如何在网格中对齐、大小调整等。下面将详细介绍 CSS Grid 的基本用法及其一些核心概念。
基本概念
- Grid Container（网格容器）：要使用 Grid 布局，首先需要定义一个容器元素，并将其
display属性设置为grid或inline-grid。这样做之后，这个容器中的直接子元素将成为网格项。 - Grid Items（网格项）：这些是直接位于网格容器内的元素，它们按照网格的规则进行排列。
- Grid Lines（网格线）：划分网格的线条，可用于定位网格项。水平方向上的网格线称为“列线”，垂直方向上的称为“行线”。
- Grid Tracks（网格轨道）：网格中的行或列之间的空间。你可以认为它是两条相邻网格线之间的区域。
- Grid Cells（网格单元格）：网格中的最小单位，由相邻的四条网格线围成的一个区域。
- Grid Areas（网格区域）：由一个或多个网格单元组成的矩形区域。
核心属性
在容器上使用的属性
- grid-template-columns 和 grid-template-rows：定义了网格的列和行尺寸。例如：
.container { display: grid; grid-template-columns: 100px 100px 100px; /* 定义三列，每列宽100px */ grid-template-rows: auto; /* 自动高度 */ } - grid-gap：指定网格项之间的间距。可分别设置行和列的间距。
.container { grid-gap: 10px 20px; /* 行间距10px，列间距20px */ } - justify-items 和 align-items：分别沿行轴和列轴对齐网格项的内容。
.container { justify-items: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } - justify-content 和 align-content：当网格项总尺寸小于网格容器时，用于对齐整个网格内容。
.container { justify-content: space-around; /* 沿行轴分布 */ align-content: space-between; /* 沿列轴分布 */ }
在网格项上使用的属性
- grid-column 和 grid-row：指定网格项从哪条网格线开始到哪条网格线结束。
.item { grid-column: 1 / 3; /* 占据第1到第2条列线间的空间 */ grid-row: 1 / 2; /* 占据第1到第2条行线间的空间 */ } - grid-area：给网格项命名或指定其跨越的行列范围。
.item { grid-area: header; /* 给网格项命名为header */ }
实例应用
假设我们有一个包含9个卡片的布局需求，每个卡片宽度固定为220rpx，容器总宽度为696rpx，希望实现左对齐布局且发满牌时两边对齐铺满宽度。我们可以这样写：
.desk-box {
width: 696rpx;
display: grid;
grid-template-columns: repeat(3, 220rpx); // 创建3列，每列220rpx
grid-auto-rows: 220rpx; // 自动行高220rpx
gap: 18rpx; // 网格项之间间距
justify-content: start; // 不满时左对齐
}
这种配置方式不仅简洁明了，而且能很好地满足你的布局要求，无论是不满一行还是刚好填满容器的情况。