Tailwind中Grid容器内justify-between失效问题解决咨询

我在Modal组件中使用Grid布局，当屏幕尺寸小于Tailwind的xl断点时，元素布局异常：用justify-center时左右留空白，用justify-between时仅左侧对齐。需要实现元素左右对齐且元素间均匀分布。

代码示例 #

<div class="fixed inset-0 flex items-center justify-center">
  <div class="min-w-[90%] xl:min-w-[1000px] h-[600px] bg-nf-500">
    <div class="text-primary-500 text-center mt-6 font-semibold text-3xl">Modal</div>
    <div class="pt-12 mx-4 h-full xl:flex">
      <div class="grid md:grid-cols-3 grid-cols-2 gap-4 gap-y-4 xl:h-48">
        <div class="flex justify-between" *ngFor="let item of [1, 2, 3, 4, 5, 6]">
          <div class="rounded-md border-2 border-primary-500 h-24 w-48"></div>
        </div>
      </div>
      <div class="w-full xl:w-[350px] h-20 xl:h-[80%] xl:mt-0 mt-5 pt-5 xl:pt-0 xl:ml-4 ml-0 xl:pl-4 pl-0 border-t-2 xl:border-l-2 xl:border-t-0 border-neutral-500">
        <div class="bg-blue-200 w-full h-full"></div>
      </div>
    </div>
  </div>
</div>

问题现象 #

解决方案 #

问题核心是错误地将justify-between加到了单个元素的父容器上——每个Grid子项里只有一个元素，justify-between无法发挥左右对齐的作用。正确做法是把对齐逻辑转移到Grid容器本身：

方法1：固定元素宽度，让Grid整体左右对齐 #

1. 移除每个*ngFor子元素的flex justify-between（无实际作用）
2. 给Grid容器添加justify-between类，让Grid布局在父容器内左右对齐，列间距自动均匀分配

修改后的核心代码：

<div class="grid md:grid-cols-3 grid-cols-2 gap-4 gap-y-4 xl:h-48 justify-between">
  <div *ngFor="let item of [1, 2, 3, 4, 5, 6]">
    <div class="rounded-md border-2 border-primary-500 h-24 w-48"></div>
  </div>
</div>

方法2：元素自适应宽度，均分列宽 #

如果允许元素宽度自适应，可去掉固定宽度w-48换成w-full，Grid列会自动均分父容器宽度，结合gap属性实现自然的左右对齐与均匀间距：

<div class="grid md:grid-cols-3 grid-cols-2 gap-4 gap-y-4 xl:h-48">
  <div *ngFor="let item of [1, 2, 3, 4, 5, 6]">
    <div class="rounded-md border-2 border-primary-500 h-24 w-full"></div>
  </div>
</div>

两种方法都能解决小屏幕下的对齐问题，可根据实际需求选择：方法1保留元素固定宽度，方法2让元素适配不同屏幕尺寸。

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