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

Question

[Марат Шакиров]

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

Comments

[Danny Arty]

А что конкретно у вас не получилось? Что пробовали? Задача максимально простая

[Марат Шакиров]

Danny Arty, через grid-template-area, но там последующие новости накладываются друг на друга.

В ответе ниже похожий пример, очень помог, но не пойму, как 4 блок перенести в 3 колонку сначала?
Использовал данные стили, но 4 блок был на месте 5, и последующие не заполняли свободные ячейки

.block {
 display:grid;
Grid-templates-columns: repeat (3, 1fr)
}

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

Answer 1

[Ankhena]

Пройдите игру по гридам https://cssgridgarden.com/#ru
Очень помогает, в том числе и с вашим вопросом.
Дел на полчаса, а результат в голове очень заметный.

И пример аналогичной раскладки
https://codepen.io/AnnaSummer/pen/vYryQvo

Comments

[Марат Шакиров]

Спасибо! Ваш пример сильно помог, но еще одну проблему описал выше в комментарии! Спасибо за игру, обязательно пройду

[Ankhena]

Марат Шакиров,
Можно:
1. Поменять порядок при выводе.
2. Погуглить "grid dense"
3. Указывать номера линий через grid-column для "четверок"

[Марат Шакиров]

Ankhena, в точку, grid-auto-flow: dense сработал! Спасибо огромное!

Answer 2

[Сергей delphinpro]

но не пойму, как 4 блок перенести в 3 колонку сначала?
Использовал данные стили, но 4 блок был на месте 5, и последующие не заполняли свободные ячейки

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

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

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