Descubre qué ha cambiado en nuestro medio

1

Todo sobre el diseño de páginas web acaba de cambiar

Conceptos que forman parte del diseño en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Dinámica: ¿Cómo se vería?

¿Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

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

10

Dinámica: ¿Qué usarías? (Parte 2) + Reto

11

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

Modern Layouts con CSS Grid

12

¿Qué son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Diseño web para desarrolladores

16

Dinámica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de diseño UI/UX: Fase de inspiración y creatividad

19

Wireframes y comunicación visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del diseño al código

22

Primeros pasos y estructura inicial

23

Ubicación y creación de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: ¿existirá CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

8/28
Recursos

Aportes 19

Preguntas 0

Ordenar por:

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

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.

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.