¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

Para crear una galería de imágenes, un grupo de tarjetas, etc. usaría grid y para crear algo como un navbar, footer usaría flexbox

De primera vista se ve y se intuye que podemos usar CSS Grid, aunque también podríamos usar Flexbox 👀 (esto para elcaso en donde solo nos enfocamos al diseño en dispositivos móviles, sin pensar en responsive).
.
Con Flexbox podríamos tener un div que sea cada nueva fila que tenga un space between con ambos elementos al 50% del tamaño, al ser Flexbox un elemento bloque… ¡funcionaría!
.
Pero claramente la mejor opción es CSS Grid jaja

🤔 ¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

• ¿Puedo trabajar con Flexbox y CSS Grid al tiempo?
  • Si
• Pero va a depender del diseño que tengamos o necesitemos
• por ejemplo, esta pantalla, si identificamos los elementos
  
  
• Podremos observar que necesitaremos un contenedor
  
  
• Este contenedor tendrá hijos, los cuales podemos definir por dentro con flexbox
  
  

En el contenedor padre yo utilizaría grid, algo como:

grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
/* Para que se alinien como en el ejemplo y así quedaría perfecto para el responsive 😄 */

Y en cada cuadrito del grid yo utilizaría display flex, como:

display: flex;
flex-direction: column; // Alineación vertical
justify-content: center; // Centrados horizontalmente

Y de esa manera quedaría muy parecido al ejemplo 😃

El haber aprendido un poco de React (aun no programo ni construyo nada con React pero lo estudie por curiosidad) me ha ayudado muchisimo a identificar componentes y trabajar de manera mas eficiente. 😄😊

Estas clases NECESITAN tener mas practica.

Aqui unos pequeños tucos para CSS + Flexbox :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Para el contenedor usaría grid porque presenta las cartas en una grilla de 2 x 3.

En resumen, podemos utilizar ambos, siempre y cuando tengamos bien claro que podemos hacer. Algo que me quedó grabado de un curso de diego de granda, es que crear codigo no es algo que se hace de una sola forma, sino que hay multiples soluciones para distintos problemas...por eso ¡Viva la diversidad! <3

Para trabajar el Responsive con gris hay dos propiedades especiales y que no se te deben olvidar que deberias aprenderlas es el … auto-fill … … auto-fit …

código del primer ejemplo con grid sería

.parent-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}

.card {
	border-radius: 12px;
	border: 1px solid gray;
}

CSS Grid para el contenedor
Flexbox para el elemento.

CSS Grid + Flexbox si, pero depende el caso a resolver.

Para hacer el contenedor con el contenido que muestra la profesora ahí utilizaría CSS Grid.

Si el contenido va a ser dinámico, es decir, algo como una Galería de fotos, donde el usuario va agregando contenido con el tiempo, utilizaría un contenedor ajustado al contenido y usaría flexbox con la propiedad flex-wrap, para que de esa manera se vaya agregando dinámicamente el contenido.

Viendo en las Devtools en la página de Instagram eh notado que usan ese método en sus galerías.

claro que yes pero depende de lo que vayas a hacer

Para organizar un conjunto de Cards en varias filas y columnas utililizaría Grid y cada Card si tiene una sola columna utilizaría Flexbox.

Contenedor:
Display: Grid
Media queries cambiando la template de la grid

Card:
Display: Flex
flex-direction: Column

Para el contenedor utilizaría CSS Grid

Puedes utilizar grid facilmente para estructurar y posicionar el layout general y flexbox para los elementos internos 🤓

Genial, siempre tuve esa duda, si podía utilizar flexbox y grid en el mismo proyecto, así puedo tener mejor manipulación de los elementos, genial aporte.

Facilmente para el contenedor usaría Grid.