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

[Anonymous]

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

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

id
name
email
active



< /code>
Это фактический CSS для него: < /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;
}

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

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