VGreen 9 Опубликовано: 28 января Рассказать Опубликовано: 28 января Всем привет. Решил я тут понять что такое grid. Полазил - погуглил, зверь интересный, кода меньше чем у флекса, но собака сложный в освоении)) Вообщем у меня тупик, не могу понять как сделать адаптивность без медиа - запросов, может кто сможет подсказать. Имеем следующее и собственно код <div class="parent"> <div class="div1"> </div> <div class="div2"> </div> <div class="div3"> </div> <div class="div4"> </div> <div class="div5"> </div> <div class="div6"> </div> </div> .parent { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-template-rows: repeat(2, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; } .div1 { grid-area: 1 / 1 / 3 / 3; background-color: #f1951c; min-height: 400px; } .div2 { grid-area: 1 / 3 / 3 / 5; background-color: #f1951c; min-height: 400px; } .div3 { grid-area: 1 / 5 / 2 / 6; background-color: #f1951c; min-height: 400px; } .div4 { grid-area: 1 / 6 / 2 / 7; background-color: #f1951c; min-height: 400px; } .div5 { grid-area: 2 / 5 / 3 / 6; background-color: #f1951c; min-height: 400px; } .div6 { grid-area: 2 / 6 / 3 / 7; background-color: #f1951c; min-height: 400px; } Однако при изменении размеров экрана, блоки не переносятся ниже, а просто пропадают Можете подсказать в чем у меня ошибка, ведь по логике как только правая колонка блоков не влезает, она должна сместиться на третий ряд, затем следующая и т.д. И если не сложно набросать пример кода, чтобы на будущее я имел представление как правильно с этим работать, заранее спасибо)) Если кто знает хорошие статьи по grid-у буду рад ссылкам Цитата Ссылка на сообщение Поделиться на других сайтах
radrigo 175 Опубликовано: 1 февраля Рассказать Опубликовано: 1 февраля А почему собственно они должны переноситься? У вас чётко прописано при помощи grid-area, где каждый контейнер должен находиться. Какое бы разрешение экрана не было, они всегда будут на своём месте. Попробуйте для начала убрать ограничение в количестве строк, указав в grid-template-rows тоже auto-fit. Также вообще уберите значение grid-area в блоках. А для первых двух блоков укажите следующие значения, чтобы они занимали по две строчки и по двое колонки. grid-column-end: span 2; grid-row-end: span 2; Не знаю, получится или нет, но вроде должно Кстати, для изучения грид попробуйте поиграть в эту игру. Какой-то блогер написала. Мне очень помогло https://cssgridgarden.com/#ru 1 Цитата Ссылка на сообщение Поделиться на других сайтах
VGreen 9 Опубликовано: 1 февраля Рассказать Опубликовано: 1 февраля Автор 11 минут назад, radrigo сказал: А почему собственно они должны переноситься? У вас чётко прописано при помощи grid-area, где каждый контейнер должен находиться. Какое бы разрешение экрана не было, они всегда будут на своём месте. Попробуйте для начала убрать ограничение в количестве строк, указав в grid-template-rows тоже auto-fit. Также вообще уберите значение grid-area в блоках. А для первых двух блоков укажите следующие значения, чтобы они занимали по две строчки и по двое колонки. grid-column-end: span 2; grid-row-end: span 2; Не знаю, получится или нет, но вроде должно Кстати, для изучения грид попробуйте поиграть в эту игру. Какой-то блогер написала. Мне очень помогло https://cssgridgarden.com/#ru Благодарю, испробуем Цитата Ссылка на сообщение Поделиться на других сайтах
igorek-art 33 Опубликовано: 11 февраля Рассказать Опубликовано: 11 февраля Я тоже пытаюсь грид этот освоить.. Вот смотрю, везде используются пиксели по высоте или подобное.. А как сделать например чтоб пропорциональнасть всегда сохранялась? Например я хочу в ряд 4 блока (с этим понял) но я не понимаю, как я понял по умолчанию это что-то типа соотношение ширину высоты 1к1, а как например прописывается если я не хочу квадрат, я хочу вертикальный прямоугольник с соотношением ширины к высоте 1 к 1.2 например? Пока приходится высоту ручками писать но это не то.. Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.