javascript - 具有固定宽度和高度的元素的网格

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 我得到上面的结果。但是当更改屏幕宽度时，单元格会被拉伸(stretch)。

使用 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

flex 盒子

在你的 flex 版本中你说:

The cells have a fixed height and width.

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

flex 容器的初始设置是 flex-shrink: 1 .这意味着 flex 元素可以缩小它们的初始大小以保留在它们的容器内。

该属性沿主轴应用，这意味着在行方向容器中，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