Как создать отзывчивые и совершенно прямоугольные сетки? ⇐ CSS

[Anonymous]

Рабочая демонстрация < /h4>
Вот демонстрация отзывчивых, совершенно прямоугольных сетей в CSS. Независимо от ширины экрана, сетка всегда будет сформировать идеальный прямоугольник. В настоящее время скрыт ">
[code]body {
max-width: 900px;
}

.grid-1 {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
gap: 5px;
max-width: 100%;
width: fit-content;
overflow: hidden;
}

.grid-1>* {
background-color: green;
width: 100px;
height: 100px;
}

.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
gap: 5px;
width: 1000px;
}

.grid-2>* {
background-color: red;
width: 100px;
height: 100px;
}< /code>






< /code>
< /div>
< /div>
< /p>
Скриншот: < /p>

сломанная демонстрация

< Br/> Проблема, с которой я столкнулся, возникает, когда я делаю свои столбцы/строки 1/2 размера и заставляют сетку занимать 2 строки и 2 столбца.
Во второй демонстрации. , определенная ширина окна приведет к тому, что последний элемент в сетке будет половиной ячейки, и это разбивает идеальный прямоугольник. class = "фрагмент фрагмента-кода-кода, находящегося в результате«>
body {
max-width: 900px;
}

.grid-1 {
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
grid-template-rows: repeat(auto-fill, 50px);
gap: 5px;
max-width: 100%;
width: fit-content;
overflow: hidden;
}

.grid-1>* {
background-color: green;
width: 100px;
height: 100px;
grid-column: span 2;
grid-row: span 2;
}

.grid-2 {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
gap: 10px;
width: 1000px;
}

.grid-2>* {
background-color: red;
width: 100px;
height: 100px;
}< /code>






< /code>
< /div>
< /div>
< /p>
С этим вторым подходом, половина времени, будет пол- Ширина красная сетка, как самый последний предмет в общей сетке. Есть ли способ, которым я могу устранить это и сделать отзывчивый, идеальный прямоугольник при использовании этих полушагих сетей? = "Подход 2, переполнение сетки" src = "https://i.sstatic.net/6ebmrgbm.jpg"/>
Есть ли лучший подход для решения этой проблемы, который использует чистый CSS? Моя сетка-восприятие похоже на слегка резкий подход. РЕДАКТИРОВАТЬ 2: Подробная демонстрация < /h4>
Вот более подробная демонстрация, показывающая, почему я хочу полусрежные шаги. Я бы хотел плитку в верхнем правом углу, которая имеет видимый зазор, отделяющий ее от других плиток. Используя половину сетки, я могу уменьшить размер разрыва разделения, не жертвуя дополнительными столбцами, которые зеленые/красные плитки смогут заполнить.


:root {
--grid-gap: 0.4rem;
--grid-division: 2; /*Integer*/
--tile-base-size: 9.5rem;
--tile-size: calc(
var(--tile-base-size) - (
(var(--grid-division) - 1)
* var(--grid-gap)
)
);
}

.overlay {
grid-column-start: calc(-1 - var(--grid-division));
grid-column-end: -1;
grid-row-start: 1;
grid-row-end: calc(1 + var(--grid-division));
background-color: blue;
}

.filler {
grid-column-start: calc(-2 - var(--grid-division));
grid-column-end: -1;
grid-row-start: 1;
grid-row-end: calc(1 + 2 * var(--grid-division));
}

body {
max-width: 900px;
}

.grid-1 {
display: grid;
grid-template-columns: repeat(auto-fill, calc(var(--tile-size)/var(--grid-division)));
gap: var(--grid-gap);
max-width: 100%;
width: fit-content;
overflow: hidden;
margin: 0 auto;
}

.tile {
background-color: green;
width: var(--tile-base-size);
height: auto;
aspect-ratio: 1;
grid-column: span var(--grid-division);
grid-row: span var(--grid-division);
}

.grid-2 {
display: inline-grid;
grid-template-columns: repeat(auto-fill, calc(var(--tile-base-size)));
column-gap: calc(var(--grid-gap));
justify-content: start;
width: 1000px;
height: var(--tile-base-size);
grid-row: span var(--grid-division);
overflow: hidden;
}

.grid-2 > * {
background-color: red;
width: 100%;
height: auto;
aspect-ratio: 1;
}< /code>







[/code]




Подробнее здесь: https://stackoverflow.com/questions/793 ... ular-grids