¿Cuándo usar Flexbox y cuándo usar CSS Grid?

Definitivamente para conocer mejor estas herramientas no hay como practicar y probar. 😄

CSS Grid y Flexbox…

 Mis 3 mejores amigos:
1- El Inspector
2- La Practica
3- La Paciencia

A mi lo que más me ha costado es decidir como dividir la grilla para usar Css Grid, creo que te da mayor libertad para hacer mejores diseños. He aquí un ejemplo

Al momento de implementar, crear tareas para la creación de componentes en este ejemplo serían:

1. Crear la grid principal.
2. Crear la grid de los hijos.
3. Crear 3 tipos de cards
4. Ubicar cards

Teniendo en cuenta que es a libre uso:
Flexbox = componentes de escala pequeña.
Grid = componentes de escala más grandes como layout.

Realice este ejercicio que pille en youtobe, son unas cards responsive con css grid

GitHub: https://github.com/JohnDeev/CardsBeersCssGrid

Flexbox = componentes de escala pequeña.
Grid = componentes de escala más grandes como layout.

Al momento de implementar, crear tareas para la creación de componentes:

1. Crear la grid principal.
2. Crear la grid de los hijos.
3. Crear 3 tipos de cards
4. Ubicar cards

¡Que genial! Ya no sufriré en la decisión de como hacer las cosas! 😄

“Uyyyyy no, chale vato, hiciste este diseño con CSS Gid y yo vi en el curso de Flexbox y CSS Grid que dijo teff que no se podía hacer con CSS Grid… Rechazado!” Jajaja me imaginé a alguien en una situación así xD
.
Me encanta la posibilidad que tiene CSS para hacer cualquier cosa, el diseño 4 también se pudo haber hecho con positions, es una gran variedad de posibilidades las que tenemos:3

Recomiendo este workshop de la plataforma Egghead, donde se va armando una Landing Page paso a paso, utilizando Grid y Flexbox. La instructora muestra muy buenas prácticas y va explicando cómo y por qué usa cada tipo de display.

Realmente ha sido para mi muy difícil CSS pero a sido por mi propia culpa, ya que esto requiero de mucha practica gracias a grandes profesores/as como @teffcode se hace mas fácil entender los conceptos, solo hace falta de nuestra parte hacer la practica.

Uff yo ya estaba acostumbrado a flexbox pero con grid puedes “Automatizar” algunas cosas en tu página y con mucho menos código, creo que intentaré implementar css grid en la estructura y responsive design y el flex en el acomodo y diseño 😄

Llego el momento de hacer para aprender… realmente se vuelve una cuestión de método personal, aunque estoy de acuerdo en que un grid es mejor para agrupar varios objetos y flex para diseños mas sencillos. Pero claro que si tuviéramos una landing page muuy sencilla la podríamos hacer con unas cuantas cajitas y usar flex.

Comparto este video donde pueden entender un poco mas de CSS grid y flexbox y sobre todo, practicar.

Practica CSS

siento que ha bajado el nivel de los cursos es mi impresión sobre todo los de css, cursos conversacionales le pierden la chispa a la creatividad.

Grid - Flexbox

Practicar es la clave. No solo vean los cursos. Practiquen porfa.

Paciencia 😃

Antes de preocuparse por cual display usar, primero practiquen hasta familiarizarse con ambos elementos. Muchos aquí preferimos flexbox porque ya venimos de eso, y está genial, pero a medida que vayamos acostumbrandonos al grid vamos a empezar a cambiar nuestras preferencias. Al final eso es algo relativo y depende de nosotros. Sentirás que flex+grid es un superpoder

Aquí les dejo el link del curso que recomienda Teff:
Curso profesional de Scrum

Las 3 P’s:-

• Paciencia
• Práctica
• Platzi

Muy buena clase 😃

Así es, sentí que debía cambiar mi decisión ante el cambio de variable (21 Blackjack movie reference)

Este fue mi reto. Utilice tanto grid como flex. En algunos contenedores no vi necesario usarlo.

Como recomendación, uno de los factores que reviso y tengo muy en cuenta a la hora de escoger si usar Grid o Flex es el ¿cómo se va a adaptar a las vistas responsiva mi diseño? tanto si comienzo por móvil o no.

¿Cuándo usar Flexbox y cuándo usar CSS Grid?

• Flexbox

Flexbox es mas apropiado para los componentes de una aplicacion y diseños de pequeña escala

• Grid

CSS Grid esta diseñado para deseños de mayor escala

En este caso, es genial ver como podemos combinar el poder de css grid con flexbox.

Con grid alineamos las 3 columnas y con flex distribuimos los elementos de cada columna.

Y con una mediai query, cambiamos las columnas de css grid a una sola en dispositivos mas pequeños. Ahorrandonos un monton de codigo combinando ambas herramientas (:

Siento que a partir de las estructura del HTML es mas fácil definir si el uno o e otro

Lo que dice ella al principio, te arrepientes de escribir el código con flex y luego como que no mejor con grid… Well, me acaba de pasar… LOL

Desde el día de hoy mis mejores amigos se llaman :
Práctica y Paciencia

Estas cosas solo se solucionan practicando, haciendo y haciendo, maqueteando, solo así podremos saber que es lo más correcto en que situaciones. Nos podemos quedar con lo que dice Estefany, pero si no vamos al código y a la experimentación no hay como contrastar.

Este curso es fatal 100% teoria, esta joven habla demasiado

Aqui mi reto

Flexbox es mas apropiado para componentes de una aplicación y diseños de pequeña escala. CARDS, LISTAS PEQUEÑAS,ETC. Sin embargo hay que tener en cuenta el flujo normal de documento. CSS GRID esta pensado para diseño de mayor escala. La idea de la organización inicial y el contenedor grande puede cambiar de acuerdo a la visualización del trabajo. El contenedor siempre puede estar en CSS GRID.

He notado en mis proyectos que cuando trabajo con CSS Grid uso casi la mitad de codigo que con flexbox 😃

¡¡¡Por fin tengo amigosss uwu!!!
(Al final entenderas) Jjajajaj 🤣

<!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>reto card</title>

<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=Island+Moments&family=Poppins:wght@200&family=Source+Serif+4:ital,wght@0,200;0,500;1,300&family=The+Nautigal:wght@400;700&display=swap” rel=“stylesheet”>

</head>
<style>
body{
margin: 0;
font-family: ‘Poppins’, sans-serif;
}
.container{
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(4, 1fr);
justify-content: center;
align-items: center;
}
.header{
width: 300px;
height: 65px;
display: flex;

}
.text{
display: grid;
grid-template-rows: repeat(2, 1fr);
width: 80px;
height: 10px;
}
.text h1{
font-size: 10px;
}
.text h2{
font-size: 8px;
}
.thumbnail img{
width: 50px;
height: 50px;
}
.media img{
width: 288px;
height: 200px;
margin-left: 9px;
}
.text2{
text-align: center;
}

.finalText h2{
font-size: 8px;
}
.finalText buttons{
display: flex;
justify-content: flex-end;
}
.icons{
justify-content: end;
display: flex;
}
.icons img{
width: 30px;
height: 30px;

}
</style>
<body>
<div class=“container”>
<div class=“header”>
<div class=“thumbnail”>
<img src=“https://cdn-icons.flaticon.com/png/512/3736/premium/3736502.png?token=exp=1645223195~hmac=f47726261994604fdcaf381b55de9f3d” alt="">
</div>
<div class=“text”>
<h1>Title goes here</h1>
<h2>Secundary text</h2>
</div>
</div>
<div class=“media”>
<img src=“https://acortar.link/Ngdb70” alt="">
</div>
<div class=“finalText”>
<div class=“text2”>
<h2>“Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”
“No hay nadie que ame el dolor mismo, que lo busque y quiera tenerlo, simplemente porque es dolor…”</h2>
</div>

            <a id="action1">ACTION 1</a>
            <a id="action2">ACTION 2</a>
        
        <div class="icons">
            <img src="https://acortar.link/cgstQ4" alt="like">
            <img src="https://acortar.link/WFSdTI" alt="share">
        </div>
    </div>

</div>

</body>
</html>

Practices Makes Perfect!

Utilize grid y flexbox
Grid para hacer mas fácil el responsible
y Flexbox para los elementos internos

Pagina wed dondé los puse utilizando GitHub Pages

A mi punto de vista lo veo como CSS-GRID, para crear layouts y plantillas. FLEXBOX para ordenar y manipular los elementos internos de eso layouts creados con css grid

Personalmente, me gustas usar grid cuando los objetos en verdad se sientan como en una grilla, es decir cuando tenemos que alinear si o si el eje x y y, ya que en un solo eje pienso que flex es más que suficiente

Desde mi experiencia flexbox me es más cómodo para componentes pequeños como una card, menú, formularios, etc. y grid para layouts más amplios como una página completa, incluso para secciones indivuales de una página web como el hero, entradas de un blog, listado de elementos, etc

yo en el caso del uno lo manejo con un display: inline-block

Confirmo lo de la práctica y la paciencia, cuando tomé los cursos con Leonidas Esteban era mi primer acercamiento a Grid y flexbox y muchas veces hacía cosas innecesarias o cosas demasiado enredadas, a medida que fui practicando y documentándome acerca de estos layouts mejoré mucho en la forma en la que desarrollo y en la forma en la que decido que tipo de layout usar

Concuerdo completamente! Lo mejor que podemos hacer es llevarlo con calma, pero con constancia. La practica hace al maestro 💚

El 4 se puede usar sólamente flexbox para el componente final la imagen que comparte ambos contenedores sue puede posicionar absolutamente con el segundo contenedor con posición relativa.

jajajaj justamente me paso eso en la actividad pasada, la card la empece con grid y la termine haciendo con flexbox aprovechando el flujo normal del documento 😂😄

use flexbox para todo jasajs

Yo también sufría en no saber que decisión tomar, ahora se que todo está permitido.

Al momento de implementar crear tareas para la creacion de componentes en este ejemplo serian: 1. Crear la grid principal. 2. Crear la grid de los hijos. 3. Crear 3 tipos de cards 4. Ubicar cards