0

нужно разместить колонки как на примере ниже с помощью grid layout. Вопрос, возможно ли такое? Нужно сместить некоторые колонки, я не знаю как это сделать, код предоставлен ниже.

Пример

body {
    margin: 0;
    padding: 0;
    background: #000;
    color: purple;
    min-height: 100vh;
}

* {
    box-sizing: border-box;
}

.container {
    max-width: 1170px;
    margin: 0 auto;
}

.parents {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
    grid-template-rows: repeat(4, minmax(auto, auto));
}

.children {
    padding: 20px;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
}

.children:nth-child(1) {
    background: white;
}

.children:nth-child(2) {
    background: white;
}

.children:nth-child(3) {
    background: red;
}

.children:nth-child(4) {
    background: red;
}

.children:nth-child(5) {
    background: green;
}

.children:nth-child(6) {
    background: green;
}
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="parents">
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing
            </div>
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing
            </div>
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing 
            </div>
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing 
            </div>
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing 
            </div>
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing 
            </div>
        </div>
    </div>
</body>

</html>

1
  • Кажется, картинка немного сбивает всех с толку. Что значит "сместить некоторые колонки"? Сместить вверх-вниз относительно друг друга или сместить вправо-влево относительно сетки? (К чему там зеленые вертикальные линии изображены?) 1 сен 2021 в 20:45

2 ответа 2

3

Можно и на гридах - нужно просто разбить на правильное количество рядов (в Вашем примере их условно 14) и задать каждому блоку свою рядность:

body {
    margin: 0;
    padding: 0;
    background: #000;
    color: purple;
    min-height: 100vh;
}
* {
    box-sizing: border-box;
}
.container {
    max-width: 1170px;
    margin: 0 auto;
}
.parents {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
    grid-template-rows: repeat(14, minmax(50px,auto));
}
.children {
    padding: 20px;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
}
.children:nth-child(1) {
    background: white;
    grid-row: 1 / 4;
}
.children:nth-child(2) {
    background: white;
    grid-row: 1 / 5;
}
.children:nth-child(3) {
    background: red;
    grid-row: 4 / 9;
}
.children:nth-child(4) {
    background: red;
    grid-row: 5 / 9;
}
.children:nth-child(5) {
    background: green;
    grid-row: 9 / 14;
}
.children:nth-child(6) {
    background: green;
    grid-row: 9 / 13;
}
    <div class="container">
        <div class="parents">
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing 1
            </div>
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing 2
            </div>
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing 3
            </div>
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing 4
            </div>
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing 5
            </div>
            <div class="children">
                Lorem, ipsum dolor sit amet consectetur adipisicing 6
            </div>
        </div>
    </div>

1
  • 1
    Великолепное решение! Спасибо!
    – selyaninov
    14 сен 2021 в 8:45
1

C помощью grid layout именно так не получится. Высота блоков должна быть кратна трекам. (Зная необходимую высоту элемента, вы можете растянуть его на несколько горизонтальных рядов, как ячейку в таблице.)

Если последовательность заполнения контейнера горизонтальными рядами блоков для вас не критична, то возможно подойдут обычные колонки:

body {
  margin: 0;
  padding: 0;
  background: #000;
  color: purple;
  min-height: 100vh;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.parents {
  padding: 20px;
  column-count: 2;
  column-gap: 20px;
  column-fill: balance;
}

.children {
  padding: 20px;
  background: #000;
  border-radius: 15px;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 20px;
}

.children:nth-child(1) {
  background: white;
}

.children:nth-child(2) {
  background: white;
}

.children:nth-child(3) {
  background: red;
}

.children:nth-child(4) {
  background: red;
}

.children:nth-child(5) {
  background: green;
}

.children:nth-child(6) {
  background: green;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="parents">
      <div class="children">
        Lorem, ipsum dolor sit amet consectetur adipisicing
      </div>
      <div class="children">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      </div>
      <div class="children">
        Lorem, ipsum dolor sit amet consectetur adipisicing
      </div>
      <div class="children">
        Lorem, ipsum dolor sit amet consectetur adipisicing
      </div>
      <div class="children">
        Lorem, ipsum dolor sit amet consectetur adipisicing
      </div>
      <div class="children">
        Lorem, ipsum dolor sit amet consectetur adipisicing
      </div>
    </div>
  </div>
</body>

</html>

5
  • Не получится? А объединение строк как же? Только надо знать, какой блок меньше. А если любой, то просто ещё обёртку вложить.
    – Qwertiy
    1 сен 2021 в 11:32
  • @Qwertiy глядя на код автора вопроса, вижу, что там не подразумевается фиксированная высота блоков, т.е. она зависит от объема текста. Конечно, можно написать скрипт, который будет вычислять необходимое значение grid-row. Но опять же, Java Script не было в тегах к вопросу... 1 сен 2021 в 14:41
  • Так фиксированная высота и не нужна.
    – Qwertiy
    1 сен 2021 в 15:00
  • 1
    @Qwertiy относительно свежий и исчерпывающий пост на тему masonry layout (то, чего автор очевидно хотел бы добиться): habr.com/ru/post/526008 — нативно с помощью grid это пока не поддерживается в полной мере браузерами 1 сен 2021 в 16:55
  • 1
    Хм.. По вопросу я совершенно не понял, что он хочет масонри...
    – Qwertiy
    1 сен 2021 в 20:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.