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

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

9/28
Recursos

Aportes 53

Preguntas 12

Ordenar por:

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

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

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.
Buena la dinámica, esta chevere ver el esqueleto html y sus estilos en formato flex/grid... ojalá vengan layouts más complejos para ver contrastes

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.

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.

Yo usaría Flexbox para ambos casos. Dada la explicación de la profe, en estos dos casos se podría tomar la dirección de los elementos como unidimensional (en el primero solo se ubican en el row axis, en el segundo se podría hacer como hizo la profe, o se podría poner todo en un column axis y ponerle un justify-self: end a los botones de accion)

cuando es bidimencional es mejor flex y cuando es tridimencional mejor con grid pero se puede hacer con las dos

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.

Te dejo 2 proyectos cargados en **GITHUB** en donde he aplicado GRID y FLEXBOX en diversas partes de la página, ambos proyectos fueron hechos por mi persona como prueba de un curso de la carrera de Desarrollo de Sotware de un intituto en Lima-Perú llamado ISIL: 1\) Proyecto basado en Nintendo (demo: <https://raulsr92.github.io/evaluacion2-ISIL-Nintendo_inspiration/)> * Uso de flexbox dentro de una card de producto ![](https://static.platzi.com/media/user_upload/CARD-flex-e5971b75-9533-4991-8faa-9864626cc125.jpg) * Dentro de ese contenedor flexbox anterior, utilicé flexbox en uno de los hijos ![](https://static.platzi.com/media/user_upload/CARD-flex2-658508ce-34c1-4f45-b33b-eae92855e24f.jpg) * Uso de flexbox en la sección 1 del footer ![](https://static.platzi.com/media/user_upload/FOOTERseccion1-flex-fcf6dd72-2a83-41f8-9d3d-0d77fe808c39.jpg) * Uso de css grid en la sección 2 del footer ![](https://static.platzi.com/media/user_upload/FOOTERseccion2-GRID-6a11d4db-5a54-41f4-bd01-f1573de31431.jpg) 📌Repo: <https://github.com/raulsr92/evaluacion2-ISIL-Nintendo_inspiration> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ 2\) Proyecto basado en FUNKO (demo: <https://raulsr92.github.io/evaluacion3-ISIL-Funko_inspiration/)> * Uso de grid de la barra de navegación ![](https://static.platzi.com/media/user_upload/Funko-navbar-grid-686b589c-b23c-4cd3-be25-aae261fb9748.jpg) * Uso de flexbox en un hijo del grid ![](https://static.platzi.com/media/user_upload/Funko-navbar-flexinterno-eff4d05a-6cd2-40b8-a680-c88b43d10b6e.jpg) * Uso de flexbox en la sección 1 del footer ![](https://static.platzi.com/media/user_upload/Funko-footer-sec1-flex-e9893353-838e-443c-b881-19a8bcaa150f.jpg) * Uso de grid en la sección 2 del footer ![](https://static.platzi.com/media/user_upload/Funko-footer-sec2-grid-71db0ea7-f55c-4752-811f-d3b74476723f.jpg) 📌Repo: <https://github.com/raulsr92/evaluacion3-ISIL-Funko_inspiration>

css

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


.grid {
    background-color: aquamarine;
    padding-bottom: 5px;
    padding-top: 5px;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
    "nav-logo nav-title nav-icons";
}

.nav-logo {
    grid-area: nav-logo;
    display: flex;
    margin-left: 12px;
}

.nav-title {
    grid-area: nav-title;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-icons {
    grid-area: nav-icons;
    display: flex;
    justify-content: space-between;
    margin-right: 12px;
}


.flex {
    background: rgb(170, 78, 170);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
}

.nav-logo1 {
    flex: 20%;
}

.nav-title1 {
    flex: 60%;
    text-align: center;
}

.nav-icons1 {
    flex: 20%;
    display: flex;
    justify-content: space-between;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>

<header>

    <h1>ESTO ES CON GRID</h1>

    <nav class="grid">

        <figure class="nav-logo">
            <img src="./img/menu-hamburguesa.png" alt="">
        </figure>

        <h1 class="nav-title">Title page</h1>

        <section class="nav-icons">
            <img src="./img/twitter.png" alt="">
            <img src="./img/tik-tok.png" alt="">
            <img src="./img/instagram.png" alt="">
        </section>

    </nav>

    <h1>ESTO ES CON FLEX</h1>

    <nav class="flex">

        <figure class="nav-logo1">
            <img src="./img/menu-hamburguesa.png" alt="">
        </figure>

        <h1 class="nav-title1">Title page</h1>

        <section class="nav-icons1">
            <img src="./img/twitter.png" alt="">
            <img src="./img/tik-tok.png" alt="">
            <img src="./img/instagram.png" alt="">
        </section>

    </nav>



</header>

    
</body>
</html>

se que todos mis compañeros ya respondieron pero yo también quiero hacerlo

  1. Utilizaría FLEBOX (display flex) Ya que se me hace una manera fácil de alinear los elementos solo tendría que el contenedor principal dividirlo en 2(y los alineamos a los costados), dentro de esos 2 contenedores en el caso del izquierdo agregar los dos elementos , separarlos y alinearlos verticalmente. Para el contenedor de la derecha simplemente separar con gap los elementos quedaría algo así:

HTML ⬇️

CSS ⬇️

  1. Flexbox
  2. CSS Grid

Me gusta mucho mas CSS GRID, porque con Areas podemos definirlo. en el caso del diseño responsive esta buenisimo poder acomodar los elementos y hacer una grilla para cada caso…

Teff y el papayawhip, por siempre.

flexbox en los 2

En el primero usaría flexbox y en el segundo grid

Exacto!! Mis dudas eran esas y siempre las fueron, el problema cuando elegir una u otra, y la verdad que parece que no, pero si tiene sentido, nos ayuda a organizar bien la información y sobre todo el porqué debemos pensar así, por la accesibilidad que nuestros elementos y componentes deben tener.

En mi caso usaria flexbox para elementos que necesiten alineamiento vertical-horizontal unicamente. El grid seria para darle fluides de espaciados y tamaños a los contenedores.

🤔

  1. Flexbox, es mas como para organizar, como cuando organizas vamos por aquí y platos por acá en la mesa… en Grid es como cuando vas a cortar una torta cuadrada, si la quieres cortar en partes o como un tablero de piezas cuadradas, pues aguanta usar Grid.

  2. Flexbox también, sin en sí pocos elementos, pero si ya hablamos de seccionar o dividir “parcelas” la mente va diciendo que es mejor Grid, usar lo mejor para vos más te facilita la tarea, insta al avance más eficiente y queremos aprender rápido, y como dice nike, just do it.

💡
Los invito a que chequen toda página que les llame la atención, aprieten ese F12 o el inspect e intenten leer lo que les llame la atención, es como en los libros, no es que no te guste leer, es que aun no has encontrado a tu escritor interesante.

Yo en ambos casos usaria Flexbox pero con Grid igual se podria

App bar top: flexbox
Dialogs: flexbox

Yo en ambos casos usaria Flexbox 😄

Hola comunidad!
En las maquetaciones que he realizado, tomando en cuenta lo que el profe De Granda sugirió en alguna de sus clases… Me gusta usar Grid para estructurar la página de manera mas general, ya sea, el header, boddy y el footer. Luego uso flex para los contenidos que hay dentro de cada sección. Eso si, tomando en cuenta que, si hay contenido de dos dimensiones en una caja, bueno, uso Grid.

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.