Как расположить блоки произвольной высоты в колонки?

Question

weranda @weranda

HTML
CSS

Как расположить блоки произвольной высоты в колонки?

Приветствую.
Запамятовал. Есть блоки разной высоты, надо их расположить, к примеру, в три колонки так, чтобы нижний блок лип к верхнему. Вот так:

Подскажите, пожалуйста, как это сделать, не прибегая к JS.

P.S.
Забыл добавить, что код блоков выглядит так:

<ul>
	<li>
		<div class="title"></div>
		<div class="description"></div>
	</li>
	<li>
		<div class="title"></div>
		<div class="description"></div>
	</li>
	<li>
		<div class="title"></div>
		<div class="description"></div>
	</li>
	<li>
		<div class="title"></div>
		<div class="description"></div>
	</li>
	<li>
		<div class="title"></div>
		<div class="description"></div>
	</li>
</ul>

Вопрос задан более года назад
180 просмотров

5 комментариев

Подписаться 2 Простой 5 комментариев

Илья Салигжанов @Le_Traceur_Snork

Вы бы их хоть пронумеровали, чтобы было яснее)
Вариантов, в зависимости от нумерации, как минимум четыре:
1. flex
2. grid
3. column-count
4. JS-плагин `Masonry`

Написано более года назад
Ankhena @Ankhena Куратор тега CSS

css columns

Написано более года назад
weranda @weranda Автор вопроса

Ankhena, Спасибо. Пока искал, нашел и подумал — да что там заморачиваться с флексами/гридами. Column просто использую и все.

Написано более года назад
Ankhena @Ankhena Куратор тега CSS

weranda, а флексами или гридами так просто такой результат и не получится

Написано более года назад
Lynn «Кофеман» @Lynn

google masonry

Написано более года назад

Вы бы их хоть пронумеровали, чтобы было яснее)
Вариантов, в зависимости от нумерации, как минимум четыре:
1. flex
2. grid
3. column-count
4. JS-плагин `Masonry`
Ankhena, Спасибо. Пока искал, нашел и подумал — да что там заморачиваться с флексами/гридами. Column просто использую и все.
weranda, а флексами или гридами так просто такой результат и не получится

Answer 1 · 2023-08-16 15:00:20

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style>
		li{
			border: 2px solid black;
			display: inline-block;
		}
		ul{
			display: flex;
		}
	</style>
</head>
<body>
<ul>
  <li  style="height: 300px;width: 225px;">
    <div class="title"></div>
    <div class="description"></div>
  </li>
  <li  style="height: 400px;width: 225px;">
    <div class="title"></div>
    <div class="description"></div>
  </li>
  <li style="height: 450px;width: 225px;">
    <div class="title"></div>
    <div class="description"></div>
  </li>
  <li style="height: 500px;width: 225px;">
    <div class="title"></div>
    <div class="description"></div>
  </li>
  <li style="height: 300px;width: 225px;">
    <div class="title"></div>
    <div class="description"></div>
  </li>
</ul>
</body>
</html>

Как расположить блоки произвольной высоты в колонки?

Войдите на сайт