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

[Anonymous]

Рабочая демонстрация < /h4>
Вот демонстрация отзывчивых, совершенно прямоугольных сетей в CSS. Независимо от ширины экрана, сетка всегда будет сформировать идеальный прямоугольник. В настоящее время скрыт ">
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? Моя сетка напоминает слегка резкий подход.

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