网格项目可以包装吗？

Question

如何将网格项目包裹在容器内？因为每当输入 64 作为新的网格大小时，网格项就会溢出其容器。我想让网格项适应网格容器的大小。

所以基本上，无论添加多少新网格项，我都希望网格容器保持其大小。

const grid = document.querySelector('#grid-container');

function makeGrid(rows, cols) {
  for (let i = 0; i < (rows * cols); i++) {
    grid.style.setProperty('--grid-rows', rows);
    grid.style.setProperty('--grid-cols', cols);
    let tile = document.createElement('div');
    grid.appendChild(tile).className = 'grid-item';
    //fill color
    tile.addEventListener('mouseover', () => {
      tile.style.backgroundColor = 'black';
    })
  }
}
makeGrid(16, 16);

function resizeGrid() {
  const resizeBtn = document.querySelector('#resize-btn');

  resizeBtn.addEventListener('click', () => {
    //remove default grid
    const gridItem = document.querySelectorAll('.grid-item');
    gridItem.forEach((item) => {
      grid.removeChild(item);
    })
    //create new grid
    let input = prompt('number of tiles per side');
    let rows = input;
    let cols = rows;
    makeGrid(rows, cols);
  })
}

resizeGrid();

:root {
  --grid-rows: 1;
  --grid-cols: 1;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#resize-btn {
  padding: 5px 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: #333;
  color: #f1f1f1;
  font-size: 16px;
  border: none;
  border-radius: 5px;
}

#grid-container {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  min-width: 500px;
  min-height: 500px;
  border: 10px solid coral;
  background-color: rgb(247, 208, 194);
  border-radius: 10px;
}

.grid-item {
  border: 1px solid black;
  padding: 1em;
}

<div class="container">
  <button id="resize-btn">Resize</button>
  <div id="grid-container"></div>
</div>

Answer 1

您的布局添加了列和行：

#grid-container {
   display: grid;
   grid-template-rows: repeat(var(--grid-rows), 1fr); 
   grid-template-columns: repeat(var(--grid-cols), 1fr);
}

列和行不换行。它们附加到现有的一组列或行。

因此，此布局中的网格项不会换行。它们占据了新轨道创建的单元格。

如果您想要项目环绕的布局，请使用网格 auto-fit 或 auto-fill 函数，这会将列或行的创建限制为容器的大小。这些功能和限制一起工作，使网格项目能够跨轨道流动。

另一个选项是 flexbox，它不生成列或行轨道，只生成柔性线。

这些帖子可能会提供进一步的指导：

Answer 2

每次创建 div 时，都需要考虑边距、边框、填充和内容区域。在这种情况下，如果您将填充设置为 1em，并希望显示许多 div，但它们放不下它们的容器，这将增加容器的大小。

只需将 margin 和 padding 设置为零，并使用 outline 代替 border，这不会占用额外的空间 space，因此不会使您的容器变大。

CSS

   .grid-item {
      outline: 1px solid blue;
      padding: 0;
      margin: 0;
    }

** 顺便说一句，如果你想在每个 div 中放置任何内容，请给它自己喜欢的 box-model 属性，并考虑它们采用 space.

这是您期待的结果吗？

网格项目可以包装吗？

Can grid items wrap?

javascript

css

overflow

css-grid