Search code examples
csscss-grid

CSS Grid not fitting all columns

When trying to position 2 elements in a css grid, the second overflows to the next row even though there is enough column space for it to fit. As seen in photo: enter image description here

CSS:

.grid-parent {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  height: 100vh;
}

.map {
  grid-column: 5 / -1;
}

.nav-panel-container {
  grid-column: 1 / 5;
}
Solution

  • This usually happens when your source order doesn't match your visual / grid order.

    Adding

    .grid-parent { grid-auto-flow: column dense; }

    should fix the problem.

    See this example:

    ul {
  display: grid;
  list-style-type: none;
  grid-gap: 10px;
  height: 200px;
  padding: 0;
}

li {
  margin: 0;
  border: 5px dashed #999;
  display: block;
  text-align: center;
  line-height: 170px;
  font-family: roboto, sans-serif;
  font-size: 80px;
  color: #999;
}

.dense {
  grid-auto-flow: column dense;
}
    <ul id="sample">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li style="grid-column-start: 5;">5</li>
  <li style="grid-column-start: 4;">4</li>
</ul>

<button type="button" onclick="sample.classList.toggle('dense')">Toggle grid-auto-flow: column dense</button>