@Denioo

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

Здравствуйте, гридами раньше не пользовался но в рамках одной задачи необходимо сверстать подобное.
И лучше всего для этого подойдут гриды.
5efa0c8140d02084778171.png
Я понял что надо у главного дива сделать такие стили:
display: grid;
position: relative;
grid-template-columns: 34px 2fr 2fr 2fr 1fr 1fr 56px;
grid-auto-rows: 1fr;

3 строка должна быть статичной, а вторая строка должна выкатываться(или просто с display: none на block становиться) между первой и второй строкой по нажанию на кнопку третьей строки. Сама кнопка не сложна, механику понимаю, но
не могу понять как 1 столбец и последний сделать во все строки, и как собстенно сделать вторую строку ведь там колонок больше чем в первой.
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
В этом плане гриды мало отличаются от таблиц, поэтому подход по расчетам должен быть идентичен (при одноуровневом вложении) — визуально, если в голову пока трудно, расчерти сетку. Буквально сетку и от нее отталкивайся: сможешь понять, сколько в итоге должно быть колонок и строк.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
03 июл. 2022, в 11:11
250 руб./за проект
03 июл. 2022, в 10:56
500 руб./за проект
03 июл. 2022, в 10:37
4000 руб./за проект