0

In the below example is it possible to have the grid item's height be based off content and pushed to the top? I tried setting some grid-template-rows and grid-auto-flow but that doesn't seem to work either.

So it would look like this: enter image description here

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  list-style: none;
  max-width: 500px;
}

.wrapper > li {
  border: 1px solid black;
}
<ul class="wrapper">
  <li>
    <a href="#">Heading</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Heading</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Heading</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Heading</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Heading</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Heading</a>
    <ul>
      <li><a href="#">Item 1</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Heading</a>
  </li>
</ul>
Maurice
  • 325
  • 2
  • 12
  • 1
    What you're asking about is a masonry layout. Here's how it works in grid css: https://stackoverflow.com/q/44377343/3597276 – Michael Benjamin Jul 10 '18 at 16:24
  • 1
    @Michael_B Ah I see, thanks for that link. I wanted to avoid using JS if possible but it looks like this isn't possible with just CSS then if the height is undefined. – Maurice Jul 10 '18 at 16:38

0 Answers0