Diseño responsive (adaptado a cualquier tamaño de pantalla)

Diseño en parrilla vs cajas flexibles

Tanto el uso de parrillas/cuadrículas/grid como el uso de cajas flexibles son valiosos elementos en el diseño responsive.

La cuadrícula divide el espacio en recuadros conceptuales, de forma similar a las tablas, pero con muchas más posibilidades.

Las cajas flexibles no permiten alinear los objetos de una forma más o menos automática. Ambos pueden trabajar juntos: un elemento Grid puede ser un contenedor Flexbox/caja flexible y un elemento de Flexbox puede ser un contenedor Grid.

Una forma simple de decidir si nos conviene más usar la cuadrícula o las flexboxes es preguntándonos:

• Necesitamos controlar el diseño únicamente por filas o por columnas? – usaremos flexbox
• ¿Necesitamos controlar el diseño por filas y por columnas? usaremos grid

Podemos ver un ejemplo de la limitación de de las cajas flexibles en el ejemplo expuesto más adelante, una caja flexible con fotografías circulares. Si estrechamos la ventana para contemplar el efecto que causa en dispositivos con pantallas de diferentes tamaños, observamos que las fotografías circulares se reubican cuando ya no caben en una linea (incluyendo la propiedad ‘flex-wrap: wrap’), pero no podemos mantenerlas en equivalencia completa. Es decir, no podemos hacer que los elementos se mantengan agrupados de dos en dos, de tres en tres, … para que no queden 4 fotografías arriba y una debajo, por ejemplo.

Lo limitación mencionada es así, usando las características propias de las cajas flexibles. Si estamos usando estas y deshabilitamos parte de la flexibilidad, «inflando» el código o aumentando su complejidad, probablemente nos convenga más usar un diseño de tipo grid.

Diseño CSS grid (en cuadrícula) responsive

Las media queries

Las media queries o consulta de medios permiten adaptar el sitio en función de ciertas características o parámetros del dispositivo visor.

Por ejemplo, pueden reducir el tamaño del texto en dispositivos móviles, convertir un texto simple en una vista a 3 columnas en pantallas grandes, etc.

Más info. sobre las media queries en [developer.mozilla.org]

CSS grid, un ejemplo sencillo

HTML

<div>
<div class="uno">Uno</div>
<div class="dos">Dos</div>
<div class="tres">Tres</div>
<div class="cuatro">Cuatro</div>
<div class="cinco">Cinco</div>
<div class="seis">Seis</div>
</div>

CSS

.contenedor  {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}

Diseño CSS grid responsive sin media Queries, con imágenes circulares

Diseño responsive con CSS grid, sin usar media Queries, con imágenes circulares y diferentes efectos hover. En este, sin embargo, las cuadrículas no se ubican de una forma equivalente. Es decir, cuando una de las 5 cajas no cabe en una línea, pasan a la línea de abajo y se queda «colgada» y alineada a la izquierda, en lugar de colocarse en filas de 3 y dos, y centradas, lo que probablemente sería más estético.

See the Pen
Diseño CSS grid responsive sin media Queries, con imágenes circulares by Javier Rodríguez (@qe2)
on CodePen.

Pie de pagina responsive con columnas con CSS grid

See the Pen
pies de pagina con 2 y 3 columnas con CSS grid by Javier Rodríguez (@qe2)
on CodePen.

Un  grid de ejemplo

El modelo expuesto divide la ventana del navegador en 12 columnas conceptuales. Las clases col-m-n solo tienen efecto desde 600px en adelante. col-n desde 768px en adelante. col-g-n desde 992px en adelante. col-eg-n desde 1200px en adelante.

CSS

* {
    box-sizing: border-box;
}
.fila::after {
    content: "";
    clear: both;
    display: table;
}

/* Teléfonos móviles */
[class*="col-"] {
   float: left;
   padding: 15px;
	width: 100%;
}

/* para tablets: */
@media only screen and (min-width: 600px) {
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

/* Para desktop: */
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/* Para desktop gran tamaño (creados por mí, siguiendo la recomendación de https://www.w3schools.com/): */
@media only screen and (min-width: 992px) {
	.col-g-1 {width: 8.33%;}
    .col-g-2 {width: 16.66%;}
    .col-g-3 {width: 25%;}
    .col-g-4 {width: 33.33%;}
    .col-g-5 {width: 41.66%;}
    .col-g-6 {width: 50%;}
    .col-g-7 {width: 58.33%;}
    .col-g-8 {width: 66.66%;}
    .col-g-9 {width: 75%;}
    .col-g-10 {width: 83.33%;}
    .col-g-11 {width: 91.66%;}
    .col-g-12 {width: 100%;}
}

/* Para desktop extra-grande (creados por mí, siguiendo la recomendación de https://www.w3schools.com/): */
@media only screen and (min-width: 1200px) {
	 .col-eg-1 {width: 8.33%;}
    .col-eg-2 {width: 16.66%;}
    .col-eg-3 {width: 25%;}
    .col-eg-4 {width: 33.33%;}
    .col-eg-5 {width: 41.66%;}
    .col-eg-6 {width: 50%;}
    .col-eg-7 {width: 58.33%;}
    .col-eg-8 {width: 66.66%;}
    .col-eg-9 {width: 75%;}
    .col-eg-10 {width: 83.33%;}
    .col-eg-11 {width: 91.66%;}
    .col-eg-12 {width: 100%;}
}

Ejemplos de varios pies de página web realizado con la técnica de cuadrícula

See the Pen
pie de pagina con 3 columnas by Javier Rodríguez (@qe2)
on CodePen.

Cajas flexibles

Las cajas flexibles aparecen como una forma más eficiente de distribuir el espacio entre elementos dentro de un contenedor, y reajustarse cuando este cambia de tamaño.

Se crea una caja flexible asignando a una capa, a la que llamaremos ‘padre’ la propiedad CSS:

display: flex;

Los elementos en el interior de padre, a los que llamaremos ‘hijos’ se distribuirán atendiendo a las reglas que asignemos. Podemos asignar reglas tanto a padre como a hijos.

Propiedades del contenedor padre

display: flex | inline-flex;

flex-direction: row | row-reverse | column | column-reverse;

flex-direction define qué dirección siguen los elementos de la caja (horizontal por defecto o vertical), estableciendo así el eje principal.

flex-wrap: nowrap | wrap | wrap-reverse;

El comportamiento de los elementos es por defecto el de ajustarse para caber todos en una línea, (valor wrap). Podemos cambiar esto, haciendo que los elementos se desplacen a la siguiente línea o columna cuando ya no caben por causa del tamaño de la ventana del navegador.

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right … + safe | unsafe

justify-content define la alineación sobre el eje principal, distribuyendo el espacio sobrante entre los elementos

align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe;

align-items define como los elementos flex se comportan en el eje cruzado.

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + … safe | unsafe;

align-content alinea las lineas en el eje cruzado cuando hay espacio sobrante, de forma similar a como lo hace justify-content con los elementos individuales en el eje principal.

Ejemplos de cajas flexibles con imágenes circulares responsive

See the Pen
cajas con imagenes circulares responsive by Javier Rodríguez (@qe2)
on CodePen.