Как вызвать css grid в javascript
Перейти к содержимому

Как вызвать css grid в javascript

  • автор:

Как изменить grid с помощью JS?

Изначально, у грида 4 колонки, при нажатии на кнопку должно передаваться другое значение, в данном случае 2е колонки по 1fr.

  • Вопрос задан более трёх лет назад
  • 244 просмотра

Комментировать

Решения вопроса 1

Bully55

Front end developer

Я думаю было бы лаконичнее создать отдельный класс с нужными вам значениями и по клику просто поменять класс элементу при помощи JS 🙂

Ответ написан более трёх лет назад

CSS Grid: Работа с автоматическим переносом элементов

CSS Grid является мощным инструментом для создания сложных макетов веб-страниц. Однако часто возникает вопрос о том, как сделать так, чтобы элементы внутри сетки автоматически переносились на следующую строку без использования медиазапросов.

Обычная проблема

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

 
1
2
3
4

.grid < display: grid; grid-gap: 10px; grid-auto-flow: column; grid-template-columns: 186px 186px 186px 186px; >.grid > *

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

Решение проблемы

Для решения этой проблемы можно использовать свойство grid-template-columns с функцией repeat() . Это позволит задать количество колонок и их ширины, и при изменении размера окна браузера элементы будут переноситься на следующую строку.

.grid

В данном случае, repeat(auto-fill, minmax(186px, 1fr)) создает столько колонок шириной в 186px, сколько влезет в ряд. Если ширина окна браузера становится меньше, чем общая ширина колонок, элементы автоматически переносятся на следующую строку.

Заключение

CSS Grid предоставляет гибкие возможности для создания сложных макетов без использования медиазапросов. Используя функцию repeat() в свойстве grid-template-columns , можно добиться автоматического переноса элементов на следующую строку при уменьшении ширины окна браузера.

Как определить положение блока в grid-сетке?

Есть ли какое api или хитрый способ узнать текущее местоположение элемента в grid-сетке (CSS Grid Layout) (номер колонки, номер строки)?

  • Вопрос задан более трёх лет назад
  • 146 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 1

rockfeeler

Антон Усачев @rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист

Думаю, без скрипта и дальнейшей логической математики тут не обойтись. Но для начала можно просто посчитать позицию ячейки относительно родителя (грида):

Затем смотреть, что имеем по количеству колонок и прочего, и как-то делить/высчитывать, если грид динамический например.

Адаптивная masonry сетка на JS и CSS Grid

Уже не в первый раз сталкиваюсь с просьбой заказчиков реализовать Masonry сетку. В случае с не адаптивной вёрсткой особых проблем нет, есть множество библиотек, которые позволяют сделать это. Однако, все они работают при помощи абсолютного позиционирования карточек внутри сетки. Что совсем не подходит если мы хотим сделать сетку адаптивной. Конечно, есть и такие реализации, однако они работают не всегда корректно и я сам сталкивался с проблемами при их использовании.

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

Для использования вам необходимо установить саму библиотеку:

Добавить комментарий

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