Как сделать такую сетку Grid?

Question

[Дмитрий Самойлов]

Здравствуйте, я делаю сетку для вывода статей wp, поэтому нет возможности добавлять для каждого блока свои стили, поэтому я выбрал grid, сейчас я делаю обычную сетку, которая задает размер блокам по 1 шаблону, выглядит это так

width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 40px;
    grid-auto-rows: minmax(300px, auto);

Но я хочу сделать неправильную сетку, чтобы выглядела как на этом фото
Как можно реализовать это с помощью grid? я слышал о варианте с :nth-child, но хотелось бы узнать, если ли у грида какой то встроенный способ для этого, может посоветуете что то

Answer 1

[Сергей delphinpro]

Делаете примерно такую сетку (в grid-template-columns)



Первый, второй, пятый и шестой элементы растягиваем на две колонки

.item:nth-child(6n + 1),
.item:nth-child(6n + 2),
.item:nth-child(6n + 5),
.item:nth-child(6n + 6) {
  grid-cloumn: span 2;
}

Comments

[Дмитрий Самойлов]

спасибо, получилось разобраться

[Дмитрий Самойлов]

Только я немного поправил, оставил только

.articl-lenta__top_news:nth-child(6n + 1),
    .articl-lenta__top_news:nth-child(6n + 6) {
        grid-column: span 2;
    }

В первом варианте сетка была странной, постоянно разные размеры получались

[Сергей delphinpro]

Дмитрий Самойлов, нормально всё должно быть

[Дмитрий Самойлов]

Сергей delphinpro, хм... возможно у меня что то не так было, просто после 2 повторений блоки стали занимать 50% ширины, а потом опять возвращалась нормальная сетка и получалось что то странное

[Дмитрий Самойлов]

Сергей delphinpro, а, все понял, просто у меня сетка была 1fr 1fr 1fr 1fr

[Kadzi]

Сергей delphinpro, привет, если не трудно, хочу ваш коммент по данному вопросу Идеальный алгоритм вёрстки сайта?