Как на гридах сделать сверстать подобное?

Question

[Denioo]

Здравствуйте, гридами раньше не пользовался но в рамках одной задачи необходимо сверстать подобное.
И лучше всего для этого подойдут гриды.

Я понял что надо у главного дива сделать такие стили:

display: grid;
position: relative;
grid-template-columns: 34px 2fr 2fr 2fr 1fr 1fr 56px;
grid-auto-rows: 1fr;

3 строка должна быть статичной, а вторая строка должна выкатываться(или просто с display: none на block становиться) между первой и второй строкой по нажанию на кнопку третьей строки. Сама кнопка не сложна, механику понимаю, но
не могу понять как 1 столбец и последний сделать во все строки, и как собстенно сделать вторую строку ведь там колонок больше чем в первой.

Comments

[Lynn «Кофеман»]

Что это за безумное нагромождение блоков?

[Denioo]

Алексей Тен, это мои художественные навыки пэйнта, блоки впринципе одинаковые

[Ankhena]

Denioo, судя по картинке колонок там явно не 7. И почему-то столбцы в 2fr по ширине равны столбцам в 1fr.
А что с выравниванием во второй строке я вообще слабо представляю.

[Denioo]

Ankhena, да, это не совсем важно можно и по 1fr мне важно понять как 2 строку делать.

[Ankhena]

Denioo, Берете и считаете сколько нужно столбцов, чтобы разложить всю эту кривизну.
Я нарисовала не считая 3-го ряда. Сами рисуйте:)


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

[Denioo]

Ankhena, grid-column? окей а как со строка быть так же? первый и последнии блоки должны быть во все 3 строки, grid-row а дальше не подскажете?

[Ankhena]

Denioo, всем помогает это: https://cssgridgarden.com/#ru

[Lynn «Кофеман»]

М-дя.
А нужен ли тут вообще грид?

[Арсений Матыцин]

Алексей Тен, я печатал печатал и тоже об этом подумал. Тут на лицо 3 строки в другой. Можно хоть по 20 элементов нагородить и не пытаться вписаться в разлинейку.

Answer 1

[Арсений Матыцин]

В этом плане гриды мало отличаются от таблиц, поэтому подход по расчетам должен быть идентичен (при одноуровневом вложении) — визуально, если в голову пока трудно, расчерти сетку. Буквально сетку и от нее отталкивайся: сможешь понять, сколько в итоге должно быть колонок и строк.

Сходу могу сказать, что колонок тут должно быть не меньше 12.

Хотя может быть и проще было бы сделать это на флексах. Просто вложить 3 строки со своими правилами в «средний блок» родительской строки.