Column drop

¡Hey! 😄,
.
Recuerda repasar toda la gran información que hemos recibido en este curso. Te dejo un resumen del curso completo en este enlace que te ayudará a estudiar para el examen y a no olvidar los conceptos.

Iván Arcos

Súper útil el uso de Flex, justo ahora que estoy actualizando mi portafolio me funcionará perfecto

RetaxMaster

A mi en lo personal me gusta más Mostly Fluid, me gusta que todo fluya, pero a veces me gusta aventarme a cosas más locas como Layout Shifter, y cuando ando con muchas ganas de front end hasta meto animaciones jaja Esto es genial porque ya con todo esto eres capaz de crear una página web decente, incluso puedes empezar a crear landing pages y venderlas!

Jose Nuñez

Un breve resumen de los patrones de diseño para complementar (Texto tomado desde developers.google.com):

Mostly Fluid

El patrón Mostly fluid consiste, principalmente, en una cuadrícula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tamaño y simplemente se ajustan los márgenes en las más anchas.

Column Drop

En el caso de los diseños con varias columnas de ancho completo, durante el proceso de colocación de columnas éstas únicamente se colocan de forma vertical debido a que el ancho de la ventana es demasiado reducido para el contenido.

Layout shifter

El patrón Layout shifter es el más adaptable, ya que posee varios puntos de interrupción en diferentes anchos de pantalla.

La clave para este diseño es el desplazamiento del contenido, en lugar de su reprocesamiento y colocación debajo de otras columnas. Debido a las diferencias significativas entre cada punto de interrupción principal, es más complejo de mantener, y es posible que se deban realizar cambios dentro de los elementos, no solo en el diseño de contenido general.

Edwin Alberto Equihua Ochoa

vine siendo un niño, pero me iré siendo un programador…

Mauricio Galvez

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)">
    <link rel="stylesheet" href="./laptop.css" media="screen and (min-width: 800px)">
    <title>Document</title>
</head>
<body>
    <main class="container">
        <div class="c c1"></div>
        <div class="c c2"></div>
        <div class="c c3"></div>
        <div class="c c4"></div>
    </main>
</body>
</html>

style.css

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html
{
    font-size: 62.5%;
}

.container
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1300px;
    height: 100vh;
    padding: 3rem;
    margin: 0 auto;
}

.c
{
    width: 100%;
    /* min-width: 1500px; */
    height: calc(24vh - 3rem);
    margin-bottom: 3rem;
    border-radius: 10px;
}

.c1
{
    background-color: #c72929;
}

.c2
{
    background-color: #df6060;
}

.c3
{
    background-color: #e4b342;
}

.c4
{
    background-color: #a0db32;
    margin: 0;
}

tablet.css

.c
{
    height: calc(30vh - 1rem);
}

.c1, .c2
{
    height: calc(20vh - 1rem);
}

.c1
{
    width: 24%;
}

.c2
{
    width: 74%;
}

.c3
{
    height: calc(25vh - 1rem);
}

.c4
{
    height: calc(44vh - 1rem);
}

latop.css

.c
{
    height: calc(20vh - 1rem);
    margin-bottom: 1rem;
}

.c1
{
    width: 19%;
}

.c2
{
    width: 29%;
}

.c3
{
    width: 49%;
}

.c4
{
    height: calc(74vh - 1rem);
    margin-bottom: 0;
}

Patricio Manuel Ugarte

Comparto una herramienta que me ayudó mucho con el desafío de la clase anterior. Mientras preparaba todo el responsive lo fui probando en Chrome y, una vez que terminé y todo quedó como yo quería se me ocurrió probarlo en Firefox. Para mi sorpresa no andaba para nada igual, todos los estilos se veían mal y el responsive estaba bastante roto.

Solución:
Encontré este sitio web, en el cual puedes pegar tu CSS y te lo devuelve con todos los prefijos de los atributos necesarios para que los estilos de tu web se adapten bien a las características particulares de cada navegador. Pasé por ahí mis tres hojas de estilo y al volverlo a probar en Firefox andaba perfecto, igual que en Chrome.

Espero que les sirva 😃

Erick Fernando Guzmán Valerio

Sigo sin entender la diferencia de las 3:( ¿Alguien me puede explicar con manzanas y palitos?

Eduardo Reyes

Encontré este post en Google Developers que muestra otras funciones. Espero que les sirva.
https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=es

Eduardo Morales

aqui les pongo mi aporte, creo voy mejorando.

Rafael Padron

Asi quedo mi desafio pero tengo algunos problemas alineando los links del header y centrando el contenedor de las cards, he intentado de todo pero no he podido

Mobile

Tablet

Desktop

Cristhyan Pacheco

En este caso NO ES NECESARIO definir la propiedad order…
Hola muchachos, ahora me explico:
La propiedad order la usaremos cuando queramos reposicionar los elementos alterando el orden establecido en el que fueron escritos en el html.
El valor por defecto de order es 0, es por eso que cuendo definimos order: 1 este elemento pasa al final de todos los demas, el resto se muestra segun fueron escritos en el html.
Esta propiedad tambien puede tomar valores negativos.
Un tip seria usar valores de 10 en 10 para poder repocisionar elementos que no hayamos tenido en cuenta entre los ya posicionados.
Entiendiendo esto, espero se puedan ahorrar unas cuantas lineas de css.

Joel Dominguez Merino

Bueno aqui puedes ver Online mi implementación de Column Drop Tambien aqui te dejo el Repositorio para no llenar esta clase con codigo.
Saludos 😃

jgersain

código 👈

Móvil

Tableta

Escritorio

Emilio Castro

Column Drop es un patrón que nos acompaña desde la época donde RD se hacía Desktop First allá por la década pasada.
Como su nombre lo indica, cuando un layout en desktop tiene múltiples columnas, a medida que el viewport se reduce “dejamos caer” cada columna debajo de la anterior, es decir, las apilamos.

Link a la web de Google Developers con más info sobre este y otros patrones de Responsive Web Design.

Xhunik Miguel

Andrea Ysabel Urdaneta Durango

Column Drop es a mi parecer uno de los patrones o estrategias de diseño que mejor se adapta mas ordenado.

Daniel David Mármol Rivero

Bastante sencilla la aplicación, pero todo se complica cuando lo practicamos. Pero de eso se trata, de ir avanzando y nunca parar de aprender.

Jhean Pacheco

La más fácil de implementar pero según veo en proyectos reales es la menos usada 😕

Kevin Ospina Londoño

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="robots">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>League of Legends</title>
    <link rel="stylesheet" href="./css/estilos.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Aboreto&family=Bebas+Neue&family=Permanent+Marker&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <img class="logo" src="./img/logo.jpg" alt="Logo League of legends">
        <nav class="menu">
            <a href="" class="menu-lista">Inicio</a>
            <a href="" class="menu-lista">Personajes</a>
            <a href="" class="menu-lista">Rutas de la JG</a>
            <a href="" class="menu-lista">Smites</a>
        </nav>

        <img class="inicio" src="./img/Inicio-principal.jpg" href="#" alt="League of legends"></img>

    </header>

    <main class="container">

        <div class="presentacion">
        <h1>Que es League of legends?</h1>
        <p>League of Legends (también conocido por sus siglas LoL o también como Lolsito), es un videojuego multijugador de arena de batalla en línea desarrollado y publicado por Riot Games. Inspirándose en Defense of the Ancients, un mapa personalizado para Warcraft III, los fundadores de Riot buscaron desarrollar un juego independiente del mismo género. Desde su lanzamiento en octubre de 2009, LoL ha sido un juego gratuito y se monetiza a través de la compra de elementos para la personalización de personajes. El juego está disponible para Microsoft Windows y macOS.</p>
        <br>
        <p>En el juego, dos equipos de cinco jugadores luchan en un combate jugador contra jugador, cada equipo ocupando y defendiendo su mitad del mapa. Cada uno de los diez jugadores controla un personaje, conocido como "campeón", con habilidades únicas y diferentes estilos de juego. Durante una partida, los campeones se vuelven más poderosos acumulando puntos de experiencia y ganando oro que se emplea para la compra de artículos para derrotar al equipo contrario. En el modo principal de juego de LoL, League, "La Grieta del Invocador", un equipo gana al abrirse paso hasta la base enemiga y destruir su "nexo", una gran estructura ubicada dentro de la cual se emanan tres líneas de súbditos o "minions", personajes no jugadores que al ser eliminados por el equipo enemigo otorgan oro y experiencia.</p> 
        </div>
        <div class="personajes">
           <h1>Personajes</h1>
           <h2>Graves</h2>
           <img src="./img/personajes/graves.jpg" alt="personaje de league of legends" class="campeones">
           <h2>Kindred</h2>
           <img src="./img/personajes/kindred.jpg" alt="personaje de league of legends" class="campeones">
           <h2>Volibear</h2>
           <img src="./img/personajes/volibear.jpg" alt="personaje de league of legends" class="campeones">
           <h2>Zac</h2>
           <img src="./img/personajes/zac.jpg" alt="personaje de league of legends" class="campeones">
           <h2>Zed</h2>
           <img src="./img/personajes/zed.jpg" alt="personaje de league of legends" class="campeones">
           <h2>Hecarim</h2>
           <img src="./img/personajes/hecarim.jpg" alt="personaje de league of legends" class="campeones">
        </div>
        <div class="consejos">
            <h2>Consejos para ser un buen Jungla en LoL</h2>
            <p>El Jungla debe comprender cómo piensa su rival.</p><br>
            <p>Un buen Jungla debe saber cuándo gankear y cuando no hacerlo.</p><br>
            <p>Saber tus prioridades como Jungla en LoL es fundamental.</p>
        </div>
        <div class="ruta">
            <h1>Rutas de la JG</h1>
            <img src="./img/rutas.jpg" alt="Imagen de league of legends">
        </div>
        <div class="objetivos">
            <h2>¿Cuáles son los objetivos del jungla?</h2>
            <p>Jungla o Jungler se considera una posición similar a ir a un carril pero que involucra matar a los "Monstruos" neutrales localizados en las zonas entre las líneas. Los Junglers se dedican a "farmear" los campamentos disponibles en la Jungla.</p>
        </div>
        <div class="smite">
            <h2>¿Cuál es la diferencia entre Smite rojo y azul?</h2>
            <img src="./img/smites.jpg" alt="Smites de League of legends">
            <p>El Golem azul te da mayor reducción de enfriamiento y regeneración de mana, y el Espíritu rojo te dará la posibilidad de dar quemadura al atacar,da daño verdadero y da una pequeña ralentización.</p>
        </div>
        <div class="pathing">
            <h2>¿Qué es Pathing en League of Legends?</h2>
            <p>La decisión más importante a la hora de empezar una partida como jungler es la ruta. Conocida en inglés como pathing, es clave en todos los momentos de la partida, pero especialmente durante nuestro primer paso por cada campamento. El planteamiento inicial determinará buena parte de nuestro éxito en la partida.</p>
        </div>

    </main>



    <footer>
        <a href="#">Volver al Inicio</a>
        <a href="#">Descarga League of Legends</a>
    </footer>

</body>
</html>

:root {
    --primary-color: rgb(248, 248, 7);
    --border-image: 3px solid rgb(248, 248, 7);
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


html {
    font-family: 'Aboreto', cursive;
    font-family: 'Bebas Neue', cursive;
    font-family: 'Permanent Marker', cursive;
    background-color: rgb(59, 110, 139);
    color: rgb(227, 232, 237);
}

header {

    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    width: 100px;
    border: 1px solid rgb(248, 248, 7);
}

.menu {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 20px;
    
    
}

.menu-lista{
    text-decoration: none;
    color: rgb(255, 255, 255);
    text-decoration:underline var(--primary-color);
}

.menu-lista:hover {
    color: rgb(248, 248, 7);
}


.inicio {
    width: 400px;
    border: 5px solid rgb(189, 200, 39);
    border-radius: 5px;
    margin: 15px 5px 15px 5px;

}

.container , .presentacion, .personajes , .consejos , .ruta , .objetivos, .smite , .pathing{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.presentacion p{
    font-size: 18px;
    width: 80%;
    margin: 20px 5px 10px 5px;

}

.personajes h1 {
    font-size: 35px;
    margin: 20px 0px 30px 0px;
}

.personajes h2 {
    margin-top: 20px;

}

.campeones {
    width: 400px;
    border: var(--border-image);
    border-radius: 10px;
    margin-top: 10px;
}

.consejos h2 {
    text-align: center;
    margin-top: 30px;
}

.consejos p {
    width: 80%;
    margin:20px 0px 30px 0px;

}

.ruta img{
    width: 400px;
    border: var(--border-image);
    margin-bottom: 30px;
}

.ruta h1 {
    margin-bottom: 20px;
}

.objetivos{
    text-align: center;
    width: 80%;
    margin: 20px 0px 20px 0px;
}

.objetivos p {
    text-align: left;
    margin-top: 20px;
}


.smite h2 {
    text-align: center;
}

.smite img {
    width: 400px;
    border: var(--border-image);
    border-radius: 10px;
    margin: 20px 0px 20px 0px;
}

.smite p {
    width: 80%;
    margin: 15px 0px 20px 0px;
}

.pathing {
    text-align: center;
}

.pathing p {
    text-align: left;
    width: 80%;
    margin: 15px 0px 20px 0px;
}
footer {
    display: flex;
    justify-content: space-between;
}

footer a{
    text-decoration: underline var(--primary-color);
    color: aliceblue;
    margin: 20px;
}

footer a:hover {
    color: var(--primary-color);
}

@media (min-width:800px) {
    .logo {
        width: 200px;
        border: 2px solid rgb(248, 248, 7);
    }
    .menu-lista {
        font-size: 30px;
    }

    .inicio {
        width: 80%;
    }

    .campeones {
        width: 700px;
    }

    .container h1 {
        font-size: 50px;
    }

    .container h2 {
        font-size: 35px;
    }

    .container p {
        font-size: 25px;
    }

    .ruta img {
        width: 700px;
    }

    .smite img {
        width: 700px;
    }

    footer a{
        font-size: 30px;
    }
}

@media (min-width:1000px) {
    header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: rgb(71, 127, 210);
    }
    .logo {
        width: 100px;
        align-self: flex-start;
    }
    .menu {
        justify-content: space-around;
        align-self:flex-end;
    }
    .menu a {
        font-size: 20px;
    }
    .inicio {
        width: 300px;
    }
}

@media (min-width:1200px) {
    header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: rgb(71, 127, 210);
    }
    .logo {
        width: 150px;
        align-self: center;
    }
    .menu {
        justify-content: space-around;
        align-self:center;
    }
    .menu a {
        font-size: 35px;
    }

    .inicio {
        width: 400px;
    }

    .campeones {
        width: 1000px;
    }

    .container h1 {
        font-size: 50px;
    }

    .container h2 {
        font-size: 35px;
    }

    .container p {
        font-size: 25px;
    }

    .ruta img {
        width: 1000px;
    }

    .smite img {
        width: 1000px;
    }

    footer a{
        font-size: 35px;
        margin-top: 100px;
    }
}

Jose Antonio Rojas Ollarves

Column Drop: En este patrón se tiene todo de forma vertical pero a la hora de que va creciendo el contenido empieza a arrojar los contenedores y los reposiciona a la línea principal, secundaria, etc… En este no se limita el crecimiento del container porque queremos que se estire por completo, que ocupe todo el ancho de la pantalla.

Iván Elías Meza Fonseca

a las personas quue aun no entienden como hacer este tipo de layout o cualguier otro les recomiendo familiarizarse viendo videos en youtube de personas haciendo layaouts de todo tipo espero y les ayude

Carlos Ramos

Clase 48 - Column Drop

¿Cómo funciona Column Drop?

Este patrón usa la metodología Mobile first, por lo cual empezaremos organizando nuestro elementos como si fueran columnas descendentes que ocupen todo el ancho disponible. En este patrón lo que ocurrirá a medida en que vamos aumentando el tamaño de la pantalla nuestros elementos se posicionarán una fila arriba de su lugar de origen.
Ejemplo:

¿Debemos de declarar la propiedad order nuevamente en un Media Query diferente en el que ya la declaramos?

No, el orden se seguirá respetando.

Eddy Eder Sucapuca Cruz

y no se tratara css grid en el curso?

Christian Alvarenga

Les dejo un enlace a un post hecho en Google donde explican lo de los patrones de diseños responsive.
Patrones de diseño web adaptables

Edwin Fernando Ortiz Castro

tengo problemas con @media; tal parece no me respeta el mobile y me cambia las dimensiones incluso es -600 px
@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;
}
}

Ricardo Alfonso Chavez Vilcapoma

Nunca había escuchado de patrones de diseño en CSS…se me hizo un poco difícil entender los dos primeros patrones pero este si estuvo más fácil… tendré que volver a ver la clase para entenderlos.

Ánimos siempre que se puede!!!

Fabiola Jessica Huancollo Chambi

Practicando Column Drop 😊:

Mobile

Tablet

Desktop

HTML:

<!DOCTYPE html>
<html lang="en">
<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="./mobile.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width:600px)">
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width:800px)">
</head>
<body>
    <header class="header">
        <p class="header--titulo">Artistas y canciones</p>
    </header>
    <main>
        <section class="section">
            <article class="card">
                <div class="card__header">
                    <p class="card--header_cantante">SHAKIRA</p>
                </div>
                <ul class="card__body">
                    <li class="card--body_cancion">Te Felicito</li>
                    <li class="card--body_cancion">Monotonía</li>
                    <li class="card--body_cancion">Hips Don't Lie</li>
                    <li class="card--body_cancion">DON'T YOU WORRY</li>
                    <li class="card--body_cancion">Perro fiel</li>
                </ul>
            </article>
            <article class="card">
                <div class="card__header">
                    <p class="card--header_cantante">Camilo</p>
                </div>
                <ul class="card__body">
                    <li class="card--body_cancion">Manos de tijera</li>
                    <li class="card--body_cancion">Tutu</li>
                    <li class="card--body_cancion">Índigo</li>
                    <li class="card--body_cancion">Si me dices que sí</li>
                    <li class="card--body_cancion">Vida de rico</li>
                </ul>
            </article>
            <article class="card">
                <div class="card__header">
                    <p class="card--header_cantante">Vilma Palma e Vampiros</p>
                </div>
                <ul class="card__body">
                    <li class="card--body_cancion">Bye Bye</li>
                    <li class="card--body_cancion">Todo Lo Que Fue</li>
                    <li class="card--body_cancion">Auto Rojo</li>
                    <li class="card--body_cancion">La Pachanga</li>
                    <li class="card--body_cancion">Mojada</li>
                </ul>
            </article>
            <article class="card">
                <div class="card__header">
                    <p class="card--header_cantante">Daddy Yankee</p>
                </div>
                <ul class="card__body">
                    <li class="card--body_cancion">Gasolina</li>
                    <li class="card--body_cancion">Limbo</li>
                    <li class="card--body_cancion">Dura</li>
                    <li class="card--body_cancion">Rompe</li>
                    <li class="card--body_cancion">La Nueva y La Ex</li>
                </ul>
            </article>
        </section>
    </main>
</body>
</html>

CSS(Mobile):

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
header{
    width: 100%;
    background-color: darkviolet;
}
.header--titulo{
    padding: 15px 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    text-align: center;
}
.section{
    display: flex;
    flex-wrap: wrap;
    padding: 25px 0;
}
.card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: flex-start;
    width: 85%;
    margin: 5px auto;
    padding: 25px 15px;
    background-color: rgb(232, 158, 245);
    border-radius: 25px;
    border: 5px solid darkviolet;
}
.card__header{
    width: 100%;
}
.card--header_cantante{
    padding: 7px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: underline;
    text-transform: uppercase;
    text-align: center;
}
.card__body{
    list-style-type: revert;
    margin-left: 25px;
}
.card--body_cancion{
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
}

CSS(tablet):

@media (min-width:600px){
    .card{
        width: 45%;
    }
}

CSS(Desktop):

@media (min-width: 800px){
    .card{
        width: 20%;
        margin: 5px;
    }
}

David Limon

hace un año

Estoy flipando con este curso, espero que asi este super detallada toda la escuela de JavaScript…

angelqui

Yesenia Zavaleta Velázquez

Que frustración 😢😢 no si se estoy haciendo algo mal 😫😓

Abidan Triguero Calle

RESUMEN CLASE 48:
COLUMN DROP

HTML

<!DOCTYPE html>
<html lang="en">

<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>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.c1,
.c2,
.c3,
.c4,
.c5 {
    width: 100%;
    min-width: 150px;
    height: 150px;
}

.c4 {
    height: auto;
}

.c1 {
    background-color: #003476;
}

.c2 {
    background-color: #0062d2;
}

.c3 {
    background-color: #b4d2f7;
}

.c4 {
    background-color: #d5dfef;
}

.c5 {
    background-color: #dfe1e5;
}

@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) {
    .c1 {
        width: 30%;
    }

    .c2 {
        width: 40%;
    }

    .c3 {
        width: 30%;
    }

    .c4 {
        width: 50%;
    }

    .c5 {
        width: 50%;
    }
}

Carlos Perez Verano

Column Drop
Este patrón consiste en que cada bloque de contenido, que en un smartphone vemos en filas, vaya formando columnas según vaya siendo más grande la pantalla del dispositivo.

Francisco Encabo Servián

Es de los primeros cursos de HTML y CSS donde veo que hablan de patrones de diseño. Creo que es algo importantísimo a la hora de aprender a maquetar y que nunca se explica.
Gran aporte y gran enseñanza, a veces Platzi te sorprende de esta grata forma.

Carlos Perez Verano

Patrones de diseño web adaptables: Lo más utilizados:
*Mostly fluid.
*Layout shifter.
*Column drop.
*Tiny tweaks.
*Off canvas.

Gianluca Reyes Cisneros

EXCELENTES TEMAS, BATALLE UN POCO PERO AUN DEBO DE ESTUDIARLOS MAS 😄

Joshua Rios

Aquí dejo el link de una página donde pueden encontrar más información sobre algunos patrones Responsive Los 5 patrones del Responsive Design con Flexbox.

Juan Olima

https://www.youtube.com/watch?v=C1J__Iz1CH4
miren este dato de: 5 errrores comunes que cometemos con Css layout.

saludos!

Anggi Vanesa Pallares Solis

Patrones de Diseño

Pablo Alejandro Figueroa

hace 8 meses

Column Drop:

Captura de pantalla 2024-03-23 223631.png

LESTHER XITUMUL MANUEL

hace un año

Las propiedades min-height, min-width, max-height y max-widt son muy importantes en situaciones como la siguiente: Imagina que tienes tu diseño todo chido verticalmente en tu dispositivo móvil, con cuatro elementos que ocupan cada uno el 25% de alto, hasta ahí, todo chido. Peeero, si el usuario decide colocar horizontalmente su dispositivo mócil, ese 25% se convertirá en algo aún más pequeño verticalmente, y es posible que el texto o imagenes no queden como tú quieres. Entonces, al definir tanto una medida mínima y máxima, "habilitamos" el scroll y evitamos que se distorsione el contenido.

Juan Felipe Angarita Lopez

hace un año

“Column drop” is a responsive web design technique that involves changing the layout of columns when the screen size is reduced. This is often achieved using CSS media queries to adapt the layout based on the available screen width.

Here’s a simple example of a column drop using CSS:

css
Copy code
/* Default styles for larger screens */
.column-container {
display: flex;
}

.column {
flex: 1;
/* Other styles… */
}

/* Media query for smaller screens /
@media screen and (max-width: 600px) {
.column-container {
flex-direction: column; / Change to a vertical layout */
}
}
In this example, there is a container with a flex display that arranges its children (columns) horizontally. When the screen width is 600 pixels or less, a media query is used to change the flex-direction property to column, making the columns stack vertically.

HTML structure might look like this:

html
Copy code
<div class=“column-container”>
<div class=“column”>Column 1 content</div>
<div class=“column”>Column 2 content</div>

</div>
Adjust the styles and media query breakpoints based on your specific layout and design requirements. This approach provides a more user-friendly experience on smaller screens by allowing content to be displayed in a single column, making it easier to read and navigate.

Andrés Mejía López

Noé Alexander Mozo Chávez

Colocación de columnas (Column Drop)

En un momento dado, todas las columnas se apilan verticalmente. La selección de puntos de interrupción para este patrón de diseño depende del contenido y cambia para cada diseño.

Como sucede con los ejemplos que son principalmente fluidos, el contenido se coloca verticalmente en la vista más pequeña, pero a medida que se expande la pantalla a más de 600 píxeles, los div de contenido principal y secundario ocupan todo el ancho de la pantalla. El orden de los div se configura con la propiedad CSS de orden. Con 800 píxeles, se muestran los tres div de contenido en todo el ancho de la pantalla.
Ejemplo:

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3 {
  width: 100%;
}

@media (min-width: 600px) {
  .c1 {
    width: 60%;
    -webkit-order: 2;
    order: 2;
  }

  .c2 {
    width: 40%;
    -webkit-order: 1;
    order: 1;
  }

  .c3 {
    width: 100%;
    -webkit-order: 3;
    order: 3;
  }
}


@media (min-width: 800px) {
  .c2 {
    width: 20%;
  }

  .c3 {
    width: 20%;
  }
}

Andrés David Loaiza Zamudio

@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) {
    .c1 {
        width: 30%;
    }
    .c2 {
        width: 40%;
    }
    .c3 {
        width: 30%;
    }
    .c4 {
        width: 50%;
    }
    .c5 {
        width: 50%;
    }
}

AngelHuerta

Aqui un pequeño ejemplo de column drop usando la herramienta https://responsively.app/ la cual recomiendo mucho.

Mauricio Carrasco

Practica antes de video:

Oscar Gomez

UFFFFF, me acabo de pasar una hora viendo porque mi proyecto me estaba dando un overflow (scroll hacia los lados). Hice de todo, investigué en google, lo comparé con proyectos anteriores, e incluso lo comparé con el codigo del profe; nada funcionó, luego reinicié el navegador, y ¿adivinen que? problema solucionado.

Alejandro Parra

Resumen del capitulo en Notion
https://acortar.link/xGB6Y

Israel Lopez Lujan

Column drop reposiciona los bloques de contenido “aventandoslos” hacia arriba.

Juan Pablo Jimenez

48.-Column drop

Tenemos todo de forma vertical pero al momento de empezar a crecer el viewport empieza a arrojar a los contenedores.

jorge llanque

Excelente explicación Diego

LUIS CARLOS OMAR JOFRE PEREZ

Muchas gracias, excelente curso, me sirve mucho!!

JochuaOrtiz

muy buen video Diego eres uno de los mejores

Jose Alejandro Pantoja Giraldo

hace 22 días

Para hacer el html en 1 linea ```js main.container>div.c$*5 ```

Jonathan Garcia

hace 5 meses

![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-07-19%20215645-40678a37-9a03-4dd9-a97c-7a006f971b6b.jpg)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-07-19%20215037-f2e7e97c-6920-404a-aa47-78cd0439228f.jpg)

Daniel Ochoa

hace 7 meses

No usaste el order para nada, hay que procurar no escribir código que se ejecuta y no aporta nada a la presentación de los elementos, realiza procesos innecesarios.

Pablo Alejandro Figueroa

hace 8 meses

mobile

Captura de pantalla 2024-03-24 004904.png

tablet

Captura de pantalla 2024-03-24 004837.png

desktop

Captura de pantalla 2024-03-24 004807.png

TV-FullHD

Captura de pantalla 2024-03-24 004743.png

Andrés Soret Chacin

hace 10 meses

Introducción al Column Drop:

El Column Drop es el último patrón que exploraremos para hacer que un proyecto crezca desde un enfoque mobile-first o mobile-only.
En este patrón, los contenedores se disponen de forma vertical, y al crecer la pantalla, se produce un “drop” de los contenedores, reposicionándolos de manera eficiente.

Estructura de Archivos y Configuración Inicial:

Utilizamos un archivo HTML con un contenedor principal y cinco contenedores hijos.
En el archivo CSS, se establece el estilo base y se aplica el formato flex para el contenedor principal y dimensiones para los contenedores internos.

<!-- En el archivo index.html -->
<main class="container">
  <div class="c1"></div>
  <div class="c2"></div>
  <div class="c3"></div>
  <div class="c4"></div>
  <div class="c5"></div>
</main>

/* En el archivo style.css */
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

/* Clases de dimensiones y colores para diferenciar contenedores */
.c1, .c2, .c3, .c4, .c5 {
  height: 150px;
  border: 2px solid #333;
  margin: 10px;
}

.c1 { background-color: #FFC300; }
.c2 { background-color: #FF5733; }
.c3 { background-color: #C70039; }
.c4 { background-color: #900C3F; }
.c5 { background-color: #581845; }

Implementación de Media Queries:

Se agregan dos breakpoints mediante media queries: uno en 600 píxeles y otro en 800 píxeles.
Se ajustan los estilos de los contenedores para adaptarse a los cambios en el diseño responsive.

/* En el archivo style.css - Media Query para 600px */
@media (min-width: 600px) {
  .c1 { width: 30%; order: 1; }
  .c2 { width: 40%; order: 2; }
  .c3 { width: 30%; order: 3; }
}

/* En el archivo style.css - Media Query para 800px */
@media (min-width: 800px) {
  .c1 { width: 30%; order: 1; }
  .c2 { width: 40%; order: 2; }
  .c3 { width: 30%; order: 3; }
  .container { width: 800px; margin: 0 auto; }
}

Resultados y Observaciones:

Se observa el cambio en la disposición de los contenedores al modificar el ancho y el orden a través de media queries.
El Column Drop permite que los contenedores se reposicionen eficientemente a medida que crece la pantalla.

Conclusión y Próximos Pasos:

Con la implementación del Column Drop, se han explorado tres patrones principales en diseño responsive.
Se menciona la complejidad variable de cada patrón y su aplicabilidad en proyectos reales.
En la siguiente clase, se analizarán ejemplos de páginas web que utilizan estos patrones, proporcionando una visión práctica de su implementación.

¡En la siguiente clase, exploraremos ejemplos reales de páginas web que emplean estos patrones responsive y también abordaremos el trabajo con imágenes de forma responsive!

Jonathan Fernando Ramirez Valencia

Edgar Alfredo López Salero

Column Drop: consiste en que partimos del contenido de un smartphone; una vez visitamos la pagina desde un dispositivo mas grande, las filas se van transformando en columna. Segun se vaya haciendo mas grande el dispositivo.
Ejemplo grafico no tan grafico
Smartphone: 1.
2.
3.
4.
5.
6.

tablet 7": 1. 2.
3.
4.
5.
6.

tablet 10": 1. 2. 3. 4.
5.
6.

monitor: 1. 2. 3. 4. 5. 6.

Yasmil Gonzalez

mostly fluid inicia con columnas verticales y se van ajustando en la medida que se va aumentando el tamaño de pantalla.
<div class=“container”>
<div class=“c1”></div>
<div class=“c2”></div>
<div class=“c3”></div>
<div class=“c4”></div>
<div class=“c5”></div>
</div>
Layout shifter inicia también vertical, y en la medida que cambia la pantalla se comienzan a distribuir unos bloques dentro de otros contenedores padre que se pueden posicionar para brindar un layout diferente
div class=“container”>
<div class=“c1”></div>
<div class="c4”>
<div class=“c3”></div>
<div class=“c4”></div>
</div>
<div class=“c5”></div>
</div>

Column drop también Inicia verticalmente y una vez que crece la pantalla, comienza a posicionar los contenedores hacia arriba según el orden de importancia que se haya definido
div class=“container”>
<div class=“c1”></div>
<div class=“c2”></div>
<div class=“c3”></div>
<div class=“c4”></div>
<div class=“c5”></div>
</div>

Andres Augusto Bonilla Morales

Column Drop: inciando con mobile first, reacomoda los contenedores uno al lado del otro, de izquierda a derecha en el mismo orden de acuerdo al crecimiento de la pantalla, tratando de mantener uniformidad en el tamaño de los mismos.

La clave de este modelo, es el tipo de contenido, ya que no todos se puede manipular de la misma forma (texto, imagenes u otros contendores)

jhonatan89

Pedro Isaac Aguilar

El Column drop hace que varios de los elementos como el header o el navbar mantengan su posición fija en la parte superior, mientras los demás vayan siempre ordenándose hacia abajo, como es el caso del body y el footer.

Jeisson Espinosa

Información resumida de esta clase
#EstudiantesDePlatzi

Al momento de acomodar los contendores y definir el % de espacio que usaran, ellos se van acomodando de arriba hacia abajo
Debemos tener claro estos 3 patrones responsive para nuestros diseños y crear una buena experiencia de usuario

Ricardo Enrique Garrido Zárate

Genial, muchas gracias

Pablo Lucas

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

Olincer Tadeus Garcia Cruz

Captura de pantalla de 2022-03-15 19-32-44.png

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html{

    font-size: 62.5%;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.c1,.c2,.c3,.c4,.c5{

    width: 100%;
   
    height: 150px;
}

.c1 {
    background-color: #003476;
  }
  .c2 {
    background-color: #0062d2;
  }
  .c3 {
    background-color: #b4d2f7;
  }
  .c4 {
    background-color: #d5dfef;
  }
  .c5 {
    background-color: #dfe1e5;
  }


  @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)
  {
      .c1{

        width: 30%;
        

      }
      .c2{

        width: 40%;
     
        
      }

      .c3{

        width: 30%;
      
        
      }

      .c4{

        width: 50%;
       
        
      }
      .c5{

        width: 50%;
      
        
      }
  }

Andres Salazar

Mi resumen de las estrategias para responsive design:
Pueden verse los archivos del código y en vivo. No los dejo aqui, son algo largos. (recordar entrar al inspector y ajustar los anchos de pantalla😉)

Jonathan Stevan Bernal Orjuela

¡Hey! si alguno aun no entiende muy bien los patrones de diseño aqui les dejo un link a la documentacion oficial de developers de google:
https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns?hl=es

Daniel Cabrera Ramirez

En este enlace dan un buen resumen de los 5 patrones del responsive incluyendo los 3 que diego menciona https://carlosazaustre.es/los-5-patrones-del-responsive-design

Juan Carlos Ortiz Romero

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main class="container">
      <div class="c1">Juan</div>
      <div class="c2">Carlos</div>
      <div class="c3">Ortiz</div>
      <div class="c4">Romero</div>
      <div class="c5"></div>
    </main>
  </body>
</html>

Juan Carlos Ortiz Romero

⭐️⭐️⭐️⭐️⭐️

Juan Carlos Ortiz Romero

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.c1,
.c2,
.c3,
.c4,
.c5 {
  width: 100%;
  min-width: 150px;
  height: 150px;
}
.c1 {
  background-color: #003476;
  font-size: 300%;
    color:aqua;
}
.c2 {
  background-color: #0062d2;
  font-size: 300%;
    color:aqua;
}
.c3 {
  background-color: #b4d2f7;
  font-size: 300%;
    color:rgb(0, 0, 0);
}
.c4 {
  background-color: #d5dfef;
  font-size: 300%;
    color:rgb(0, 0, 0);
}
.c5 {
  background-color: #dfe1e5;
}
@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) {
  .c1 {
    width: 30%;
  }
  .c2 {
    width: 40%;
  }
  .c3 {
    width: 30%;
  }
  .c4 {
    width: 50%;
  }
  .c5 {
    width: 50%;
  }
}

hidalgolopezdaniel

No es necesario darle width: 100% a .c3, c4, .c5 ya que por defautl ya tiene la orden del 100% (inherit)

johanecheverri

Captura de pantalla de 2021-08-02 09-37-41.png

Angel David Contreras Barrios