首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何为最少的未使用空间指定CSS网格列

如何为最少的未使用空间指定CSS网格列
EN

Stack Overflow用户
提问于 2018-07-21 01:08:51
回答 1查看 59关注 0票数 0

假设我有许多项,排列在等宽的网格单元格中,我如何指定列,使它们不会留下额外的未使用空间?

原始网格(右侧有空间浪费)示例:

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>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-21 01:08:51

对自动扩展的行使用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>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51447392

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档