Dinámica: ¿Qué usarías? (Parte 1)

Flexbox, porque se puede usar Flexbox para posicionar los elementos de una forma más fácil usando la alineación y contenidos hijos-padres
Flexbox, son 3 elementos en bloque, y el último bloque podría alinearlo con CSS Grid todo hacia la derecha 😄

.
Creo que lo más importante aquí no es determinar de cuál manera se te hace a ti más sencillo mauqetar, por ejemplo, para los ejemplos propuestos, yo usaría Flexbox porque me llevo muy bien con él y de alguna forma es más flexible para mí, sin embargo, a otra persona se le puede hacer más fácil usar CSS Grid, y es totalmente válido, lo importante es encontrar cuál es la que más se te acomoda, porque a fin de cuentas, se puede lograr el mismo diseño con ambos 😄

Víctor Hugo Torres Fierro

Hoal compañeros.

Considero que como ya han mencionado más abajo, Flexbox siempre se puede utilizar y lo mismo va para Grid. En ese sentido y tomando en cuenta que estaremos trabajando para un cliente o compañía, los factores que determinan qué herramienta utilizar son dos:

-El diseño: Lo que no se pueda hacer con flexbox va para grid
-El tiempo: ¿En cuánto tiempo se necesita el producto? Si se domina una herramineta más que 		 
                       otra y te lleva al mismo resultado en menor tiempo, sin duda se deberá utilzar esa.

La eficiencia prima.

Saludos.

Edgar Lopez Arroyo

En lo personal en ambos casos usaría Flexbox, en primer lugar por que tengo mas experiencia usándolo y en segundo lugar, porque son pocos elementos los que se manejan en estos casos.

Brandon Argel Verdeja Dominguez

Yo utilizaría en ambos

display: flex;

Aunque es cierto que también lo puedes conseguir con Grid, en estos casos como son diseños simples y unidireccionales sería más eficiente flexbox, el grid sería para diseños de cuadrículas que necesiten varias filas y columnas, en esos casos grid si que es más eficiente que flexbox, y viendo un poco el diseño de platzi me dí cuenta que utilizaron grid para la creación del header 🙃

Luis Mendoza Michel

1.- Flexbox porque es un diseño lineal.
2.- Flexbox porque es más facil ubicar sin necesidad de hacer la tabla de Grid

Patricio Manuel Ugarte

Primer caso:

CSS-Grid: Si bien hay un solo eje de trabajo, el sistema de grillas me puede ayudar a acomodar los elementos en celdas con tamaños específicos y ayudarme a manejar mejor y de forma simple el responsive. Si utilizara FlexBox me vería obligado a agregar contenedores hijos en el medio y para alinearlos por dentro tendría que volverlos también contendores FlexBox para conseguir el mismo resultado visual.

Segundo caso:

CSS-Grid: una grilla de tres por tres, donde las primeras dos filas estarán ocupadas de punta a punta por el header y el texto y la última fila ocuparían las dos últimas columnas cada call to action. Si hubiera que trabajar responsive se haría muy fácil de modificar trabajando con grid-area.

Gerardo Castillo

Buena la dinámica, esta chevere ver el esqueleto html y sus estilos en formato flex/grid... ojalá vengan layouts más complejos para ver contrastes

Oscar Gomez

1:53 ¿por que no usaste margin-inline-start y end? 😠(carita enojada)

Sebastián Gonzalez Quintero

Resulta más sencillo usar flexbox en lugar de css grid para ambos casos.

En la primera parte, el nav es un contenedor horizontal y en la segunda parte la única parte que necesita layout es la de las acciones.

Janet Torres

Yo usaría para ambos caso Flexbox, tengo algo de tiempo usándolo y estoy más familiarizada, sin embargo esto no significa que por esa razón lo prefiera sobre CSSGRID, no, depende el diseño, en este caso ambos son muy sencillos y la mente me lleva a la alineación unidimensional.

FernandoGill

Yo en ambos casos usaria Flexbox 😄

Diego Reyes Cabrera

Yo usaría Flexbox para ambos casos. Dada la explicación de la profe, en estos dos casos se podría tomar la dirección de los elementos como unidimensional (en el primero solo se ubican en el row axis, en el segundo se podría hacer como hizo la profe, o se podría poner todo en un column axis y ponerle un justify-self: end a los botones de accion)

Cristian Acevedo

cuando es bidimencional es mejor flex y cuando es tridimencional mejor con grid pero se puede hacer con las dos

José Gregorio Estrada Meneses

Code

<!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">
    <link rel="stylesheet" href="css/style.css">
    <title>Class9</title>
</head>
<body>
    <section>
        <h1>Dialog Header</h1>
        <p>Dialog body text</p>
        <footer>
            <button>Action1</button>
            <button>Action2</button>
        </footer>
    </section>
</body>
</html>

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}
section{
    display: grid;
    grid-template-areas: "header header header"
                         "text text text"
                         "side footer footer";
    background-color: grey;
    border-radius: 5px;
    padding: 1.5rem;
    width: 300px;

}
h1 {
    font-size: 2rem;
    grid-area: header;
    color: pink;
}
p {
    font-size: 1.5rem;
    grid-area: text;
    color: pink;
}
footer {
    grid-area: footer;
    justify-content: end;
}
button{
    background-color: transparent;
    border: none;
    color: white;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}
section{
    background-color: grey;
    border-radius: 5px;
    padding: 1.5rem;
    width: 300px;
}
h1 {
    font-size: 2rem;
    grid-area: header;
    color: pink;
}
p {
    font-size: 1.5rem;
    grid-area: text;
    color: pink;
}
footer {
    display: flex;
    justify-content: flex-end;
}
button{
    margin: 0 5px;
    background-color: transparent;
    border: none;
    color: white;
}```

RubenSH

En ambos casos usaría flexbox.

Raúl Adolfo Sánchez Rodríguez

Te dejo 2 proyectos cargados en **GITHUB** en donde he aplicado GRID y FLEXBOX en diversas partes de la página, ambos proyectos fueron hechos por mi persona como prueba de un curso de la carrera de Desarrollo de Sotware de un intituto en Lima-Perú llamado ISIL: 1\) Proyecto basado en Nintendo (demo: <https://raulsr92.github.io/evaluacion2-ISIL-Nintendo_inspiration/)> * Uso de flexbox dentro de una card de producto ![](https://static.platzi.com/media/user_upload/CARD-flex-e5971b75-9533-4991-8faa-9864626cc125.jpg) * Dentro de ese contenedor flexbox anterior, utilicé flexbox en uno de los hijos ![](https://static.platzi.com/media/user_upload/CARD-flex2-658508ce-34c1-4f45-b33b-eae92855e24f.jpg) * Uso de flexbox en la sección 1 del footer ![](https://static.platzi.com/media/user_upload/FOOTERseccion1-flex-fcf6dd72-2a83-41f8-9d3d-0d77fe808c39.jpg) * Uso de css grid en la sección 2 del footer ![](https://static.platzi.com/media/user_upload/FOOTERseccion2-GRID-6a11d4db-5a54-41f4-bd01-f1573de31431.jpg) 📌Repo: <https://github.com/raulsr92/evaluacion2-ISIL-Nintendo_inspiration> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ 2\) Proyecto basado en FUNKO (demo: <https://raulsr92.github.io/evaluacion3-ISIL-Funko_inspiration/)> * Uso de grid de la barra de navegación ![](https://static.platzi.com/media/user_upload/Funko-navbar-grid-686b589c-b23c-4cd3-be25-aae261fb9748.jpg) * Uso de flexbox en un hijo del grid ![](https://static.platzi.com/media/user_upload/Funko-navbar-flexinterno-eff4d05a-6cd2-40b8-a680-c88b43d10b6e.jpg) * Uso de flexbox en la sección 1 del footer ![](https://static.platzi.com/media/user_upload/Funko-footer-sec1-flex-e9893353-838e-443c-b881-19a8bcaa150f.jpg) * Uso de grid en la sección 2 del footer ![](https://static.platzi.com/media/user_upload/Funko-footer-sec2-grid-71db0ea7-f55c-4752-811f-d3b74476723f.jpg) 📌Repo: <https://github.com/raulsr92/evaluacion3-ISIL-Funko_inspiration>

Brajan Velasquez Sarmiento

css

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


.grid {
    background-color: aquamarine;
    padding-bottom: 5px;
    padding-top: 5px;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
    "nav-logo nav-title nav-icons";
}

.nav-logo {
    grid-area: nav-logo;
    display: flex;
    margin-left: 12px;
}

.nav-title {
    grid-area: nav-title;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-icons {
    grid-area: nav-icons;
    display: flex;
    justify-content: space-between;
    margin-right: 12px;
}


.flex {
    background: rgb(170, 78, 170);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
}

.nav-logo1 {
    flex: 20%;
}

.nav-title1 {
    flex: 60%;
    text-align: center;
}

.nav-icons1 {
    flex: 20%;
    display: flex;
    justify-content: space-between;
}

html

<!DOCTYPE html>
<html lang="en">
<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>

<header>

    <h1>ESTO ES CON GRID</h1>

    <nav class="grid">

        <figure class="nav-logo">
            <img src="./img/menu-hamburguesa.png" alt="">
        </figure>

        <h1 class="nav-title">Title page</h1>

        <section class="nav-icons">
            <img src="./img/twitter.png" alt="">
            <img src="./img/tik-tok.png" alt="">
            <img src="./img/instagram.png" alt="">
        </section>

    </nav>

    <h1>ESTO ES CON FLEX</h1>

    <nav class="flex">

        <figure class="nav-logo1">
            <img src="./img/menu-hamburguesa.png" alt="">
        </figure>

        <h1 class="nav-title1">Title page</h1>

        <section class="nav-icons1">
            <img src="./img/twitter.png" alt="">
            <img src="./img/tik-tok.png" alt="">
            <img src="./img/instagram.png" alt="">
        </section>

    </nav>



</header>

    
</body>
</html>

Oscar David Rodríguez manjarres

se que todos mis compañeros ya respondieron pero yo también quiero hacerlo

Utilizaría FLEBOX (display flex) Ya que se me hace una manera fácil de alinear los elementos solo tendría que el contenedor principal dividirlo en 2(y los alineamos a los costados), dentro de esos 2 contenedores en el caso del izquierdo agregar los dos elementos , separarlos y alinearlos verticalmente. Para el contenedor de la derecha simplemente separar con gap los elementos quedaría algo así:

HTML ⬇️

CSS ⬇️

John Jairo Vargas Gonzalez

Flexbox
CSS Grid

Ariel Hernán

Me gusta mucho mas CSS GRID, porque con Areas podemos definirlo. en el caso del diseño responsive esta buenisimo poder acomodar los elementos y hacer una grilla para cada caso…

Cristian D Gutierrez

Teff y el papayawhip, por siempre.

Raymondi Alejandro Ramos Vásquez

flexbox en los 2

Andree Sebastian Carlos Arias

En el primero usaría flexbox y en el segundo grid

JoaoGarduno

Exacto!! Mis dudas eran esas y siempre las fueron, el problema cuando elegir una u otra, y la verdad que parece que no, pero si tiene sentido, nos ayuda a organizar bien la información y sobre todo el porqué debemos pensar así, por la accesibilidad que nuestros elementos y componentes deben tener.

Diego Vanegas

En mi caso usaria flexbox para elementos que necesiten alineamiento vertical-horizontal unicamente. El grid seria para darle fluides de espaciados y tamaños a los contenedores.

Alejandro Amaya Hincapié

🤔

Flexbox, es mas como para organizar, como cuando organizas vamos por aquí y platos por acá en la mesa… en Grid es como cuando vas a cortar una torta cuadrada, si la quieres cortar en partes o como un tablero de piezas cuadradas, pues aguanta usar Grid.
Flexbox también, sin en sí pocos elementos, pero si ya hablamos de seccionar o dividir “parcelas” la mente va diciendo que es mejor Grid, usar lo mejor para vos más te facilita la tarea, insta al avance más eficiente y queremos aprender rápido, y como dice nike, just do it.

💡
Los invito a que chequen toda página que les llame la atención, aprieten ese F12 o el inspect e intenten leer lo que les llame la atención, es como en los libros, no es que no te guste leer, es que aun no has encontrado a tu escritor interesante.

Randy Ochoa

Yo en ambos casos usaria Flexbox pero con Grid igual se podria

Dylan leonardo

App bar top: flexbox
Dialogs: flexbox

Kevin Riquelme Valdes

Hola comunidad!
En las maquetaciones que he realizado, tomando en cuenta lo que el profe De Granda sugirió en alguna de sus clases… Me gusta usar Grid para estructurar la página de manera mas general, ya sea, el header, boddy y el footer. Luego uso flex para los contenidos que hay dentro de cada sección. Eso si, tomando en cuenta que, si hay contenido de dos dimensiones en una caja, bueno, uso Grid.

Enrique Reyes

En ambos ejemplos se pueden usar tanto flexbox como css grid, pero la primera elección (Nuestra respuesta) fue dada por la manera en la que analizamos el diseño.

Julian David Alzate Cuervo

Me parece que flexbox es más poderoso que grid en la mayoría de casos

César Palma

siempre elijo si flex o grid dependiendo de como los componentes se distribuiran en las diferentes pantallas

Esteban Hincapie Taborda

Flexbox
Flexbox

Realmente no veo necesario usar Grid en situaciones sencillas y fácil uso, aplicar el Flexbox es mucho mas rápido e intuitivo. En lo personal, uso Grid cuando hay algo de cuadricula, diseños bidimensionales, diseños complejos de posicionamiento estructurado, para todo lo demás, dejo que Flexbox haga su magia.

Bryan Quintas

Flexbox
CSS Grid

Joel Dominguez Merino

Yo usaría Flexbox por que una vez que tengo los elementos que conformaran ese “App bar” solo es cuestión de colocar la propiedad de display:flex al contenedor y con un gap puesto darles la separación en especifico. Aunque en medio se nota un espacio mayor, por lo cual dentro del contenedor flex, seguramente habría otros 2 contenedores flex.
De igual forma usaría Flexbox. Primero tendría el contenedor que a su vez tendría dentro 2 contenedores más que también podrían ser fácilmente flexibles. Solo que el primero de estos hijos tendría una dirección en columna. El segundo tendría la dirección normal con un pequeño gap o simplemente una separación entre las 2 acciones.

Tatiana Giselle Ahumada Lobo

yo usaría flex en ambos

Ricardo M

Cabe resaltar que el layaut #2 del minuto 4:39 podría hacerse sin usar Flex o Grid, incluso sería mejor que no lo hicieras ya que es un layaut muy sencillo el cual puedes lograr con propiedades básicas.

Si utilizas Flex o Grid para este tipo de cosas terminarás usando Flex/Grid para absolutamente todo, aunque parezca que estructurar todo con Flex/Grid sea la mejor manera, en muchas ocasiones no lo es porque eso mismo lo podrías haber escrito con propiedades un poco mas básicas que te harán escribir menos líneas de código. El punto es que si te enfocas en estructurar todo con Flex/Grid al final terminarás escribiendo muchas mas líneas de código (código innecesario), a lo que te lleva mas tiempo en hacer el proyecto.

Por ejemplo para hacer este layaut en vez de usar Flex podrías simplemente haberle usado:

.footer{
text-align: right;
}

Y recuerda: Mas código no significa un mejor código 👍

Omar Gabriel Aguilar Moscoso

Mismo código use para el primer ejemplo :'v

Tambien use flexbox

Maria Alejandra Carrero

Yo usuaria flexbox en los casos que se manejen pocos elementos creo que la idea es usar la manera que se nos de mas facil y rapido

Víctor Fernández

Usaria Flexbox en ambos ya que son muy pocos elementos

Alex Leonardo Rodriguez Carvajal

ambos ejemplos :

yo usaria Flexbox en este ejemplo!, es mucho mas simple en codigo y hace mas sentido usar flexbox para ambos casos ❤

Sergio Brandon De Lucio Chavero

Daniel Felipe Merchan Fuquen

¿Es bueno utilizar el tag footer en elementos que no sean propiamente el pie de página del sitio?

Obed Paz

Para el App bar es mucho mas comodo usar Flex-box, ya que tenemos una sola alineacion.
Para el Dialog ambas opciones me parecen igual de comodas, sin embargo me quedo con flexbox en ese caso.

Siento que hizo falta otro reto mas donde se notara mejor el uso de Grid muy por encima de Flexbox.

Nelson Gonzalez Escalante

Para estos dos ejercicios utilizaría “Flexbox”

Gabriel Hernández Valdez

En las dos usaria flexbox, son pocos los elementos y una grid seria hacer el código un poco mas extenso

Eduardo Reyes

Para la primera usaría flex, ya que todos los elementos están en una sola dirección, separados en dos hijos.
Para la segunda haría un grid simple de 3 filas, y luego las acciones estarían juntas en un solo hijo, y usaría justify-self para hacerlo a la derecha.

Claudio Mauricio Franco

Flex en la 1, Grid en la 2.

Isaac Godinez Cortes

Sin duda usuaria Flexbox, pues considero que es mas sencillo hacerlo, sería un contenedor padre con tres hijos y el ultimo de estos igual sería un padre que a la vez tiene 3 hijos.

Daniel De la Garza Cordero

yo utilizaría flexbox para los dos, siento que es más rápida.

Christian Velázquez

https://material.io/

Juan David Rey

Flexbox…no hay duda

Martin Fernandez