Solución:
Si aprovechas width: 100vw; y height: 100vh;, el objeto con estos estilos aplicados se extenderá a todo el ancho y alto del dispositivo.
También tenga en cuenta que hay ocasiones en que los navegadores y similares pueden agregar relleno y márgenes a su vista. Agregué un * global sin relleno y márgenes para que pueda ver la diferencia. Mantén esto en mente.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrapper {
display: grid;
border-style: solid;
border-color: red;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
width: 100vw;
height: 100vh;
}
.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;
}<html>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</html>Dos propiedades CSS importantes para establecer para páginas de altura completa son estas:
-
Permita que el cuerpo crezca tan alto como lo requiera el contenido.
html { height: 100%; } -
Obligue al cuerpo a no ser más pequeño que la altura de la ventana.
body { min-height: 100%; }
Lo que hagas con tu faja es irrelevante siempre y cuando uses fracciones o porcentajes, deberías estar seguro en todos los casos.
Eche un vistazo a este diseño de panel común.
Puedes añadir position: fixed; con top left right bottom 0 atributo, esa solución también funciona en navegadores más antiguos.
Si desea incrustarlo, agregue position: absolute; a la envoltura, y position: relative al div fuera de la envoltura.
.wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
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;
}<html>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</html>