如何用Mantine UI Grid实现首行仅占4格的表单布局？

你可以通过两种更简洁的方式实现需求，避免冗余的空列和媒体查询：

方式1：利用Grid自动换行特性 #

Mantine Grid基于flex布局，当列的总宽度超过12格时会自动换行。直接按顺序排列列即可：

<Grid>
  {/* 首行：移动端占满宽度，桌面端占4格 */}
  <Grid.Col xs={12} md={4}>Row 1 Column 1</Grid.Col>
  
  {/* 第二行的三个列：移动端各占满宽度，桌面端各占4格 */}
  <Grid.Col xs={12} md={4}>Row 2 Column 1</Grid.Col>
  <Grid.Col xs={12} md={4}>Row 2 Column 2</Grid.Col>
  <Grid.Col xs={12} md={4}>Row 2 Column 3</Grid.Col>
</Grid>

在md及以上屏幕中，首行的列占4格，剩余8格留白；第二行的三个列总宽度为12格，会自动换行到新的一行并填满整行。移动端所有列都会堆叠显示，占满100%宽度。

方式2：显式使用Grid.Row划分行 #

如果希望布局结构更清晰，可以用Grid.Row显式分隔不同行，避免依赖自动换行的隐式行为：

<Grid>
  <Grid.Row>
    <Grid.Col xs={12} md={4}>Row 1 Column 1</Grid.Col>
  </Grid.Row>
  <Grid.Row>
    <Grid.Col xs={12} md={4}>Row 2 Column 1</Grid.Col>
    <Grid.Col xs={12} md={4}>Row 2 Column 2</Grid.Col>
    <Grid.Col xs={12} md={4}>Row 2 Column 3</Grid.Col>
  </Grid.Row>
</Grid>

这种方式的布局效果和方式1完全一致，但代码结构更直观，后续维护时能快速区分不同行的内容。

这两种方式都比你之前的空列+媒体查询方案更简洁，符合Mantine Grid的设计规范，也避免了冗余的DOM元素。

内容的提问来源于stack exchange，提问作者Brian DiCasa