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

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>

现在每行的底部间距都很奇怪。

如何创建一个网格，使其宽度和高度保持在每个单元格 1px 的间距？

Answer 1

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

.p {
    font-size:0;
}

显示 inline 元素根据其字体大小具有基础边距

Answer 2

尝试使用

#page {
    font-size: 0;
}

Answer 3

弹性框

在你的 flex 版本中你说：

The cells have a fixed height and width.

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

弹性容器的初始设置是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

Answer 4

创建具有您想要的样式的网格的一种方法是使用 table 而不是一组 div 并为 [=15= 设置 min-width 属性 ]s.

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;
}

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

A grid with items having fixed width and height

javascript

css

jquery

flexbox

css-grid

弹性框

网格