Css Grid Column

Question

нужно разместить колонки как на примере ниже с помощью 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>

Answer 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>

Answer 2

Можно и на гридах - нужно просто разбить на правильное количество рядов (в Вашем примере их условно 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>

БЛОГ НА HUSL

Css Grid Column

Ответы (2 шт):