Как правильно использовать подгрид ⇐ Html

[Anonymous]

У меня есть эта структура: < /p>

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

.d-grid-container {
display: grid;
grid-template-rows: auto;
grid-template-columns: max-content minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);
font-family: Arial, sans-serif;
}

.d-grid-header-row {
background-color: #f0f0f0;
font-weight: bold;
border-bottom: 1px solid #ccc;
}

.d-grid-header-cell {
padding: 8px;
border-right: 1px solid #ddd;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
}< /code>



id
name
email
active

Моя цель состоит в том, чтобы иметь сетку, где я определяю колонны сетки на верхнем уровне, и это будет также повлиять на ряды. Позже появятся D-Grid-Body и элемент D-Grid-Footer с той же структурой. Это настраиваемые угловые компоненты, поскольку я использую Angular.
Проблема заключается в том, что в этот момент ячейки складываются вертикально в первом столбце, чтобы показать горизонтально в 4 столбцах. Чтобы передать настройки столбца, я должен применить его к прямым детьм. Я играл с этим, но не смог достичь желаемой макету. Если возможно, я хочу избежать использования Display: Содержание .
Можете ли вы мне помочь?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -right-way