forzar el contenedor de cuadrícula css para llenar la pantalla completa del dispositivo

Basta ya de buscar por todo internet porque estás al sitio indicado, contamos con la solución que buscas pero sin complicarte.

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 ni 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;

  
One
  
Two
  
Three
  
Four
  
Five
  
Six

Dos propiedades CSS importantes para configurar para páginas de altura completa son estas:

1. Permita que el cuerpo crezca tan alto como lo requiera el contenido.

   html  height: 100%; 
   

2. Obligue al cuerpo a no ser más pequeño que la altura de la ventana.

   body  min-height: 100%; 
   

Lo que haga con su cuadrícula es irrelevante, siempre que use fracciones o porcentajes, debe estar seguro en todos los casos.

Eche un vistazo a este diseño de tablero común.

Puedes añadir position: fixed; con top left right bottom 0 attributeesa 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;

  
One
  
Two
  
Three
  
Four
  
Five
  
Six

Calificaciones y comentarios

Más adelante puedes encontrar las anotaciones de otros desarrolladores, tú todavía tienes la libertad de insertar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador