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

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

9/28
Recursos

Aportes 35

Preguntas 10

Ordenar por:

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

  1. Flexbox, porque se puede usar Flexbox para posicionar los elementos de una forma más fácil usando la alineación y contenidos hijos-padres
  2. Flexbox, son 3 elementos en bloque, y el último bloque podría alinearlo con CSS Grid todo hacia la derecha 😄

.
Creo que lo más importante aquí no es determinar de cuál manera se te hace a ti más sencillo mauqetar, por ejemplo, para los ejemplos propuestos, yo usaría Flexbox porque me llevo muy bien con él y de alguna forma es más flexible para mí, sin embargo, a otra persona se le puede hacer más fácil usar CSS Grid, y es totalmente válido, lo importante es encontrar cuál es la que más se te acomoda, porque a fin de cuentas, se puede lograr el mismo diseño con ambos 😄

Hoal compañeros.

Considero que como ya han mencionado más abajo, Flexbox siempre se puede utilizar y lo mismo va para Grid. En ese sentido y tomando en cuenta que estaremos trabajando para un cliente o compañía, los factores que determinan qué herramienta utilizar son dos:

-El diseño: Lo que no se pueda hacer con flexbox va para grid
-El tiempo: ¿En cuánto tiempo se necesita el producto? Si se domina una herramineta más que 		 
                       otra y te lleva al mismo resultado en menor tiempo, sin duda se deberá utilzar esa. 

La eficiencia prima.

Saludos.

En lo personal en ambos casos usaría Flexbox, en primer lugar por que tengo mas experiencia usándolo y en segundo lugar, porque son pocos elementos los que se manejan en estos casos.

Yo utilizaría en ambos

display: flex;

Aunque es cierto que también lo puedes conseguir con Grid, en estos casos como son diseños simples y unidireccionales sería más eficiente flexbox, el grid sería para diseños de cuadrículas que necesiten varias filas y columnas, en esos casos grid si que es más eficiente que flexbox, y viendo un poco el diseño de platzi me dí cuenta que utilizaron grid para la creación del header 🙃

1.- Flexbox porque es un diseño lineal.
2.- Flexbox porque es más facil ubicar sin necesidad de hacer la tabla de Grid

Yo usaría para ambos caso Flexbox, tengo algo de tiempo usándolo y estoy más familiarizada, sin embargo esto no significa que por esa razón lo prefiera sobre CSSGRID, no, depende el diseño, en este caso ambos son muy sencillos y la mente me lleva a la alineación unidimensional.

Primer caso:

  • CSS-Grid: Si bien hay un solo eje de trabajo, el sistema de grillas me puede ayudar a acomodar los elementos en celdas con tamaños específicos y ayudarme a manejar mejor y de forma simple el responsive. Si utilizara FlexBox me vería obligado a agregar contenedores hijos en el medio y para alinearlos por dentro tendría que volverlos también contendores FlexBox para conseguir el mismo resultado visual.

Segundo caso:

  • CSS-Grid: una grilla de tres por tres, donde las primeras dos filas estarán ocupadas de punta a punta por el header y el texto y la última fila ocuparían las dos últimas columnas cada call to action. Si hubiera que trabajar responsive se haría muy fácil de modificar trabajando con grid-area.

1:53 ¿por que no usaste margin-inline-start y end? 😠(carita enojada)

Resulta más sencillo usar flexbox en lugar de css grid para ambos casos.

En la primera parte, el nav es un contenedor horizontal y en la segunda parte la única parte que necesita layout es la de las acciones.

Code

<!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">
    <link rel="stylesheet" href="css/style.css">
    <title>Class9</title>
</head>
<body>
    <section>
        <h1>Dialog Header</h1>
        <p>Dialog body text</p>
        <footer>
            <button>Action1</button>
            <button>Action2</button>
        </footer>
    </section>
</body>
</html>
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}
section{
    display: grid;
    grid-template-areas: "header header header"
                         "text text text"
                         "side footer footer";
    background-color: grey;
    border-radius: 5px;
    padding: 1.5rem;
    width: 300px;

}
h1 {
    font-size: 2rem;
    grid-area: header;
    color: pink;
}
p {
    font-size: 1.5rem;
    grid-area: text;
    color: pink;
}
footer {
    grid-area: footer;
    justify-content: end;
}
button{
    background-color: transparent;
    border: none;
    color: white;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}
section{
    background-color: grey;
    border-radius: 5px;
    padding: 1.5rem;
    width: 300px;
}
h1 {
    font-size: 2rem;
    grid-area: header;
    color: pink;
}
p {
    font-size: 1.5rem;
    grid-area: text;
    color: pink;
}
footer {
    display: flex;
    justify-content: flex-end;
}
button{
    margin: 0 5px;
    background-color: transparent;
    border: none;
    color: white;
}```

En ambos casos usaría flexbox.

En ambos ejemplos se pueden usar tanto flexbox como css grid, pero la primera elección (Nuestra respuesta) fue dada por la manera en la que analizamos el diseño.

Me parece que flexbox es más poderoso que grid en la mayoría de casos

siempre elijo si flex o grid dependiendo de como los componentes se distribuiran en las diferentes pantallas

  1. Flexbox
  2. Flexbox

Realmente no veo necesario usar Grid en situaciones sencillas y fácil uso, aplicar el Flexbox es mucho mas rápido e intuitivo. En lo personal, uso Grid cuando hay algo de cuadricula, diseños bidimensionales, diseños complejos de posicionamiento estructurado, para todo lo demás, dejo que Flexbox haga su magia.

  1. Flexbox
  2. CSS Grid
  1. Yo usaría Flexbox por que una vez que tengo los elementos que conformaran ese “App bar” solo es cuestión de colocar la propiedad de display:flex al contenedor y con un gap puesto darles la separación en especifico. Aunque en medio se nota un espacio mayor, por lo cual dentro del contenedor flex, seguramente habría otros 2 contenedores flex.

  2. De igual forma usaría Flexbox. Primero tendría el contenedor que a su vez tendría dentro 2 contenedores más que también podrían ser fácilmente flexibles. Solo que el primero de estos hijos tendría una dirección en columna. El segundo tendría la dirección normal con un pequeño gap o simplemente una separación entre las 2 acciones.

yo usaría flex en ambos

Cabe resaltar que el layaut #2 del minuto 4:39 podría hacerse sin usar Flex o Grid, incluso sería mejor que no lo hicieras ya que es un layaut muy sencillo el cual puedes lograr con propiedades básicas.

Si utilizas Flex o Grid para este tipo de cosas terminarás usando Flex/Grid para absolutamente todo, aunque parezca que estructurar todo con Flex/Grid sea la mejor manera, en muchas ocasiones no lo es porque eso mismo lo podrías haber escrito con propiedades un poco mas básicas que te harán escribir menos líneas de código. El punto es que si te enfocas en estructurar todo con Flex/Grid al final terminarás escribiendo muchas mas líneas de código (código innecesario), a lo que te lleva mas tiempo en hacer el proyecto.

Por ejemplo para hacer este layaut en vez de usar Flex podrías simplemente haberle usado:

.footer{
text-align: right;
}

Y recuerda: Mas código no significa un mejor código 👍

Mismo código use para el primer ejemplo :'v

Tambien use flexbox

Yo usuaria flexbox en los casos que se manejen pocos elementos creo que la idea es usar la manera que se nos de mas facil y rapido

Usaria Flexbox en ambos ya que son muy pocos elementos

ambos ejemplos :

yo usaria Flexbox en este ejemplo!, es mucho mas simple en codigo y hace mas sentido usar flexbox para ambos casos ❤

¿Es bueno utilizar el tag footer en elementos que no sean propiamente el pie de página del sitio?

  • Para el App bar es mucho mas comodo usar Flex-box, ya que tenemos una sola alineacion.

  • Para el Dialog ambas opciones me parecen igual de comodas, sin embargo me quedo con flexbox en ese caso.

Siento que hizo falta otro reto mas donde se notara mejor el uso de Grid muy por encima de Flexbox.

Para estos dos ejercicios utilizaría “Flexbox”

En las dos usaria flexbox, son pocos los elementos y una grid seria hacer el código un poco mas extenso

  1. Para la primera usaría flex, ya que todos los elementos están en una sola dirección, separados en dos hijos.
  2. Para la segunda haría un grid simple de 3 filas, y luego las acciones estarían juntas en un solo hijo, y usaría justify-self para hacerlo a la derecha.

Flex en la 1, Grid en la 2.

Sin duda usuaria Flexbox, pues considero que es mas sencillo hacerlo, sería un contenedor padre con tres hijos y el ultimo de estos igual sería un padre que a la vez tiene 3 hijos.

yo utilizaría flexbox para los dos, siento que es más rápida.

Flexbox…no hay duda

IMO “Siempre” se puede usar flexbox, el tema es que cuando queremos jugar con una segunda dimension (ejemplo veniamos de arriba hacia abajo y queremos separar dos items de izquierda a derecha) tenemos que meter esos 2 items dentro de un div (u otro) y a ese div hacerlo flex tambien. Y en algunos casos abusamos mucho de esto, manchamos el html, metemos divs dentro de divs de divs de divs… etc…

En esos casos a lo mejor es mas “practico” o “facil” irnos por Grid, aunque si no le sacamos mucho “jugo” al uso de varias columnas y tal, a lo mejor no tenga mucho sentido y podemos seguir por el camino de flex.