Шаблоны сеток на CSS Grid

Во всех вариантах используется CSS-свойство display: grid;

Вариант 1:

1
2
3

Вариант 2:

1
2
3
4

Вариант 3:

1
2
3

Вариант 4:

1
2
3

Смотрите также:

Вариант каменной кладки блоков и изображений без использования JS

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

Ваш комментарий отправлен!

Комментарии:

  • Михаил:

    Александр, а как их сделать разной ширины?

    Ответить
    • Alexander:

      Например, для 4 варианта, так:

      .grid.template-4 {
      	grid-template: "a sidebar" "b sidebar";
      	grid-template-columns: auto 300px;
      }
      Ответить