Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Tipos de display más usados: flexbox y CSS grid

12/23
Recursos

Aportes 140

Preguntas 41

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¿Y es mejor Flexbox o CSS Grid? 🤔

Si te hiciste esta pregunta vamos a aclarar algunas cosas 👀👇:
.
En general, en cualquier ámbito del desarrollo web no suele haber una tecnología mejor que otra, y este es el caso de Flexbox y CSS Grid. Ninguna es mejor que otra, de hecho, ¡ambas se complementan! No es como que tengas que elegir sí o sí una, es completamente posible usar ambas al mismo tiempo 👀.
.
Por ejemplo, algo que a mí me gusta hacer es usar Flexbox para estilizar elementos pequeños, tipo tarjetitas y así, y después a CSS Grid lo uso para estructurar toda mi página entera OwO. Este es mi modo de trabajar, pero incluso podrías hacerlo al revés, es decir, usar CSS Grid para cositas pequeñas y Flexbox para armar todo tu layout, ¡CSS es muy flexible!
.
Estos dos displays son temas muy interesantes y profundos, por esto tenemos un curso hablando específicamente de ellos dos, aquí te dejo una probadita de lo que se puede hacer con Flexblox 7u7 👇:
.

Flexbox

Flexbox es magia, con Flexbox podemos literal manipular los elementos a como queramos. ¿Alguna vez has visto el meme de “programadores sufriendo por centrar un div”? Pues Flexbox rompe ese meme de manera épica 😎.
.
Con Flexbox podemos alinear los elementos a como queramos, así lo queramos a la izquierda, en el centro o a la derecha, tanto vertical como horizontalmente, por ejemplo, lo más común, centrar un elemento:
.

<div class="container">
    <p>OwO</p>
</div>

.
¡Podemos centrar el texto usando Flexbox!
.

.container {
    display: flex;
    justify-content: center;
    background: papayawhip;
}

.
Y con esto obtendríamos lo siguiente 👇
.

.
En este caso lo hice con un texto… ¡Pero funciona con cualquier elemento! OwO. Otro caso de uso por ejemplo, es cuando queremos hacer un header y queremos que el logo este a la izquierda y que el menú de navegación esté a la derecha. Hacer esto con Flexbox es pan comido 😎👇:
.

<header>
    <picture class="header-child">Soy un logo UwU</picture>
    <nav  class="header-child">Soy un menú de navegación 7w7</nav>
</header>

.
En este caso, tenemos dos elementos dentro de nuestro <header>, el logo debería estar del lado izquierdo, y el menú de navegación del lado derecho, ¿verdad? Bueno, es tan fácil como hacer esto:
.

header {
    display: flex;
    justify-content: space-between;
    background: papayawhip;
}

.
¡Y con eso tendríamos suficiente!
.

.
Obviamente podemos darle más estilos para que se vea más vistoso UwU:
.

header {
    display: flex;
    justify-content: space-between;
    background: papayawhip;
    padding: 15px;
}

.header-child {
    background: #ff9696;
    padding: 5px;
}

.

.
¡Y esto funciona en cualquier tamaño de pantalla!
.

.
Aquí únicamente hemos usado Flexbox, ahora imagínate lo que podemos hacer con CSS Grid 😏…

Les comparto dos juegos con los que pueden aprender Flexbox y Grid.👾

🐸Flexbox froggy: https://flexboxfroggy.com/#es

🌾Grid Garden: https://cssgridgarden.com

La clase es muy buena, solo que tuve problemas con el audio, va desfasado con el video

tr:nth-child(odd) o tr:nth-child(2n+1)
Representa las filas impares de una tabla HTML: 1, 3, 5, etc.

tr:nth-child(even) o tr:nth-child(2n)
Representa las filas pares de una tabla HTML: 2, 4, 6, etc.

:nth-child(7)
Representa el séptimo elemento.

:nth-child(5n)
Representa los elementos 5, 10, 15, etc.

:nth-child(3n+4)
Representa los elementos 4, 7, 10, 13, etc.

:nth-child(-n+3)
Representa los primeros tres elementos entre un grupo de hermanos.

p:nth-child(n)
Representa cada elemento <p> entre un grupo de hermanos. Esto es lo mismo que un simple selector p.

p:nth-child(1) o p:nth-child(0n+1)
Representa cada <p> que es el primer elemento entre un grupo de hermanos. Esto es lo mismo que el selector :first-child.

Para los que estén comenzado con Flexbox y CSS Grid, les recuerdo:

  • Practiquen mucho. No se sientan frustrados. Al inicio puede ser complicado y hasta confuso, pero con la practica diaria e informandose, podrán dominarlo sin problemas 🌟

Les comparto un recurso de un mismo estudiante de aquí de Platzi para que puedan entender mejor cómo funciona cada una de las propiedades de FlexBox.

https://juliansci.github.io/css-flexbox-simulator/

Les comparto mis apuntes sobre display flex del Curso Definitivo de HTML y CSS. 😄
Clases:

  • Display flex

  • Flexbox layout

Display flex

Este display nos ayuda a tener un layout de forma más reponsive.

Si un padre tiene display flex sus hijos se van a comportar de forma distinta, similar como si los hijos tuvieran un display inline-block.

Siempre debemos tener un container principal para poder usar esta propiedad de flex.

flex-direction

Al colocar display flex por default tenemos un display direction en row, esto quiere decir como se van a colocar o acomodar los hijos.

Tenemos varios valores para esta propiedad

Row

Coloca a los hijos en forma de fila o hileras, uno al lado de otro.

Row-reverse

Coloca a los hijos en forma de fila o hileras, uno al lado del otro, pero en forma inversa. El último pasa a ser el primer elemento, todo se recoloca inversamente del lado original.

Column

Coloca a los hijos en forma de columna o verticalmente, como estaban originalmente antes del display flex como si todos tuvieran display block.

Column-reverse

Coloca a los hijos en forma de columna, pero de forma inversa. El último elemento pasa a ser el primero elemento, todo se recoloca inversamente del lado original.

flex-wrap

Esta propiedad no viene implícita y debemos colocar en caso de que la necesitemos.

Esta propiedad tiene los valores de

wrap

Hace crecer mi contenedor, basándose en el viewport, va aplicando u ordena a los elementos de forma inteligente.

A medida que mi pantalla es más pequeña el contenido se va a acomodando de arriba abajo.

wrap-reverse

Realiza lo mismo que el valor wrap, solo que este acomoda el contenido de abajo arriba.

justify-content

Nos permite alinear el contenido de forma horizontal, en el caso que tengamos el flex-direction que viene por default si lo tengamos en column este va a linar de forma vertical.

center

Permite alinear el contenido hacia el centro.

flex-end

Mueve todos los elementos se van hacia la derecha, en caso de que lo tengamos hacia la izquierda.

flex-start

Este valor viene por default.

Hace que el contenido se mueva hacia la izquierda.

space-around

Distribuye a los elementos en todo el width dejando un espacio es entre ellos.

Este espacio no es el mismo a lo largo de todo el contenedor, los elementos que se encuentran en los límites laterales del contenedor tienen un espacio menor a comparación del espacio entre los mismos elementos que es mayor.

space-evenly

Funciona igual que el space-around, pero con una diferencia.

Con este valor el espacio que hay entre todos los elementos y de los que se encuentran en los límites del contenedor son todos iguales.

flex-flow

Con esta propiedad podemos utilizar a flex-direction y a flex-wrap en la misma línea, separadas por un espacio.

flex-flow: valor[flex-direction] valor[flex-wrap];

align-items

Esta propiedad nos permite alinear los elementos de forma vertical, en caso de que tengamos un flex-direction column esta propiedad nos permitirá alinear los elementos de forma horizontal.

Al igual que justify-content tenemos varios valores que nos permiten manejar los elementos de un contenedor.

center

Alinea los elementos hacia el centro del contenedor.

flex-end

Coloca los elementos hacia la parte baja del contenedor.

flex-start

Coloca los elementos hacia arriba del contenedor.

stretch

Estira hacia el 100% del height, dependiendo el flex-direction, del contenedor a los elementos. Siempre y cuando estos elementos no tengan un height definido.

baseline

Reduce el height de los elementos hasta el contendido que tienen estos, tan grande o tan pequeño sea el contenido así será el height. Siempre y cuando estos elementos no tengan un height definido.

align-content

Acepta los mismos valores que align-items.

Esto puede ser confuso, pero align-content determina el espacio entre las líneas, mientras que align-items determina como los elementos en su conjunto están alineados dentro del contenedor. Cuando hay solo una línea, align-content no tiene efecto.

order

Si tenemos al contenedor con display: flex podemos utilizar una nueva propiedad que es order.

Order no se utiliza en el contenedor padre, sino que se lo coloca a los elementos o hijos. Al usar esta propiedad podemos cambiar el orden de los elementos, haciendo que el primer elemento sea el último, que el último sea el segundo, etc.

Los elementos que no tengan un order se moverán a la izquierda y a partir del último elemento, sin la propiedad order, se va a empezar a contar los elementos que si tengan esta propiedad.

flex-grow

Cuando nos sobra un espacio, de forma horizontal, y deseamos llenarlo con alguno de los elementos utilizamos esta propiedad.

Al colocarle de valor 1 esta empezará a crecer para ocupar el espacio en blanco que podemos tener y se lo aplica directamente a los hijos no al contenedor o padre.
flex-basis

pequeño aporte para no usar 1fr 1fr …

.container {
            display: grid;
            width: 700px;
            height: 700px;
            background: papayawhip;
            grid-template-columns: repeat(7, 1fr);
            grid-template-rows: repeat(7, 1fr);
        }

No aparece en los recursos asi que les dejo css grid trikcs
https://css-tricks.com/snippets/css/complete-guide-grid/

Esto no tiene que ver con la clase pero me gustaría compartir una forma de escribir código de manera más rápida. Se llama escritura Emmet, y quizá ya la hayan nombrado antes, pero por ejemplo para hacer el div class container con divs items dentro de él de una forma veloz el código que tendrían que escribir sería este:

.container>.item*4 

Solo dan enter después del código y bim bam para pum tiene su código listo. Si quieren saber más de la abreviatura Emmet les comparto este link: Abreviación Emmet. Un truco para memorizar esto es conocer los tipos de selectores CSS porque si se fijan bien el punto significa clase, el > significa anidado o hijo directo, lo que ya se viene trabajando desde hace rato. Espero les sea útil 😃

El Curso Profesional de CSS Grid Layout y el Curso de Diseño Web con CSS Grid y Flexbox son los siguientes en mi lista por hacer, ¿alguien más como yo?

Así quedo 😃

codigo:

<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>santiago</title>
<style>
.container {
display: grid;
width: 400px;
height: 400px;
background: greenyellow;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
color: indigo;
}
.item {
background: lightseagreen;
width: 100px;
height: 100px;
}
.container .item:nth-child(1) {
grid-column: 1 / 2;
}
.container .item:nth-child(2) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.container .item:nth-child(3) {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.container .item:nth-child(4) {
grid-column: 4 / 4;
grid-row: 4 / 4;
}
.container .item:nth-child(5) {
grid-column: 4
}
.container .item:nth-child(6) {
grid-column: 4 / 1;
}
.items {
background: rgb(253, 61, 61);
width: 100px;
height: 100px;
}
.container .items:nth-child(7) {
grid-column: 3 / 3;
grid-row: 2 / 2;
}
.container .items:nth-child(8) {
grid-column: 2 / 2;
grid-row: 3 / 3;
}
</style>
</head>
<body>
<div class=“container”>
<div class=“item”>1</div>
<div class=“item”>2</div>
<div class=“item”>3</div>
<div class=“item”>4</div>
<div class=“item”>5</div>
<div class=“item”>6</div>
<div class=“items”>7</div>
<div class=“items”>8</div>
</div>
</body>
</html>

Para los que se marean un poco les dejo esta imagen que me ayudo a entender mejor el posicionamiento

Les comparto esta herramienta que últimamente me ha ayudado bastante cuando uso css grid

https://grid.layoutit.com/

El amor te ayuda a descubrir nuevas maneras de experimentar.
(I’m the Maria’s husband haha)

Encontré esta imagen, por si tenían la duda sobre qué diferencia hay entre ambos displays 😃 :

Les dejo mi aporte para enteder como se posiciona en la Grid para pintar cada Item

Para qué se usan CSS Grid y CSS Flexbox

Tanto CSS Grid como CSS Flexbox utilizan para ayudar a diseñar la estructura de una página web, aunque con diferencias entre ellas. Cada una tiene unas ventajas de uso según las características del proyecto que vayas a realizar y, según cada caso concreto, te interesará utilizar una o la otra. Veamos un poco más:

Qué es CSS Grid y CSS Flexbox

  • Flexbox se introdujo por primera vez en el 2009 como un nuevo sistema de formateo, de manera que puedas construir páginas responsive y organizar tus elementos fácilmente sin necesidad de utilizar técnicas demasiado complejas

  • Por otro lado, Grid hizo su aparición con la idea de mejorar flex, y extender su uso más allá de barras horizontales y verticales de elementos, llegando incluso al maquetado completo de páginas web, con diseño responsive y con más fácil mantenimiento.

Diferencias entre CSS Grid y CSS Flexbox

  • La diferencia básica entre ambas está en que CSS Grid está basada en un formato de dos dimensiones, mientras que CSS Flexbox está basada en un formato de una sola dimensión.
  • Compatibilidad en navegadores (Flexbox)

  • Compatibilidad en navegadores (Grid)

me tomo 6 meses manejar este tema, 2 meses despues conseguia mi primer empleo.

Grid y Flexbox es más dificil que 30% de los temas de javascript

Comparto mis ejercicios de la clase:

  • Display CSS Grid

Para crear div rápidos y repetidos escribes :

div.item*4
luego TAB y te genera ya los div con la clase item

        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>

Inentendible lo del grid-column 1/2 podría decirlo mas lento , la verdad eso se me hizo muy dificil entender

Les comento una situacion que ahora me parece obvia, pero cuando uno no sabe, no sabe…
Cuando estaba aprendiendo Css me costo mucho entender el tema de flexbox. me pasaba que intentaba mover algo y no se movia ponia margin/padding y no hacia lo que queria.
Lo que me ayudo a entender es el clasico pensamiento de caja de css.

Funciona de la siguiente manera, uno tiene una gran caja que seria el body y dentro de ellas va poniendo mas cajas, main, sections, articles. Y dentro de cada una mas cajitas, P, DiV, img, inputs, A, etc…
1- Para que vos puedas mover esas cajas es necesario que haya espacio, por ejemplo: si tengo un <section> y dentro un <div> que ocupa el 100%, no lo voy a poder mover, por que no hay espacio donde moverse… entonces la opcion es agrandar el <section> o achicar el <div>.

2- Margin genera margenes… jeje, desde las paredes de la caja para afuera.
Padding genera margenes de las paredes de la caja para adentro.

3-El display flex no es hereditario, asi que si tenes dentro de una caja padre, otra caja padre, esa caja necesita un display flex.

Perdon por tanto texto, son datos que les dejo de mi corto tiempo de utilizar flexbox.

Mi menú con flexbox XD

En https://codepip.com/ puedes aprender css flexbox y grid facilmente jugando pequeños minijuegos. La cuenta gratuita (para nuestra suerte) tiene esos juegos desbloqueados y listos para ser jugados.
Pruebenlo!

Les comparto mi ejercicio de clase 👌

Así quedo el mío

Tiene un poquito de delay o retraso lo que dice la profe con lo que se ve en pantalla XD. Muy completo el tema de los Display que se pueden usar en CSS, la verdad si se me dificultaban un poco pero ya con el tiempo uno le va agarrando el truco ajjajaja

Recuerden que los display: flex; y el display:grid; siempre se declaran en el padre y todo lo que se encuentre por dentro de ese padre se comportará con las reglas que definamos, el padre es la grilla, y dentro de cada elemento de esa grilla puede existir otro padre y así hasta donde necesitemos.

practicando lo visto en la clase

CSS

        body {
            margin: 0;
        }
        .container {
            width: 500px;
            height: 500px;
            background-color: papayawhip;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            
        }
        .item {
            background-color: pink;
        }
        .item1 {
            grid-row: 2/3;
            grid-column: 2/3;
        }
        .item2 {
            grid-row: 2/3;
            grid-column: 4/5;
        }
        .item5 {
            grid-column: 3/6;
        }
        .item1, .item2 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
        }
        .retina {
            width: 100%;
            height: 100%;
            background-color: white;
            grid-row: 2/4;
            grid-column: 2/4;
            display: grid;
            grid-template-rows: repeat(4, 1fr);
            grid-template-columns: repeat(4, 1fr);
        }
        .ojo {
            width: 100%;
            height: 100%;
            background-color: black;
            grid-column: 2/4;
            grid-row: 2/4;
        }
        .item6 {
            background-color: white;
            grid-row: 5/6;
            grid-column: 2/5;
            display: grid;
            /*no se agregaron gris-template, 
            porque en automatico ya me los colocaba uno arriba
            de otro*/
        }
        .diente {
            background-color: rgba(128, 128, 128, 0.509);
            width: 100%;
        }
        .forma {
            border-top: 1px solid white;
            border-bottom: 10px solid papayawhip;
        }

HTML

<body>
    <div class="container">
        <div class="item item1">
            <div class="retina">
                <div class="ojo"></div>
            </div>
        </div>
        <div class="item item2">
            <div class="retina">
                <div class="ojo"></div>
            </div>
        </div>
        <div class="item item3"></div>
        <div class="item item4"></div>
        <div class="item item5"></div>
        <div class="item item6">
            <div class="diente"></div>
            <div class="diente forma"></div>
        </div>
    </div>    
</body>

El jueguito de Flexbox Froggy es muy bueno, ya lo completé 😄

Viendo esta clase dimensiono el poder de la práctica y aunque era muy sencillo hacer el ejercicio a la inversa, me tomó tiempo.
Solo así puedo integrar Flexbox. Grid me falta mucho más

Codigo usado durante la clase:
Flex

<!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>Document</title>
    <style>
        .container{
            display: flex;
            background-color: papayawhip;
            justify-content: center;
            /* align-items: center; */
            height: 500px;
            flex-direction: column;
        }
        .item{
            width: 30px;
            height: 30px;
            background-color: purple;
        }
        .container .item:nth-child(2n+1){
            background: cyan;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

Grid:

<!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>Document</title>
    <style>
        .container{
            display: grid;
            width: 400px;
            height: 400px;
            background: papayawhip;
            grid-template-columns: repeat(4,1fr);
            grid-template-rows: repeat(4,1fr);
        }
        .item{
            background-color: pink;
        }
        .container .item:nth-child(1){
            grid-column: 1/2;
        }
        .container .item:nth-child(2){
            grid-column: 2/3;
            grid-row: 2/3;
        }
        .container .item:nth-child(3){
            grid-column: 3/4;
            grid-row: 3/4;
        }
        .container .item:nth-child(4){
            grid-column: 4/5;
            grid-row: 4/5;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>






Pueden usar esta herramienta para aprender mas sobre flex-box



Tenemos que profundisar estos conceptos con mucha practica

Para los que no les quedo claro el tema de CSS Grid hay un curso basico en platzi que te enseña los conceptos básicos, es corto asi que lo pueden tomar aqui

Dato Curioso

  • para comentar lineas en vs code es tan facil como [CTRL] + K y [CTRL] + C para comentar o [CTRL] + U para descomentar.

Espero que les sirva.

Agregue mas objetos y salio esto

Para declarar en que fila y columna debe ir un determinado item, a mi me resulta mas explicito hacerlo de esta manera:

.container .item:nth-child(1){
            grid-column: 1;
            grid-row: 1;
        }
        .container .item:nth-child(2){
            grid-column: 2;
            grid-row: 2;
        }
        .container .item:nth-child(3){
            grid-column: 3;
            grid-row: 3;
        } 
        .container .item:nth-child(4){
            grid-column: 4;
            grid-row: 4;
        } 
Después de esta clase solo puedo decir que se nota que la profesora sabe mucho de flexbox y grid.

flexbox es como weed y grid es como tu novia. Ambos juntos van bien, pero por separado se disfruta mejor .

Awante float

Esta forma de enseñar, para mí no es la adecuada, estoy deseando acabar este curso, enseña todo rápido sin pararse a explicar porque hace cada cosa, esto no es enseñar. Es hacer cosas hablando en alto.

hasta ahora me queda super claro css grid, excelente profe! Mil gracias:D

Espero pronto poder usar Grid y Flexbox como Teff 😵‍💫

Vengo de varios cursos con el Profe Diego de granda, y con la profe Estefy. La verdad ver este curso es Demasiado Fácil, es como el complemento de los otros cursos anteriores:
.
-Html y Css, Definitivo y Practico.
-Responsive Design: Mobile-First
-Css grid Layout.
.
.
Aprendiendo Css relativamente bien y especificidad, no tendremos problema alguno. 👍

Lo que es github git Js y responsive design es lo que mas me gusta del desarrollo web. Con practica se vuelve mas facil cada vez

Comparto mis ejercicios de la clase:

  • Display Flexbox

Son 2 temas superimportantes y muy interesantes a la hora de estructurar una página, poder algo tan sencillo en la actualidad, que en algunos ayeres era un dolor de cabeza, jeje!
.
Este es un ejemplo de un reto de las primeras clases de CSS Grid Básico, totalmente recomendado:
https://platzi.com/cursos/css-grid/

Para crear la diagonal: ubicando los elementos con Grid.

Centrar al eje vertical: align-items: center;

Pegar elementos justamente en el centro a nivel de izquierda a derecha.

Dejo está guía de Grid por si alguien lo necesita.
https://css-tricks.com/snippets/css/complete-guide-grid/

comparto esta excelente pagina que nos ayuda a comprender y sobre todo a aplicar flex box y CSS grid a tope link espero disfruten de jugar con las ranitas

Les dejo un generador de CSS Grid que me ha ayudado bastante:

https://cssgrid-generator.netlify.app/

Siento que va muy rápido por momentos, tuve que poner pausa demasiadas veces para poder seguir el tema

Acá les dejo mis apuntes en PDF tomados en notion, pido excusas por mi poca habilidad en diseño jejeje

https://drive.google.com/file/d/1LmnKbHKNF3vfoJUtKooqGdiLCxZtDlMq/view?usp=sharing

Para los que tiene duda con flex box aqui hay un video que es de gran ayuda tambien explica sobre el main axis y across axis 😊

https://www.youtube.com/watch?v=_YUJ37FARrU&t=74s

Cada vez esto se pone mas intenso e interesante, y eso que apenas comienza 😃

Para estudiar Flex y Grid CSS

No entendi eso de los colores grid 😦

Esta extension para visual studio es muy buena para ver las propiedades de flexbox, mientras vas haciendo los estilos
CSS Flexbox Cheatsheet. Ayuda mucho con ejemplos graficos.


A practicar!

Gracias por este curso , anteriormente sentia que me faltaba bases para engancharme y avanzar , pero ahora si encontre en este curso el camino basico para poder “engancharme”.

Hay 3 cursos de Grid, uno básico, otro de flex y grid y uno último de Grid Profesional, supongo que el orden sería este, ¿verdad?

No entendí algunas cosas ya que hay un retrazo de la imagen con respecto al video

No se si el audio y el video estan desfasados, pero hay algunas partes en las que es confuso porque parece que la profe estuviese hablando de otra cosa.

aqui les dejo mi ejercicio
una bobadita que me puse hacer para aprender un poco, abajo esta el codigo!!
usando grid```

<!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>Flexxboss</title>
  <style>
    .container {
      display: grid;
      width: 400px;
      height: 400px;
      background: yellow;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
    }
    .item {
      background: red;
    }
    .container .item:nth-child(1) {
      grid-column: 1 / 2;
    }
    .container .item:nth-child(2) {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }
    .container .item:nth-child(3) {
      grid-column: 3 / 4;
      grid-row: 3 / 4;
    }
    .container .item:nth-child(4) {
      grid-column: 4 / 5;
      grid-row: 4 / 5;
    }
    .container .item:nth-child(5) {
      grid-column: 3 / 3;
      grid-row: 1 / 2;
    }
    .container .item:nth-child(6) {
      grid-column: 4 / 4;
      grid-row: 2 / 3;
    }
    .container .item:nth-child(7) {
      grid-column: 1 / 1;
      grid-row: 3 / 3;
    }
    .container .item:nth-child(8) {
      grid-column: 2 / 2;
      grid-row: 4 / 4;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>![](url)> 

.item {
background: green;
}
.container .item:nth-child(1)
{
grid-column: 1 / 2;
}
.container .item:nth-child(2)
{
grid-column: 2 / 3;
grid-row: 2 / 3;
}

    .container .item:nth-child(3)
    {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }
    .container .item:nth-child(4)
    {
        grid-column: 4 / 4;
        grid-row: 4 / 4;

tambien funciono

les comparto el link de un juego https://flexboxfroggy.com/#es para que práctiquen un poco flexbox, se van a divertir de verdad

¡Esta es sin duda mi clase favorita! Fue muy divertido manipular los divs. Casi se siente como una página real!

Estoy un poco desorientado despues de esta clase.
Es el tipo de clase que hay que ver varias veces.
.
Pero creo que sería correcto decir que flexbox nos permite manipular elementos que están dentro de un contenedor de forma profunda, tanto como podamos imaginar.
.
El modelo grid nos ayuda a ordenar elementos dentro de lo que podemos llamar una cuadricula que podemos personalizar como queramos.
.
El modelo flexbox lo entiendo a la primera, pero el modelo grid no tanto, ya lo iré aprendiendo

Flexbox & CSS Grid
Estos 2 módulos de diseño o tecnologías, nos facilitan a los desarrolladores una forma de estructurar nuestros proyectos de manera más “rápida” y “sencilla”, ninguna es mejor que la otra, ya que estas nos permiten complementar a la hora de estructurar dicho proyecto.
.
Entonces… tanto Flexbox como CSS Grid se utilizan para diseñar la estructura de nuestra página, aunque con ciertas diferencias entre ellas. Cada uno de estos módulos de diseño tienen sus ventajas, como ya se ha comentado, una de ellas nos puede ayudar en algo sencillo que queremos realizar en nuestro proyecto como colocar un elemento a un lado del otro, en ese caso, emplearía Flexbox, a diferencia de CSS Grid, en la que todo el proyecto consta de filas y columnas pues será una mejor opcion a la hora de realizar el proyecto.

Comparto ejercicio de la clase

Personalmente yo recomiendo usar Mozilla Firefox para desarrollo fontend ya que tiene herramientas increíbles para Flexbox y CSS Grid.

es genial esta clase por que se explica muy bien

Un truquito para crear varios divs a la vez con clase dentro de otro div:

div>div.item*5

Buen contenido, aunque requiere mucha práctica. ¡¡A practicar!!

<code> 
<style>
      .container{
        display:flex;
        background:green;
        justify-content:center;
        
        
      }
      .item{
        width:30px;
        height:30px;
        background:purple;
      }
      
    </style>
    
  </head>
  <body>
    <div class="container">
      <div class="item"</div>
      <div class="item"</div>
      <div class="item"</div>
      <div class="item"</div>
    <h4>house</h4>
     
  </body>
</html>

Esta profesora explica de lo lindo :3

Me costó un poco entender el grid así que tuve que practicar bastante para poder entender. 😅

deje de aprender lo que es css y flex pero empiezo a retomarlo para no parar de aprender

Mind Blow

Nunca había visto cómo utilizar el display Grid
¡Está super!

Notes:

  • En flexbox podemos tener tanto contenedores como elementos hijos
  • Flexbox nos permite ubicar elementos
  • Los elementos “padres” son los que llevan el display:flex
  • justify-content nos permite ubicar nuestros elementos de manera horizontal
  • align-items nos permite ubicar nuestro contenido de manera vertical
  • grid-template-column nos permite definir la cantidad y tamaño de columnas que queremos en un display grid
  • grid-template-rows nos permite definir la cantidad y tamaño de las filas que queremos en un display grid

jeje me cae bien la profe esfefany, pq inicio el curso con comando touch y ahora no dice cosas como div.item*4 + enter para insertar multiples elementos mas facil. ojo solo uso vs.code

5 Juegos que pueden ayudarte a aprender Grid y Flexbox

 

1.- Grid Garden  


 

2.- Flexbox Zombies 


 

3.- CSS Battle 


 

4.- Flex Box Adventure  


 

5.- Flexbox Froggy 

La verdad es que al principio me ha costado un poco seguirla, parece que en determinados momentos va un poco rápido. pero pausando el video e intentando entender porque se realizan las cosas de esa manera, lo puedes aprender perfectamente.
Algo que me costó al principio fueron las medidas grid-colum y grid-row, no entendía el porqué, por ejemplo, de 2 / 3, y simplemente, es como rellenar el espacio entre el hueco 2 y el 3.

team/comunidad platzi, para ajustar el tamaño de las ventanas con el teclado en macOS recomiendo usen https://rectangleapp.com/ es muy practico.

@Estefany a mi me ha servido mucho como usuario de macOS