我目前正在Flutter中实现一个响应式的Tic Tac Toe字段，我遇到了一个布局问题。我已经设法显示了“十字”和“圆圈”符号，但挑战在于Tic Tac Toe字段本身的布局。

Column(children: Expanded(Container(
  margin: const EdgeInsets.fromLTRB(48, 44, 48, 14),
  color: TTColorTheme.onBackground,
  child: GridView.count(
    padding: EdgeInsets.zero,
    crossAxisCount: 3,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    physics: const NeverScrollableScrollPhysics(),
    children: List.generate(9, (index) {
      int row = index ~/ 3;
      int col = index % 3;
      return GestureDetector(
        onTap: () {},
        child: Container(
          padding: const EdgeInsets.all(20),
          color: TTColorTheme.background,
          child: null,
        ),
      );
    }),
  ),
),]); //...

字符串
为了不混淆任何人每次我谈论容器，我的意思是父容器与onBackground颜色。
这个问题是由于字段位于一个列小部件中，导致容器扩展到尽可能多的空间。为了解决这个问题，我不得不以一种有点奇怪的方式调整边距，以确保只有定义了主/十字轴间距的区域才会显示容器的颜色。
这种方法并不是真正的响应，我已经尝试了几种解决方案，包括使用Stack，IntrinsicHeight（沿着，容器的高度固定），但它们都没有产生预期的结果。在每次尝试中，容器的一小部分颜色在边缘上仍然可见，我还必须在那里查看边距，以便它看起来正常。
我正在寻找关于如何创建一个井字游戏场的响应式布局的建议，以确保它在各种屏幕尺寸和方向上正确显示。