Разбираемся в CSS
Anonymous
Заставить контейнер сетки CSS заполнить весь экран устройства
Сообщение
Anonymous » 18 мар 2024, 02:12
Как заставить контейнер CSS-сетки занимать всю ширину и высоту экрана устройства для одностраничного приложения? Измененный пример взят из Mozilla: документация Firefox
Код: Выделить всё
.wrapper {
display: grid;
border-style: solid;
border-color: red;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
.one {
border-style: solid;
border-color: blue;
grid-column: 1 / 3;
grid-row: 1;
}
.two {
border-style: solid;
border-color: yellow;
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
border-style: solid;
border-color: violet;
grid-row: 2 / 5;
grid-column: 1;
}
.four {
border-style: solid;
border-color: aqua;
grid-column: 3;
grid-row: 3;
}
.five {
border-style: solid;
border-color: green;
grid-column: 2;
grid-row: 4;
}
.six {
border-style: solid;
border-color: purple;
grid-column: 3;
grid-row: 4;
}
Я не знаю, что делать, чтобы этот код работал.
Подробнее здесь:
https://stackoverflow.com/questions/437 ... -of-device
1710717144
Anonymous
Как заставить контейнер CSS-сетки занимать всю ширину и высоту экрана устройства для одностраничного приложения? Измененный пример взят из Mozilla: документация Firefox [code].wrapper { display: grid; border-style: solid; border-color: red; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: 10px; } .one { border-style: solid; border-color: blue; grid-column: 1 / 3; grid-row: 1; } .two { border-style: solid; border-color: yellow; grid-column: 2 / 4; grid-row: 1 / 3; } .three { border-style: solid; border-color: violet; grid-row: 2 / 5; grid-column: 1; } .four { border-style: solid; border-color: aqua; grid-column: 3; grid-row: 3; } .five { border-style: solid; border-color: green; grid-column: 2; grid-row: 4; } .six { border-style: solid; border-color: purple; grid-column: 3; grid-row: 4; }[/code] [code] One Two Three Four Five Six [/code] Я не знаю, что делать, чтобы этот код работал. Подробнее здесь: [url]https://stackoverflow.com/questions/43747185/force-css-grid-container-to-fill-full-screen-of-device[/url]