css - How to specify the CSS grid columns for the least unused space

Question

Assuming I have a number of items, arranged in grid cells of equal width, how do I specify the columns so that they don't leave extra unused space?

The original grid (with space waste on the right) example:

const COLOURS = [
  'navy',
  'green',
  'maroon',
  '#80B0BF',
  '#006241',
  '#573862'
]

window.addEventListener('load', () => {
  const grid = document.getElementById('grid')
  
  for (let i = 0; i < 20; i++) {
    let el = document.createElement('div')
    el.classList.add('element')
    el.style.backgroundColor = _.sample(COLOURS)
    grid.appendChild(el)
  }
})

.grid {
  display: grid;
  width: 400px;
  border: 3px solid black;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-gap: 10px;
}

.element {
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

<div class="grid" id="grid">
</div>

标签： csscss-grid

Answer 1

用于minmax(<constant value>, 1fr)自动扩展行。

const COLOURS = [
  'navy',
  'green',
  'maroon',
  '#80B0BF',
  '#006241',
  '#573862'
]

window.addEventListener('load', () => {
  const grid = document.getElementById('grid')
  
  for (let i = 0; i < 20; i++) {
    let el = document.createElement('div')
    el.classList.add('element')
    el.style.backgroundColor = _.sample(COLOURS)
    grid.appendChild(el)
  }
})

.grid {
  display: grid;
  width: 400px;
  border: 3px solid black;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 10px;
}

.element {
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<div class="grid" id="grid">
</div>