Pinterest風カードレイアウト

HTML

<ul>
  <li>
    <img src="picture01.jpg" alt="">
    <p>PinterestレイアウトをCSSのみで実装</p>
  </li>
  <li>
    <img src="picture02.jpg" alt="">
    <p>column-countはかなり便利</p>
  </li>
  <li>
    <img src="picture03.jpg" alt="">
    <p>少ないコードで実装できるのは嬉しい</p>
  </li>
  …
</ul>

CSS

ul {
  column-count: 3;
  padding: 20px;
  list-style: none;
}

li {
  break-inside: avoid;
}

img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}

p {
  font-size: 13px;
  text-align: center;
}