@Marat20
Frontend разработчик

Как расположить блоки с помощью grid?

Как сделать такую сетку на css grid? Эти карточки - новости, при нажатии на кнопку подгружаются еще 5 новостей ниже с такой же сеткой

6412ae4e0a379927434703.png
  • Вопрос задан
  • 127 просмотров
Решения вопроса 2
Ankhena
@Ankhena Куратор тега HTML
Нежно люблю верстку
Пройдите игру по гридам https://cssgridgarden.com/#ru
Очень помогает, в том числе и с вашим вопросом.
Дел на полчаса, а результат в голове очень заметный.

И пример аналогичной раскладки
https://codepen.io/AnnaSummer/pen/vYryQvo
Ответ написан
delphinpro
@delphinpro Куратор тега HTML
frontend developer
но не пойму, как 4 блок перенести в 3 колонку сначала?
Использовал данные стили, но 4 блок был на месте 5, и последующие не заполняли свободные ячейки


.box:nth-child(3n) {
 grid-column: span 2
}


У вас повтор идет через пять блоков. Значит должно стоять 5n – каждый пятый
Но применяться должно к 4-му блоку в этой пятерке. Значит нужно добавить смещение + 4
Итог:

.box:nth-child(5n + 4) {
    grid-column: span 2;
}


Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы