Выровнять блок со второго ряда, к блоку первого ряда. Grid css

Question

Как выровнять div к верху вне зависимости от высоты рядов? На моем примере: прилепить div (с текстом 4) к div, который находиться выше него. Нашла что то про "mansory", но кажется это немного другое.

.main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.main div {
  width: 50px;
  padding: 20px;
  background: #ff7e7e;
  text-align: center;
  border: 5px solid #ffdd83;
}

.center_block{
height: max-content;
}

.grid_column_item {
  grid-row: 2;
  grid-column: 3;
}

<div class="main">
  <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </div>
  <div>2</div>
  <div class="center_block">Lorem Ipsum is simply dummy text of</div>
  <div class="grid_column_item">4</div>
  <div>5</div>
  <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.

  </div>
</div>

Answer 1

То что вы ищете действительно называется "mansory". К сожалению браузеры пока не поддерживают grid-template-rows: masonry;

https://caniuse.com/mdn-css_properties_grid-template-rows_masonry

На данные момент только FF с включенной опцией умеет отобразить это свойство layout.css.grid-template-masonry-value.enabled = true

Выглядеть будет вот так

Пока что ищите другие варианты сделать то что вам надо.

.main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: masonry;
}

.main div {
  width: 50px;
  padding: 20px;
  background: #ff7e7e;
  text-align: center;
  border: 5px solid #ffdd83;
}

.center_block{
height: max-content;
}

.grid_column_item {
  grid-row: 2;
  grid-column: 3;
}

<div class="main">
  <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </div>
  <div>2</div>
  <div class="center_block">Lorem Ipsum is simply dummy text of</div>
  <div class="grid_column_item">4</div>
  <div>5</div>
  <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.

  </div>
</div>

Вариант конкретно под 5 колонок:

.main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.main>* {
  width: 50px;
  text-align: center;
}

.main>*:not(.center_block) {
  padding: 20px;
  background: #ff7e7e;
  border: 5px solid #ffdd83;
}

.center_block div {
  width: 50px;
  padding: 20px;
  background: #ff7e7e;
  border: 5px solid #ffdd83;
}

<div class="main">
  <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  <div>2</div>
  <div class="center_block">
    <div>Lorem Ipsum is simply dummy text of</div>
    <div>4</div>
  </div>
  <div>5</div>
  <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

И еще вариант, с абсолютным позиционированием:

.main {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.main div {
  width: 50px;
  padding: 20px;
  background: #ff7e7e;
  text-align: center;
  border: 5px solid #ffdd83;
}

.center_block {
  height: max-content;
}

.grid_column_item {
  position: absolute;
  bottom: 0;
  grid-row: 2;
  grid-column: 3;
}

<div class="main">
  <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  <div>2</div>
  <div class="center_block">Lorem Ipsum is simply dummy text of</div>
  <div class="grid_column_item">4</div>
  <div>5</div>
  <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

БЛОГ НА HUSL

Выровнять блок со второго ряда, к блоку первого ряда. Grid css

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