Ячейки шахматной доски схлопываются, когда внутри нет фрагмента SVG [закрыто] ⇐ CSS

[Anonymous]

Я создаю пользовательский интерфейс шахматной доски в React, используя Tailwind CSS и CSS Grid.
Доска представляет собой сетку 8x8 (

Код: Выделить всё

grid-cols-8

), где каждый квадрат представляет собой с использованием w-full h-full.

Каждый квадрат дополнительно содержит шахматную фигуру SVG.

• Когда квадрат не содержит шахматную фигуру (SVG), он сворачивается вертикально и становится высотой 0.
• Когда фигура присутствует, квадрат отображается правильно.
• Когда он пуст, ячейка сетки визуально схлопывается, и макет доски становится нестабильным.

Код: Выделить всё

{displayBoard.map((row, rIndex) =>
row.map((piece, cIndex) => (

{piece && (

{Pieces[piece.color][piece.type]}

)}

))
)}

Когда {piece имеет значение null:

• Внутренний не отображается вообще
• Ячейка сетки не имеет внутренней высоты
• CSS Grid сворачивает высоту строки до 0
• Результат: шахматная доска визуально ломается

Проблема возникает из-за этой комбинации:

Код: Выделить всё

className="w-full h-full"

и:

Код: Выделить всё

{piece && ...}

Когда фрагмент отсутствует:
нет содержимого

нет высоты

ячейка сетки схлопывается

Это работает, но кажется скорее обходным решением:

Код: Выделить всё

Это заставляет контейнер доски оставаться квадратным, что предотвращает схлопывание,

но не решает основную проблему для каждой ячейки сетки.

• Правильно ли, что элементы CSS Grid сворачиваются до высоты 0, если они пусты?
• Какое самое чистое/лучшее решение?
  />

  • Код: Выделить всё

    aspect-square

    на ячейку?

  • Код: Выделить всё

    min-height

    ?
  • трюк с заполнением?
  • Автостроки CSS Grid?
• Каков правильный подход CSS для макетов с фиксированной квадратной сеткой, таких как шахматные доски?
• Как обеспечить соблюдение требований одинаковые размеры квадратов, не полагаясь на внутреннее содержание?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -is-inside