Meta Viewport

¿Qué es meta viewport?

Se trata de la configuración de la ventana gráfica

Un elemento de ventana <meta> le da al navegador instrucciones sobre cómo controlar las dimensiones y  escala de la página.

Atajo de teclado: meta:vp

Resultado: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Configuración metaetiqueta viewport

Viewport nos permite definir los parámetros de visualización de un página web en los diferentes dispositivos.

Se trata de una metaetiqueta mediante la que se establece si se puede hacer zoom en una página, el zoom inicial o la anchura de la pantalla del dispositivo.

Cuando trabajamos con una web responsive es necesario definir un viewport adecuado, de lo contrario es muy probable que la página no lea correctamente los media-queries y que se vea en formato muy reducido, siendo necesario hacer zoom para ver el contenido.

Disponemos de los siguientes parámetros en la metaetiqueta viewport:

Width: anchura virtual (emulada) de la pantalla o anchura del viewport.
Height: altura virtual de la pantalla o altura del viewport.
Initial-scale: la escala inicial del documento.
Minimum-scale: la escala mínima que se puede establecer en el documento.
Maximum-scale: la escala máxima configurable en el documento.
User-scalable: si se permite al usuario hacer zoom.

Fuentes:  https://www.eniun.com/configuracion-metaetiqueta-viewport-web-responsive/

                https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag

                https://www.w3schools.com/css/css_rwd_viewport.asp

                https://css-tricks.com/snippets/html/responsive-meta-tag/

GRID LAYOUT EN CSS3

   Al igual que ocurre con el sistema Flexbox, en el sistema Grid ó de rejilla, va a ser imprescindible que todo nuestro código esté alojando dentro de un <div> ya que este sistema no actuará en el resto de nuestra página sino únicamente dentro del <div> que creemos al efecto.

DISPLAY

Adicionalmente a ese <div> le aplicaremos una clase cuyo display estableceremos en grid:

display: grid;

SEPARACIÓN ENTRE ELEMENTOS

También podremos establecer la separación entre nuestros elementos mediante la propiedad grid-gap:

grid-gap: 50px;

NÚMERO DE COLUMNAS

e incluso el número de "columnas" que deseemos presentar estableciendo un valor numérico en porcentaje por cada elemento del siguiente modo:

grid-template-columns: 25% 25% 25% 25%;

o alternativamente de este modo:

grid-template-columns: repeat(4, 25%);

NÚMERO DE FILAS

También podremos, con Grid, establecer el número de Filas que deseemos visuales de esta con la propiedad grid-template-rows así:

grid-template-rows: 33% 33% 33%;

grid-template-rows: repeat(3, 1fr);

EXPANDIR HORIZONTALMENTE EL ANCHO DE LAS COLUMNAS

Ahora bien, si vamos a necesitar expandir el ancho de una columna debemos recurrir a la combinación de las propiedades de grid-column de esta manera:

grid-column-start: 1;

grid-column-end: 3;

o de forma más abreviada en una única línea de código como sigue:

   grid-column: 1 / 3;

EXPANDIR VERTICALMENTE LA ALTURA DE LAS FILAS

Si, por contra, lo que vamos a necesitar es expandir verticalmente una fila recurriremos a las propiedades de grid-row como se muestra a continuación:

grid-row-start: 2;

   grid-row-end: 4;

que también se puede reducir mucho:

grid-row: 2 / 4;

Referencias para el estudio de CSS GRID LAYOUT:

• Lenguaje CSS
• Mozilla.org
• w3schools.com