Как определить колонки GRID таблицы по аналогии TABLE?

Question

[Сергей Кореневский]

Приветсвую Гуру, Дайте совет пожалуйста.
Хочу сверстать аналог <TABLE> на GRID-ах.

<main>
<div class='name i1'>Велик</div>
<div class='cost i1'>10 000</div>
<div class='name i2'>Самбик</div>
<div class='cost i2'>2500 000</div>
....
</main>

main {
    display:grid;
    grid-template-columns: auto auto;
    grid-template-areas: "name cost";
}
.name{    grid-area: name;}
.cost{    grid-area: cost;}

При данной верстке все теги с классом NAME накладываются друг на друга, а с классом COST так же друг на друга.
Как использовать схему аналогичную <table>?

1. Количество колонок НЕ известно, колонок может быть либо 3 либо 2, 3 колонка с указанием количества продукта.
   
2. Количество строк НЕ известно, так как в таблице идет перечисление.
   
3. Чтоб ширина колонок автоматически заполняла все пространство как с использованием <table>, в <table> на сервере можно показывать 3 колонку а можно нет, пространство в любом случае заполняется по ширине. А в GRIDах как сделать чтобы сервер мог по своему усмотрению выдавать 3ю колонку, но колонки в любом случае заполняли ширину.
   

Answer 1

[Softlink]

Вполне ожидаемое поведение. Вы разметили таким образом, что у вас получилось по два одинаковых контейнера, которые имеют одинаковое положение на странице: "name const". И тут нет значения, что в html они расположены через один. Чтобы получить таблицу из этой разметки вам как раз не очень-то и нужен grid-template-areas, достаточно разметить положение колонок и строк. Вот так.

Comments

[Сергей Кореневский]

Поймите правильно.
1.Заранее не известно сколько строк будет.
2.Заранее не известно сколько будет колонок.
.
Условно в верстке будет третья колонка количества <div class='count'>3</div>. Но заранее не известно будет ли эта колонка или не будет.
Например в HTML мы на сервере либо генерируем третью колонку <td class='count'>3</td> либо не генерируем. Но при этом таблица растягивается с учетом третьей колонки либо без учета. Но растягивается.
Я хочу показать вертску так чтобы ширина столбцов автоматически располагалась во всю ширину, даже если 2 колонки или 3 будет
А зачем Вы мне написали стиль grid-template-rows: repeat(2, 1fr);, если в примере четко видно что там перечисление, и четко написано 3 точки.

[Softlink]

Сергей Кореневский,
1. в условии задачи не было того, что колонок может быть больше и что их количество динамическое.
2. стиль написал для наглядности, его вообще можно не использовать и ничего не поменяется.

При использовании areas в динамике вам надо будет перерисовывать схему в css, т.к. без явного указания кол-ва колонок/строк элементы просто не поймут на какую позицию становиться. Как вариант можно использовать css-переменную, или по классу писать что-то вроде grid-template-columns: auto где количество auto равно количеству колонок.

[Сергей Кореневский]

Softlink, В отсутствии описания условия на количество колонок, моя огромная ошибка. Но отсутствие условия на количество строк, извените уж, это было ясно из контекста. В общем Ваш ответ не сказался на строки.
А действительно нет решения как в <TABLE >?
Может по линиям писать GRID, условно что мол первая колонка будет от первой линии до второй. Следующая колонка будет от 2 до 3 линии. Правда вот не знаю будут ли накладывается тут блоки.

[Softlink]

Сергей Кореневский, пока не знаю подходящего решения. С таблицами проще, т.к. там сами теги говорят, что это будет колонка, а это строка. В гридах же идет сплошной поток элементов и им надо явно указывать где колонка, а с какого элемента должна начаться новая строка.
Задача в целом интересная, но не уникальная. Погуглил варианты и пока никто не придумал полностью автоматического решения с динамическими колонками/строками.

Если что-то придет в голову, напишу здесь. Если найдете решение, напишите тоже сюда, пожалуйста.

[Сергей Кореневский]

Softlink,
Ответ:

main{    display: grid;
    rid-template-columns: [start] 1fr [line1] auto [line2] auto [line3];
}
.name{    /*Колонка постоянная*/
    grid-column: start / line1;
}
.count{    /* Колонка Опциональная*/
    grid-column: line1 / line2;
}
.summ{    /*Колонка Опциональная*/
    grid-column: line2 / line3;
}
.tax{    /*Блок во всю ширину всех колонок, как COLSPAN (с любым количеством колонок)*/ 
    grid-column: start / line3;
}

Спасибо за помощь!
Большой трудностью было сделать блок в последней колонке как ROWSPAN, мне так и не удалось. Я не нашел как именовать последнюю линию под последним рядом. Но зато сделал аналогию COLSPAN.
В добавок к этому решению не возможно сделать GAP. При указании GAP сразу видно все отсутствующие колонки, потому что у пустых колонок появляется дополнительный отступ.
Но это я думаю НЕ проблема
Кстати, в описании вопроса можно было решить это через AREA:

main{    display:grid;
    grid-template-columns: 1fr auto  auto auto;
    grid-template-areas: "name count cost summ";
}

Очень странно, ведь с AREAS блоки накладываются. а с линиями они выстраиваются как в <table>
Еще попытка сделать блок наподобие ROWSPAN:

.rowspan{
    grid-column: line4 / line5;
    grid-row: 1 / 100; 
}

https://jsfiddle.net/KoreshS/qutmv39k/4/

[Softlink]

Сергей Кореневский, посмотрел решение. Оно же не учитывает произвольное кол-во колонок. Вы разметили линиями только 3 колонки. Что будет, если в пример добавить еще 12 колонок например, не меняя стилей? Просто дивы добавлять.

[Сергей Кореневский]

Softlink, конечно абсолютно произвольно колонок не учитывает. Но если известно что если колонок не больше 10, то делаем 11 линий. То при любых количествах от 1 до 10 таблица будет аналогична TABLE.
На крайняк можно написать.

main
grid-template-columns: 1fr repeat( 100, auto);
/* для каждого столбца указываем какие линии нужно использовать.*/

В любом случае это хотя бы хоть как-то но работает..
Вообще странно, почему такой сценарий не предусмотрели разработчики технологии.

[Сергей Кореневский]

Softlink, Вообще спасибо большое за поддержку.
Ваш пример с переменной меня научил новому, я не думал что так можно было.

Answer 2

[Сергей Кореневский]

Ответ:

main{    display: grid;
    rid-template-columns: [start] 1fr [line1] auto [line2] auto [line3];
    /*grid-template-rows: [top] repeat( 100, min-content) [bottom];*/
}
.name{    /*Колонка постоянная*/
    grid-column: start / line1;
}
.count{    /* Колонка Опциональная*/
    grid-column: line1 / line2;
}
.summ{    /*Колонка Опциональная*/
    grid-column: line2 / line3;
}
.tax{    /*Блок во всю ширину всех колонок, как COLSPAN (с любым количеством колонок)*/ 
    grid-column: start / line3;
}