El diseño sensible al dispositivo, responsive o mobile-first, que se adapta al tamaño de la pantalla en donde se visualiza una web, se puede construir con puro HTML y CSS. Con unos pocos estilos, y estructura en los contenidos, podemos manejar la disposición de éstos contenidos en pantalla.
Si nos fijamos en cómo se visualiza el contenido en rejilla de uno de los principales framework mobile-first, que se llama Bootstrap, salta a la vista que se basa en dos ideas. La primera es el visualizar las cajas en pocas filas con muchas columnas cuando la pantalla en lo bastante ancha. Y mostrar las cajas en muchas filas con pocas columnas cuando hay pocos pixeles de ancho de la pantalla.
Al grano, el código fuente
Este es un diseño que pinta 2 filas y 3 columnas cuando hay más de 1024 pixeles. Y cuando hay menos pintará 6 filas con 1 columna:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #808080;
}
.my-grid-row {
display: flex;
}
.my-col {
background-color: #aaa;
height: 100px;
width: 33.33%;
margin: 3px;
}
@media screen and (max-width: 1024px) {
.my-grid-row {
display: initial;
}
.my-col {
width: initial;
}
}
</style>
</head>
<body>
<div class="my-grid-row">
<div class="my-col"></div>
<div class="my-col"></div>
<div class="my-col"></div>
</div>
<div class="my-grid-row">
<div class="my-col"></div>
<div class="my-col"></div>
<div class="my-col"></div>
</div>
</body>
</html>En una pantalla ancha se visualizará como la imagen siguiente:
Y en una pantalla estrecha se visualizará como la imagen siguiente:
Una línea CSS clave es:
display: flex;Otra línea CSS clave es:
@media screen and (max-width: 1024px) {Jugar con estas cosas, es la historia para hacer diseños mobile-first, diseños responsive ?
muy util el articulo. algun ejemplo usando cssgrid?
Buenos días Andrés.
Gracias por dejar un comentario.
No tengo a mano ningún ejemplo usando cssgrid, con media querys se debería de poder hacer.
Pero si no me equivoco, no parece que cssgrid esté pensado para ajustarse a las dimensiones del navegador.
Saludos.