CODEWITHSUNDEEP
csscss-grid
Joeyboy
Joeyboy

Reputation: 472

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;
}

Upvotes: 0

Views: 730

Answers (1)

connexo
connexo

Reputation: 56754

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>

Upvotes: 2

Related Questions