CSS Frontend

Patrones de maquetación Responsive: Column Drop

Inicia todo en forma vertical y una vez comienza a crecer el viewport empieza a generar el drop de los contenedores. Es decir, comienza a posicionar los contenedores hacia arriba por orden de importancia que se haya definido.

Platzi.com

Ejemplo

Documento HTML

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Column Drop</title>    <link rel="stylesheet" href="./style.css"></head><body>    <main class="container">        <div class="c1"></div>        <div class="c2"></div>        <div class="c3"></div>        <div class="c4"></div>        <div class="c5"></div>    </main></body></html>

Documento CSS

* {    box-sizing: border-box;    margin: 0;    padding: 0;}html {    /* Para utilizar rem */    font-size: 62.5%;}.container {    display: flex;    /*Para que el contenido se puedan reposicionar en caso de que el tamaño lo permita en la medida que aumente el tamaño de pantalla*/    flex-wrap: wrap;}.c1, .c2, .c3, .c4, .c5{    width: 100%;    min-width: 150px;    height: 150px;}.c1{    background-color: orangered;}.c2{    background-color: blueviolet;}.c3{    background-color: greenyellow;}.c4{    background-color: red;}.c5{    background-color: blue;}@media (min-width: 600px){    .c1{        width: 25%;        order: 1;    }    .c2{        width: 75%;        order: 2;    }    .c3{        width: 100%;        order: 3;    }    .c4{        width: 100%;        order: 4;    }    .c5{        width: 100%;        order: 5;    }}@media (min-width: 800px){    /* Se elimina la propiedad order, porque desde el media quierie anterior se respeta */    .c1{        width: 30%;    }    .c2{        width: 40%;    }    .c3{        width: 30%;    }    .c4{        width: 50%;    }    .c5{        width: 50%;    }}

Con estos tres patrones ya puedes tener un código base para iniciar tus proyectos de diseño de páginas web teniendo en cuenta la recomendación de hacer tus productos digitales con una perspectiva mobile first.

A través de esta página puedes visualizar los tamaños en promedio de la mayoría de dispositivos: Mydevice.io

Revista sobre html y css: Smashing magazine

Avatar

esteban

About Author

Quizá también te interese

Frontend HTML

Qué es HTML

HTML es el lenguaje de etiquetas para estructurar páginas web. Existen otras tecnologías como CSS y Javascript que complementan la
Frontend

Qué es Frontend

El Frontend son el conjunto de componentes de una página o aplicación web que se visualizan y funcionan a través