Unidad 14. Técnicas de diseño web (XI)



3. Diseño web adaptativo con rejilla. Grid.

En este vídeo vemos el diseño adaptativo con rejilla:Videotutorial

 

De igual forma que vimos anteriormente, sólo necesitamos un contenedor que agrupa todos los elementos para indicar con la propiedad display: grid que vamos a utilizar una rejilla, y un contenedor para cada elemento. Iremos modificando la disposición de los elementos en la rejilla segun queramos tres, dos o una columna, según el ancho de la pantalla.

<div class="contenedor_adaptable_grid">
  <div class="cabecera_adaptable_grid">Cabecera </div>
  <div class="menu_adaptable_grid">  menu</div>
  <div class="principal_adaptable_grid">principal</div>
  <div class="lateral_adaptable_grid">lateral</div>
  <div class="pie_adaptable_grid"> pie</div>
</div>

En la hoja de estilo para las pantallas grandes (>= 1024) vamos a utilizar el mismo diseño que para el caso anterior de diseño líquido con rejilla. Con las propiedades grid-template-rows: 4em 10em 3em; y grid-template-columns: 15% 65% 20%; creamos la rejilla de tres filas y tres columnas. Ya sólo queda decir en que posición colocamos cada uno de los elementos. Por ejemplo, la cabecera está en la primer fila (grid-row: 1;) y ocupa las tres columnas, (grid-column: 1 / 4;). En la unidad 13, puedes repasar la nomenclatura del modelo de rejilla.

Para las pantallas medianas (>= 641 y <= 1023) cambiamos la rejilla a dos columnas con grid-template-columns: 75% 25%; y a cuatro filas con grid-template-rows: 4em 3em 10em 3em; a continuación colocamos cada uno de los elementos.

Para las pantallas pequeñas (<= 640) cambiamos la rejilla a una columna con grid-template-columns: 1fr; y ahora creamos cinco filas con grid-template-rows: 4em 3em 10em 3em 3em; y colocamos cada uno de los elementos en una fila.

Igual que en el caso anterior, también modificamos las dimensiones de los elementos según el tamaño de la pantalla.

El código de la hoja de estilo es este:

/* ancho mayor o igual de 1024px */
@media all and (min-width: 1024px) {
  .contenedor_adaptable_grid {
    display: grid;
    grid-template-columns: 15% 65% 20%;
    grid-template-rows: 4em 10em 3em;
  }
  .cabecera_adaptable_grid {
    grid-row: 1;
    grid-column: 1 / 4;
  }
.menu_adaptable_grid { grid-row: 2; grid-column: 1 ; }
.principal_adaptable_grid { grid-row: 2; grid-column: 2 ; }
.lateral_adaptable_grid { grid-row: 2; grid-column: 3 ; }
.pie_adaptable_grid { grid-row: 3; grid-column: 1/4; }
}
/* ancho mayor o igual de 641px y menor o igual de 1023px */ @media all and (min-width:641px) and (max-width: 1023px) { .contenedor_adaptable_grid { display: grid; grid-template-columns: 75% 25%; grid-template-rows: 4em 3em 10em 3em; }
.cabecera_adaptable_grid { grid-row: 1; grid-column: 1 / 3; }
.menu_adaptable_grid { grid-row: 2; grid-column: 1 / 3 ; }
.principal_adaptable_grid { grid-row: 3; grid-column: 1 ; }
.lateral_adaptable_grid { grid-row: 3; grid-column: 2 ; }
.pie_adaptable_grid { grid-row: 4; grid-column: 1 / 3; }
}
/* ancho menor o igual de 640px */ @media all and (max-width: 640px) { .contenedor_adaptable_grid { display: grid; grid-template-columns: 1fr; grid-template-rows: 4em 3em 10em 3em 3em; }
.cabecera_adaptable_grid { grid-row: 1; }
.menu_adaptable_grid { grid-row: 2; }
.principal_adaptable_grid { grid-row: 3; }
.lateral_adaptable_grid { grid-row: 4; }
.pie_adaptable_grid { grid-row: 5; }
}

Este es el resultado:

 

Cabecera
principal
lateral
pie

Enero-2019 (V 2.0)
Pág. 14.11
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.