具有固定宽度和高度的项目的网格

Question

目前我使用这些设置创建了一个 10x10 的网格：

/*
This code is easier than writing many lines of HTML code
*/

$(document).ready(() => {
  for (let i = 0; i < 10; i++) {
    const parent = $("<div></div>");
    parent.addClass("p");
    for (let j = 0; j < 10; j++) {
      const child = $("<div></div>");
      child.addClass("c");
      parent.append(child);
    }
    $("#page").append(parent);
  }
});

.p {
  display: flex;
  margin-top: 1px;
}

.c {
  width: 30px;
  height: 30px;
  margin-left: 1px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page"></div>

单元格具有固定的高度和宽度。这个网格可能比屏幕宽度大，但这没关系。

我希望每行的所有单元格都彼此相邻我尝试了两种方法：

使用display: flex 我得到了上面的结果。但是当改变屏幕宽度时，单元格会被拉伸。

使用display: inline-block 我得到这个结果：

$(document).ready(() => {
  for (let i = 0; i < 10; i++) {
    const parent = $("<div></div>");
    parent.addClass("p");
    for (let j = 0; j < 10; j++) {
      const child = $("<div></div>");
      child.addClass("c");
      parent.append(child);
    }
    $("#page").append(parent);
  }
});

.p {
  margin-top: 1px;
}

.c {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-left: 1px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page"></div>

现在我在每一行得到一个奇怪的底部间距。

如何创建一个保持其宽度和高度且每个单元格间距为 1 像素的网格？

Answer 1

尝试将此添加到您的第二个示例中

.p {
    font-size:0;
}

display inline 元素具有取决于其字体大小的底层边距

Answer 2

尝试使用

#page {
    font-size: 0;
}

Answer 3

弹性盒

在你的弹性版本中你说：

单元格具有固定的高度和宽度。

不，他们没有。宽度不固定。

弹性容器的初始设置是flex-shrink: 1。这意味着弹性项目可以从它们的初始大小缩小，以便保留在它们的容器内。

该属性沿主轴应用，这意味着在行方向容器中，flex-shrink 影响宽度。

这是您的代码，flex-shrink 已禁用：

$(document).ready(() => {
  for (let i = 0; i < 10; i++) {
    const parent = $("<div></div>");
    parent.addClass("p");
    for (let j = 0; j < 10; j++) {
      const child = $("<div></div>");
      child.addClass("c");
      parent.append(child);
    }
    $("#page").append(parent);
  }
});

.p {
  display: flex;
  margin-top: 1px;
}

.c {
  flex-shrink: 0; /* new */
  width: 30px;
  height: 30px;
  margin-left: 1px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page"></div>

jsFiddle demo

---

网格

对于更简单的解决方案，请使用 CSS 网格布局。

$(document).ready(function() {
  for (var i = 0; i < 100; i++)
    $("#container").append("<div style='background-color:red'></div>");
});

#container {
  display: grid;
  grid-template-rows: repeat(10, 30px);
  grid-template-columns: repeat(10, 30px);  
  grid-gap: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

jsFiddle demo

Answer 4

使用您想要的样式创建网格的一种方法是使用table 而不是divs 的集合，并为tds 设置min-width 属性。

const createGrid = (rows, columns) => {
  const table = document.createElement('table');
  document.body.appendChild(table);

  for (let i = 0; i < rows; i++) {
    let row = document.createElement('tr');
    table.appendChild(row);

    for (let j = 0; j < columns; j++) {
      let cell = document.createElement('td');
      row.appendChild(cell);
    }
  }
}

createGrid(10, 10);

table {
  border-spacing: 1px;
}
td {
  min-width: 30px;
  height: 30px;
  background: red;
}