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

Similitudes entre Flexbox y CSS Grid

7/28
Recursos

Aportes 56

Preguntas 2

Ordenar por:

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

Aunque esto ya muchos lo saben, para los que sean nuevos aquí les dejo los mejores juegos para practicar todo lo visto en esta clase

Flexbox
Juego de flex
Grid
Juego de grid

Sí que se puede, de hecho, CSS Grid + Flexbox = Combinación ganadora, cuando hacía mis proyectos con CSS Grid siempre los combinaba con Flexbox para poder tener aún más control de los elementos y ufff, era hermoso.
.
El hecho de trabajar con CSS Grid ya hace que todo sea sencillo, pero si a eso le añadimos Flexbox, prácticamente tienes el control de todo, de hecho, puedes trabajar flexbox dentro de una celda de una grid y es completamente válido!

¡Claro que se puede! Yo utilicé ambos para crear mi portafolio 😃
https://brandonargel.github.io/ (Nota todavía no está terminado)

🔀 Similitudes entre Flexbox y CSS Grid

<h4>Apuntes</h4>
  • Flexbox y CSS Grid tienen 2 similitudes:
    1. Relaciones Padres e hijos inmediatos
    2. Ejes de alineamiento
<h4>Relaciones Padres e hijos inmediatos</h4>
  • Tantos los padres tienen hijos, pero los hijos también pueden ser padres
  • Si se define correctamente que contenedores serán padre, hijos o ambos entonces sera más sencillo definir la técnica
  • Segun a eso tendremos propiedades para
    • Padres
    • Hijos
<h4>Ejes de alineamiento</h4>
  • CSS siempre tienen dos axis o ejes
    1. Justify
      • inline axis (row axis)
    2. Align
      • Block axis (column axis)
    • Las propiedades tienen un inicio (start) y un final (end)
      • Por defecto de izquierda a derecha para inline
      • Por defecto de arriba a abajo para block

RESUMEN: Flexbox y CSS Grid comparten dos características las relaciones padre e hijo y los ejes de alineamiento que tiene cada una

Si podemos trabajar con Flexbox y Grid al mismo tiempo.
Obviamente esto va a depender de la forma en cómo lo implementemos.
Pero básicamente podemos en algunos elementos definir comportamiento flex box y a alguno de sus hijos darle display grid para que a su vez sus hijos se comporten basados en grid y no en flex box.

Estos cortos vídeos ayudarán mucho:

CSS Flexbox in 100 Seconds

CSS Grid in 100 Seconds

Un pequeño aporte es que cuando uno utiliza flex-direction: column;
las propiedades como justify-content y align-items los valores aplicados en la web se invierten, como es esto? Quiere decir que: align-items ya no alineará de manera vertical sino de manera horizontal y justify-content alineará de manera vertical.

También hay que tomar en cuenta que Justify básicamente sigue el flujo de los elementos por decirlo de alguna manera ya que si cambiamos el flex-direction a “column” estas propiedades se terminarían invirtiendo.

  1. Relacion entre padres e hijos. ⇒ padres | hijos
  2. Ejes de alineamiento ⇒
    • ustify | align
    • inline | block
    • horizontal | vertical

Por lo poco que llevo conociendo el mundo de CSS Flexbox y Grid, yo digo que si se pueden combinar ambos, ya que hay cosas que son más sencillas de hacer en uno que en otro’

Respondiendo a la pregunta si se puede trabajar con flexbox y Css Grid al mimo tiempo , ya que se puede al padre darle las propiedades de css grid y a sus hijos las propiedades de flexbox, dependiendo de nuestro proyecto y del layout que deseamos crear

Respondiendo a la pregunta: si, si se puede. Grid esquematiza a nivel global y flexbox a nivel particular. Esto se traduce en mayor control sobre el layout.

Hace falta la documentación que Estefany menciona en la caja de enlaces.

Debemos hacer énfasis también que en flexbox, si cambias la dirección de los elementos del contenedor a column entonces las propiedades de Justify Align se invierten y sirven para lo contrario.

Si se habla de un proyecto en si, claro se puede utilizar Flexbox y CSS Grid al mismo tiempo, para algunas sección por así decirle se pueden emplear con CSS Grid, y otras con Flexbox, ejemplo crear el navbar con CSS Grid, y el Footer solo con Flexbox.

Los dos se complementan, si podemos usarlos en un mismo proyecto.

Es un súper poder utilizar los dos, yo era amante de Flex porque le temía un poco a Grid, pensé que sería muy complicado pero la verdad es que, ahora que lo comprendo, es una maravilla y el hecho de utilizar los dos ya puedes hacer infinidad de cosas para crear layouts increíbles! 😃

En Flexbox Justify inline axis y Align block axis sólo se cumple para flex-direction: column, para flex-direction: row es al revés.

Creo que es posible trabajar con ambos en un mismo proyecto, nada más que hay que definir cada elemento con grid o flexbox

Creo que sí que podemos trabajar con CSS Grid y Flexbox al mismo tiempo porque podemos darle esas propiedades a los hijos.

justify = eje horizontal
align = eje vertical

(pero los ejes se pueden cambiar)

“No creo” que sea necesario trabajar con los dos al tiempo podemos escoger alguno de los dos para alinear

what is going on here?🤨🤨

Se puede usar ambas, siempre y cuando sabiendo de antemano las propiedades y los benchmarks de cada una, para hacer buenas performances a la hora de diseñar.

Si se puede, Con CSS GRID creamos los contenedores o grillas para armar un layout lo mas personalizable posible, y con FLEXBOX ordenamos el contenido de esos contenedores para tener una un layout y un contenido exacto a lo que diseñamos o lo que pide el cliente.

Yo considero que se puede hacer una gran combinación utilizando Flexbox y CSS Grid

Si, yo opino que si se pueden trabajar con CSS Grid y con Flexbox al mismo tiempo. Con grid podemos definir la estructura que tendrá nuestra pagina. Una vez definida la estructura, con flexbox podremos ubicar cada elemento de forma flexible

creo que el concepto justify en el eje horizontal creo que esta mal ya que seria el eje principal
porque si cambiamos la dirección ya no seria horizontal
direccion:column

cambiamos el eje principal

¡Por supuesto se puede trabajar con ambos! Es muy común encontrar grandes containers con display grid y las celdas con display flex.

si se puede trabajar al mismo tiempo con css grid y flexbox, esto nos hace ser buenos desarrolladores web. Las empresas buscan que las webs tengan la mejor configuración para que sean accesible para todo público y flex and grid nos ayuda

vuamosss

A pesar que nunca he trabajado con Flexbox y CSS Grid al mismo tiempo, con lo que he aprendido, estoy seguro que sí se puede. Es más, debe ser una excelente opción para colocar los elementos prácticamente en cualquier posición del layout.

Claro, si se puede. Solamente tenemos que inspeccionar si el componente que vamos a crear requiere acomodar los elementos en un solo eje, no importa si es horizonal o vertical, siempre y cuando sea solo una linea de elementos, en esos caso utilizar flexbox, de otro modo si tenemos mas lineas y alinear ejes en dos ejes pues usamos grid.

En lo personal considero que no siempre es cómodo usar grid, si funciona para maquetar el sitio web general y ciertos elementos, pero hay veces donde uno prefiere utilizar flexbox para acomodar los elementos más facilmente. Lejos de reemplazar a flexbox, grid es una herramienta perfectamente combinable

Obvio si, obvio si, he incluido grid y flexbox en algunos de mis proyectos.

Respecto a la ultima pregunta: En el último video de el curso definitivo de HTML y CSS Diego nos comentaba que podíamos usar CSS grid para organizar los elementos generales de nuestro proyecto y podíamos usar flexbox para organizar pequeños elementos pertenecientes a los generales.

P.D.
No recuerdo bien si fue en el curso definitivo de HTML y CSS o en el de Responsive Design.

Claro que sí!

yo creo que si se puede trabajar con flexbox y grid a la vez!

Aquí les dejo una prueba de como se pueden mezclar ambos display.
La verdad es que usándolos juntos tus proyectos quedan mucho mejor.

Si se puede.

En el curso de css grid layout realizaba varias pruebas en las cuales siempre ponia el grid como padre principal y ya las subdivisiones mas pequeñas con flex , se me hacia mas facil el trabajo de esa manera

Yo digo que si, siempre y cuando sabiendo como usarlo. Puedes utilizar grid para estructurar y posicionar el layout general y flexbox para los elementos internos

Cuantos “justamente” dice la profe por cada video? xD Nuestras muletillas 😃

Cuando uno le da una dirección a flex, la propiedad que se alínea con justify cambia.
Si uno usa flex-direction: row (por defecto) entonces justify alínea el eje horizontal, pero si uno usa flex-direction: column, entonces justify alínea de forma vertical.

Sí es posible utilizar ambos. Un ejemplo sería hacer el front de una colección de productos con display grid para cada product card de manera que siempre se reserven filas de 3 productos cada uno. Cada product card se puede construir con display:flex; flex-direction:column para mostrar la información del producto de forma vertical.

Flexbox y CSS Grid comparten dos características las relaciones padre e hijo y los ejes de alineamiento que tiene cada una

Flexbox para el contenido, y Grid para los elementos generales

Si se puede trabajar y ambos hacen la mejor combinación

Flexbox y CSS Grid, deben estar en tu caja de herramientas, ayudan a ahorrar mucho tiempo y esfuerzo.

Claro que se puede

Y es GENIAL 😄

Sí se puede trabajar con ambos, y en lo personal me gusta mucho combinarlos. Usando grid para darle forma a un layout principal, y utilizando flex en los contenedores de ese layout cuando solo requieren un alineamiento interno en una sola dirección (ya sea row o column)

👌

Un ejemplo de como podemos trabajar con flexbox y grid al mismo tiempo es cuando creamos una cuadricula para organizar nuestros contenedores con Grid pero dentro de cada contenedor alineamos sus elementos con Flexbox (claro dependiendo de las necesidades también puede usar Grid dentro de Grid las veces que quiera)

Si se puede trabajar con los 2 al mismo tiempo, por ejemplo podemos tener un layout con grid y las celdas de ese grid pueden tener flex, para tener un mayor control

CSS Grid para darle estructura a todo el sitio y Flexbox para organizar todo el contenido interno del sitio. Si se puede trabajar al tiempo y es muy recomendado hacerlo hoy en día.

Como mis compañeros comentan, si se puede incluir Flebox y Grid en un proyecto.

SI se puede, lo he utilizado en algunos proyectos y en conjunto funcionan muy bien.