Как я могу построить сетку 12 на 12 с помощью javascript?
Для ясности я использую svelte, раньше я использовал макет сетки css следующим образом:
#global_grid{
display: grid;
grid-template-columns: repeat(12, calc(100vw / 12));
grid-template-rows: repeat(12, calc(100vh / 12));
}
Проблема, с которой я сталкиваюсь, заключается в том, что сетка больше, чем внутренняя высота браузера, поскольку я использую 100vh. Я не знаю, как решить проблему, с которой я столкнулся, я подумал, что нужно сделать window.outerheight - window.innerheight, чтобы получить разницу в пикселях, и вычесть это количество внутри grid-template-rows: repeat(12, calc(100vh / 12));. Я также просто мог бы сделать внутреннюю высоту / 12, которую я себе представляю.
Чтобы еще раз уточнить, я использую svelte и хотел бы разбить страницу на сетку 12 на 12. Использование только css оставляет дополнительное пространство внизу, я думаю, что это дополнительная высота в результате заголовка браузера. Я бы предпочел решить с помощью css, любая помощь очень ценится!
Я удалил отступы и поля из тела и html, мой вывод основан на том факте, что 100vh приводит к необходимости немного прокручивать страницу, я пытался сделать только повтор (12, 1fr) в самом начале, но это не работает не создавать ячейки одинакового размера
Возможно, вы ищете minmax(0, 1fr)svelte.dev/repl/a84d759237c04236bd058ff3d28d505c?version=3.55.0
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это то, что вы хотите сделать?
Во-первых, убедитесь, что вы установили 100% для высоты и ширины элементов html и body, так как у них нет размера по умолчанию.
Затем установите значения 100vh и 100vw для элемента-контейнера с заголовком и сеткой. Дайте ему flex дисплей с column направлением, которое установит вертикальный поток.
Чтобы ваш элемент сетки занимал только оставшееся пространство области просмотра после высоты вашего заголовка, присвойте элементу сетки значение flex: 1. Кроме того, используйте 100% в своих функциях calc, поскольку вы уже установили его контейнер так, чтобы он покрывал все окно просмотра, и вы не хотите пересчитывать элемент заголовка. Если вам нужны границы или зазоры в сетке, не забудьте рассчитать смещение, которое будет вносить каждый зазор в вашем шаблоне.
Вот код:
const globalGrid = document.getElementById("global-grid");
for (let i = 0; i < 12; i++) {
for (let j = 0; j < 12; j++) {
const node = document.createElement("div");
node.classList.add('grid-cell');
globalGrid.appendChild(node);
}
}body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.layout {
display: flex;
flex-direction: column;
height: 100vh;
width: 100v;
}
.header {
display: flex;
justify-content: center;
align-items: center;
height: 2em;
}
#global-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(12, calc((100% - 12px) / 12));
grid-template-rows: repeat(12, calc((100% - 12px) / 12));
border: solid 1px black;
background-color: black;
gap: 1px;
}
.grid-cell {
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}<div class = "layout">
<div class = "header">Header</div>
<div id = "global-grid" />
</div>
«Проблема, с которой я столкнулся, заключается в том, что сетка больше, чем внутренняя высота браузера, поскольку я использую 100vh». Я не очень понимаю этот вывод. Вы не забыли избавиться от настроек полей браузера по умолчанию? А как вы тестируете? (Настоящие устройства или эмуляция браузера?) И пробовали ли вы установить сетку высотой 100vh и использовать повторение (12, 1fr) вместо выполнения вычислений?