Можно ли воспроизвести классическое расстояние между таблицами с помощью CSS Grid? ⇐ CSS

[Anonymous]

У меня есть таблица с двумя столбцами. В одном из столбцов больше контента, чем в другом. Я хотел бы воспроизвести поведение старомодной таблицы, где свободное пространство выделяется примерно пропорционально количеству содержимого в ячейке, за исключением использования сетки вместо таблицы. Я бы предпочел использовать сетку, чтобы ячейки располагались вертикально на узком экране.
Использование «grid-template-columns: auto auto» близко, но оставшееся пространство разделено. равномерно, и я хочу, чтобы оставшееся пространство было разделено в соотношении 2:1 (или другом). «2fr 1fr» неверно, и такого понятия, как «2auto 1auto», не существует.
Я не могу найти ни одной комбинации стилей CSS Grid, которые повторяли бы интервал классической таблицы. . Но просто использовать таблицу, которая переопределяет свойство display при определенном размере экрана, кажется неэлегантным. Есть ли способ сделать это, используя только CSS Grid?
Вот что я пробовал: https://jsfiddle.net/mnegdk0o/

My starter grid without using any extra space:


This cell has more, more, more, more, more, more, more content

Less content here



For reference, here is a classic table. Note how by default, the first column gets more free space due to having more content.




This cell has more, more, more, more, more, more, more content


Less content here




Attempt 1: Try using "grid-template-columns: auto auto;".


This cell has more, more, more, more, more, more, more content

Less content here



Attempt 2: Try using "grid-template-columns: 2fr 1fr;".


This cell has more, more, more, more, more, more, more content

Less content here



Attempt 3: Try using "grid-template-columns: minmax(auto, 2fr) minmax(auto, 1fr);".


This cell has more, more, more, more, more, more, more content

Less content here



Attempt 4: Just use classic table, and change "display" below a certain breakpoint.




This cell has more, more, more, more, more, more, more content


Less content here




table {
border: 1px solid red;
}

td {
border: 1px solid red;
}

.grid {
display: grid;
gap: 5px;
border: 1px solid blue;
padding: 5px;
margin-bottom: 5px;
}

.grid>* {
border: 1px solid blue;
padding: 5px;
grid-template-columns: 100%;
}

.grid0 {
grid-template-columns: fit-content(100%) fit-content(100%);
}

.grid1 {
grid-template-columns: auto auto;
}

.grid2 {
grid-template-columns: 2fr 1fr;
}

.grid3 {
grid-template-columns: minmax(auto, 2fr) minmax(auto, 1fr);
}

@media (max-width: 400px) {

table.hacky,
table.hacky tr,
table.hacky tr td {
display: block;
}
}


Подробнее здесь: https://stackoverflow.com/questions/786 ... g-css-grid