Using flexbox or CSS Grid to achieve masonry type layout

Question

I have seen similar threads regarding this topic (namely this one), however the solutions recommended do not seem to do the trick for me.

I have 4 nav items which I want to display in a 2x2 layout. Using CSS Grid, the strict heights (as it needs to match the previous elements height) are causing issues for me.

I have tried 3 approaches so far, with a mixture of CSS grid and flexbox

Approach 1

• Using min-content and max-content
• In the demo, you can see the excessive spacing between the 2nd and 4th nav's. I only want 40px spacing below the nav's

:root {
  --black: #000000;
  --white: #FFFFFF;
  --grey: #707070;
}

body {
  background: var(--black);
  color: var(--white);
}

.container {
  max-width: 740px;
  margin: 0 auto;
  padding: 30px 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  /* grid-auto-rows: fit-content(1em); */
  grid-auto-rows: minmax(-webkit-min-content, -webkit-max-content);
  grid-auto-rows: minmax(min-content, max-content);
}

.nav {
  margin-bottom: 40px;
  border-left: 1px solid var(--grey);
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 20px;
}

<div class="container">
  <div class="grid">

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
        <li>List 6</li>
        <li>List 7</li>
      </ul>
    </nav>

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </nav>

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
      </ul>
    </nav>

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </nav>

  </div>

</div>

Approach 2

:root {
  --black: #000000;
  --white: #FFFFFF;
  --grey: #707070;
}

body {
  background: var(--black);
  color: var(--white);
}

.container {
  max-width: 740px;
  margin: 0 auto;
  padding: 30px 0;
}

.grid {
  display: grid;
  /*   grid-auto-rows: 100%; */
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
}

.nav {
  margin-bottom: 40px;
  border-left: 1px solid var(--grey);
}

.nav:nth-child(1) {
  grid-row: span 1;
}

.nav:nth-child(2) {
  grid-row: span 2;
}

.nav:nth-child(3) {
  grid-row: span 3;
}

.nav:nth-child(4) {
  grid-row: span 4;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 20px;
}

<div class="container">
  <div class="grid">

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
        <li>List 6</li>
        <li>List 7</li>
      </ul>
    </nav>

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </nav>

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
      </ul>
    </nav>

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </nav>

  </div>

</div>

Approach 3

• Using flexbox

:root {
  --black: #000000;
  --white: #FFFFFF;
  --grey: #707070;
}

body {
  background: var(--black);
  color: var(--white);
}

.container {
  max-width: 740px;
  margin: 0 auto;
  padding: 30px 0;
}

.grid {
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
}

.nav {
  margin-bottom: 40px;
  border-left: 1px solid var(--grey);
  width: 49%;
}

.nav:nth-child(odd) {
  order: 1;
}

.nav:nth-child(even) {
  order: 2;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 20px;
}

<div class="container">
  <div class="grid">

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
        <li>List 6</li>
        <li>List 7</li>
      </ul>
    </nav>

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </nav>

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
      </ul>
    </nav>

    <nav class="nav">
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
      </ul>
    </nav>

  </div>

</div>

Other

I have seen solutions suggesting the following (which I have also tried):

grid-template-rows: masonry
grid-template-columns: masonry

However, the masonry feature for grid only works in Firefox (after toggling it on). It shows as an invalid property in Chrome.