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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

8/28
Recursos

Aportes 23

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

Mira el siguiente video en donde uso tanto GRID como flex de manera combina Por ejemplo, en una sección utilizo grid y dentro de esa sección, utilizo flexbox: <https://www.youtube.com/watch?v=PtlpxnOG5F8&t=1469s>

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.