Как сделать адаптивную grid сетку?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Необходимо отобразить n картинок в grid сетке, чтобы в одной строке было например 3 картинки, и в случае если картинок не хватает для заполнения строки, например их изначально 5, 3 в первую строку, 2 во вторую, чтобы 2 растянулись до 50% от родителя.

Дополнительно:

Грид на 6 колонок.
Все элементы занимают по 2 колонки.

А дальше строить логику на :nth-child
https://css-live.ru/articles/resheno-s-pomoshhyu-c...

Если последний элемент одновременно и второй из трех, то путь занимает 3 колонки
:nth-child(3n+2):last-child {grid-column: span 3}
Аналогично для второго с конца и одновременно первого из трех.
И для последнего с конца и одновременно первого из трех задать 6 колонок.

Либо в одну строчку на флексах :)

  • По поводу flex поподробнее, я не так опытен в css и представляю решение через flex только примерно. Потом обязательно перепишу на гриды, пожалуйста
  • Solevoy_2015, https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Артём Dev Ответ

Для создания адаптивной сетки с помощью CSS можно использовать flexbox или CSS Grid. Flexbox обеспечивает гибкость в распределении элементов внутри контейнера, в то время как CSS Grid позволяет создавать сетки с установленным количеством столбцов и строк.

Вот пример использования flexbox для создания адаптивной сетки:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> </div>

.grid-container {
  display: flex;
  flex-wrap: wrap;
}
 
.grid-item {
  flex: 1 1 200px; /* гибкость элемента, минимальная и максимальная ширина */
  margin: 10px; /* внешний отступ между элементами */
}

.grid-container { display: flex; flex-wrap: wrap; } .grid-item { flex: 1 1 200px; /* гибкость элемента, минимальная и максимальная ширина */ margin: 10px; /* внешний отступ между элементами */ }

В данном примере контейнер с классом "grid-container" использует flexbox для размещения элементов внутри себя. Свойство "flex-wrap: wrap;" указывает, что элементы могут переноситься на новую строку при необходимости. Элементам с классом "grid-item" присвоено свойство "flex: 1 1 200px;", которое указывает на гибкость элементов и их минимальную и максимальную ширину.

Если вы предпочитаете использовать CSS Grid, то вот пример:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> </div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* повторение столбцов с минимальной шириной */
  grid-gap: 10px; /* расстояние между элементами */
}
 
.grid-item {
  background-color: #f2f2f2;
  padding: 20px;
}

.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* повторение столбцов с минимальной шириной */ grid-gap: 10px; /* расстояние между элементами */ } .grid-item { background-color: #f2f2f2; padding: 20px; }

В данном примере контейнер с классом "grid-container" использует CSS Grid для создания сетки с повторяющимися столбцами шириной не менее 200px. Свойство "grid-gap: 10px;" устанавливает расстояние между элементами.

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов