Rejilla de contenidos mobile-first con puro HTML y CSS

2020-06-18 - Categorías: General

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 🤪

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

© 2020 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.