Сетка с элементами, имеющими фиксированную ширину и высоту

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

Один из способов создать сетку с нужным вам стилем - это использовать table вместо набора div s и установить свойство min-width для td 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;
}

Answer 2

Попробуйте использовать

#page {
    font-size: 0;
}

Answer 3

Flexbox

В вашей версии flex вы говорите:

Ячейки имеют фиксированную высоту и ширину.

Нет, они этого не делают.Ширина не фиксирована.

Начальная настройка гибкого контейнера: 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 Grid Layout.

$(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

попробуйте добавить это во второй пример

.p {
    font-size:0;
}

display inline элементы имеют базовые поля в зависимости от размера шрифта