Alineamiento en el elemento contenedor + Quiz

Aquí les dejo el ejemplo con space-arund, donde básicamente, el contenedor se divide en dos, y centra cada track en esos espacios divididos:
.

.
Para el space-between básicamente se jala ambos hacia los extremos:
.

.
Y para el space-evenly es como que el espacio está repartido más equitativamente 😄:
.

No entiendo porque no hace live-code para demostrar lo que esta enseñando… Hasta éste punto llevamos mas de la mitad del curso y muy poco código. Esta nueva versión de css grid no me gusta!!

CERO código en pantalla y solo pantallazos que uno puede encontrar en Google. Bastante regular este curso deberían mejorarlo.

![](

![](

En el minuto 7:41, cuando se explica place-content, hay un pequeñito error, debe ser;

.container {
	place-content: <align-content> / <justify-content>;
}

Para no confundirnos.
Documentación: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content

↘️ Alineamiento en el elemento contenedor

• Alineamiento ⇒ en donde quiero que estén los elementos de mi grid
• Podemos alinear todos los contenedores a una dirección
• Tenemos dos Grupos para ordenar por parte del contenedor
  • Items
    • justify-items
    • align-items
    • place-items
  • Content
    • justify-content
    • align-content
    • place-content
• Propiedades en común:
  • Justify ⇒ Alineación por dentro de la grid
    • Inline axis (row axis)
    • De izquierda a derecha
      • start
      • end
  • Align ⇒ Alinear la Grid en su contenedor
    • block axis (column axis)
    • De arriba hacia abajo
      • start
      • end

.container{
		justify-items: start | end | center | stretch;
}

.container{
	align-items: start | end | center | stretch;
}

• Es el shorthand para los dos anteriores

.container{
	align-items: <alig-items> / <justify-items>;
}

.container{
		/* Parte 1 */
		justify-content: start | end | center | stretch;
		/* Parte 2 */
		justify-content: space-around | space-between | space-evenly;
}

.container{
		/* Parte 1 */
		align-content: start | end | center | stretch;
		/* Parte 2 */
		align-content: space-around | space-between | space-evenly;
}

No quiero soltar hate pero me parece que es importante recibir un material de calidad por el dinero que estoy pagando.

El año pasado hice este mismo curso con el profesor Leonidas Esteban y la verdad que la diferencia es bastante notable. De hecho, estoy tomando este curso para reforzar conocimientos y, por más irónico que parezca, terminé confundido.

Me parece que muchas de las dudas que muchos tenemos se solucionarían si Estefany hiciera el código mientras hace las explicaciones.

Muy mejorable este curso.

Al parecer le exigieron hacer el curso en un corto plazo. Puro pantallazo y cosas ya pre-hechas. Nada como un curso en donde el profesor se “equivoca” o no le sale y lo arregla en “vivo”. Volví a platzi para volver a mirar ciertas partes de los cursor del “ex-profesor” y me encontré con la sorpresa. En fin, por ahora los perjudicados somos los alumnos.

respuesta es la C

jajaja parece libro de matemáticas “se deja como ejercicio al lector” para eso mejor me compro un libro de Mcgraw hill y dejo de pagar platzi jajajaja me sale mas barato.

Estuve probando place-content y place-items y observe que no funciona con el /, revise la documentación y efectivamente no se usa, quizas sea un typo del video o sea un feature nuevo, pero es bueno tenerlo en cuenta para evitarnos dolores de cabeza 😉.

.container {
	 place-content: center center; ✔
	 place-content: center / center; ❌
	 place-items: center center; ✔
	 place-items: center / center; ❌
	
}

Estoy enamorado de la profesora

no puedo creer que esta chica de un curso tan importante, lo da MUY MAL, en mi experiencia no me sirvio, pura teoria y NADA de practica, muy lindos los dibujitos pero necesitamos practicar!!!

Veo que al igual que yo, hay personas que estan confundidos con las propiedades *-content vs *-items.
.
La profe en su ejemplo utiliza dos elementos, uno padre y uno hijo (interno en el padre), en el elemento padre es donde emplea las propiedades *-content y en el hijo las propiedades *-items esto aunque con intencion de que fuese mas facil y practico de entender a mi me resulto realmente mas complicado, ya que llegue a pensar que una propiedad se utilizaba con el elemento padre y otra con el elemento hijo pero no.
.
Se pueden utilizar estas propiedades siempre que el elemento padre posea la propiedad display:grid; .
.

*-content vs *-items

.

Al momento de establecer la propiedad display:grid; en un elemento, dentro de este se genera un contenedor invisible que seria nuestra grilla (grid), las propiedades *-content se utilizan justamente para alinear esta grilla dentro del elemento. Ejemplo:
.

.
desde las devtools de chrome podemos ver claramente como se esta creando nuestra grilla, ya que no hay ningun hijo dentro vemos que la grilla esta totalmente vacia, por ahora nos funcionara para ver de manera mas grafica como se alinea la grilla:
.

.
ahora si podemos ver graficamente como nuestra grilla utilizando las propiedades justify-content y align-content se alinea al centro del centro.
.
Punto importante:
.

Si definimos las columnas y filas de nuestra grilla (grid-template) y su tamaño es igual o mayor al de el contenedor, las propiedades *-content realmente no tendran ningun efecto visible

.
grilla del mismo tamaño al contenedor

.
grilla de tamaño menor al contenedor

.

Como bien lo dice la propiedad esta se refiere a los items o hijos dentro del contenedor que se iran ajustando a la grilla anteriormente creada, cabe destacar que asi como pasa cuando la grilla tiene el mismo tamaño del padre y las propiedades *-content no tienen ningun efecto visible, las propiedades *-items no tendran ningun efecto visible si el item es igual o mayor a la grilla que lo contenga
.

.

No es hate pero un video mostrando código vale mucho mas que las imágenes y la teoría, como hacía el profesor Diego De Granda.

La verdad a mi el curso me gusta bastante ella maneja muy bien el tema, leyendo los comentarios de que falta practica pues Parce practiquen hay estan los conceptos ademas la idea de este curso pienso que es contestar dudas que surgieron practicando cursos pasados.

Les dejo el código para que puedan hacer la tarea:
Reemplacen los valores en .container

.grid-container {
  border: 4px dotted turquoise;
  display: grid;
  place-content: center;
  width: 200px;
  height: 200px;
}

.container {
  background: papayawhip;
  display: grid;
  grid-template-columns: repeat(2, 60px);
  grid-template-rows: repeat(2, 60px);
  width: 180px;
  height: 180px;
  justify-content: space-between;
  align-content: space-around;
}

.item {
  background: papayawhip;
  border: 4px solid hotpink;
}

El resultado

Estaba bastante perdido con el tema de justify-content vs justify-align esto me puso bastante en onda

Este curso hasta cierto punto llega a ser aburrido y repetitivo, no he visto una sola línea de código escrita por la persona que está impartiendo el curso, por este curso me inscribí a platzi y ya me estoy arrepintiendo 😦

ya van casi 20 videos nada de ejercicos practicos, siento que pierdo el tiempo con esta clase.

Aún me cuesta un poco de trabajo entender estos conceptos. Aquí mi ejercicio:
space-around
![](

space-between
![](

space-evenly
![](

<div class="container-principal">
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <div class="container2">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <div class="container3">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>  
.item {
  width: 100px;
  height: 100px;
  background: #ed2860;  
}

body {
  margin: 0px;
}

.container-principal {
  display: grid;
  grid-template-columns: 110px 110px 110px;
  justify-content: space-around;    
}

.container {  
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 5px;
  justify-content: space-around;      
  border: 5px solid #f6c09c ; 
  width: 500px;
}

.container2 {  
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 5px;
  justify-content: space-between;      
  border: 5px solid #f6c09c ; 
  width: 500px;
}

.container3 {  
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  gap: 5px;
  justify-content: space-evenly;      
  border: 5px solid #f6c09c ; 
  width: 500px;
}

Por si tenían duda 😊

Propiedades en el padre

Oigan, el curso es profesional, el siguiente es practico. ¿Porque las quejas? Si este claramente no dice practico.

Este “ño” es lo mejor que he visto en Platzi, soy fan 💚
.

Content
Cuando el contenedor del grid es más grande que la grid, podemos alinear la utilizando las propiedades justify-content y align-content

items
justify-items y align-items nos permiten alinear los elementos que están dentro de la grid.

Un humilde aporte: creo que este curso es demasiado lento. Considero que tendría que haber más demostración del codigo, ya que lo visto hasta ahora, lo consigo buscando “grid en css” en google. Estoy entendiendo poco y nada lo que es grid y como manejarlo, además de no entender al final que tipo de proyecto busca la profe que hagamos (ya sea un proyecto con un html semántico, o un proyecto con solo un hipotetico “main”). Pequeño aporte para mejorar la experiencia de usuario.

💪🏻
align y justify
💪🏻
👀Explicación super grafica👀

Cuando usamos la propiedad align, nuestros items o padres se moverán de manera vertical…ósea que ⬇️,así como este rayo

En cambio cuando usamos justify(justificamos)…ósea que se ira para ➜⇢➤ así como el mishi

PD: espero te allá servido futuro > frontend
😇.

HTML

<div class="container">
  <div class="item"></div>
</div>

CSS

.container{
  display: grid;
  place-items: center;
  grid-template: 1/1;
  width: 200px;
  height: 200px;
  background: #FDE5E5;
}

.item{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #F373AF;
}

Se me hizo muy complicado entenderle a la profesora, deberían rehacer esta clase ya que este tema desde siempre es muy confuso para algunos.
así que busqué en internet y yo mismo hice un diseño que ayuda a explicarlo.
Solo cambién los justify y align content e items de la clase container e inspeccionen con el elemento para ver la grid

HTML:

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="grid-contain">
        <div class="container">
            <div class="items item1"></div>
            <div class="items item2"></div>
            <div class="items item3"></div>
            <div class="items item4"></div>
        </div>
    </div>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
}

.grid-contain {
    width:70vw;
    height:70vh;
    display: grid
    ;
    background-color: rosybrown;
    justify-content: center;
    align-content: center;
}

.container {
    background: papayawhip;
    display: grid;
    grid-template-columns: 80px 80px;
    grid-template-rows: 70px 70px;
    width:200px;
    height:150px;
    justify-items: start;
    align-items: center;
    justify-content: center;
    align-content: center;
}
    
.items {
    background-color: peru;
    border: 4px solid black;
    width:50px;
    height:50px
}

• Me parece que falto especificar que place content funciona solo para hijos grid de un grid container.
• Si los hijos de un grid container no son sub grids, usar place-items en vez de place content.

A mas de dos años del lanzamiento de este curso, creo que estan en un muy buen momento para volver a grabarlo. Es casi nulo el codigo que se ve, puras diapositivas y poco didactico, a mi parecer.
Se aprende mejor haciendo, obvio que lo podemos hacer por nuestra cuenta e ir probando cada concepto que se va mencionando, pero si se explicaria con codigo y mostrando los cambios considero que el tiempo invertido seria mucho mas provechoso para los estudiantes

Con la mejor de las vibras comento que no me ha agradado el comentario hasta el momento, el curso de grid básico está mucho más corto y mejor formulado que este, nada costaba hacer el live code con un layout genérico de ejemplo.

Estoy de acuerdo con que se debe revisar la teoría para comprender cada tema pero sería bueno que a la vez la profe vaya haciendo el paso a paso de manera práctica porque el estudiante necesita ir despejando dudas. Me parece que le faltó explicar el uso de place-content y place-items porque no mencionó que estas dos propiedades aceptan valores duales y que primero el valor es align-items (block) seguido del valor justify-items (inline). Además no funciona con el / como se muestra en la diapositiva. Para futuras actualizaciones del curso esto se debe considerar 50/50 teoría y práctica.

Hola, les comparto el desarrollo del Quiz!
.
.

La clase esta subestimada !
No todo es codigo papus !
miss ❤️ !

cheat sheet muy útil:
https://grid.malven.co/

Respuesta: C

Una parte de la tarea

html

<body>
    <div class="space-around">
        <div class="container1">
            <div class="test"></div>
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
    </div>
    <div class="space-between">
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
    </div>
    <div class="space-evenly">
        <div class="container1">
            <div class="test"></div>
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
        <div class="container1">
        </div>
    </div>
</body>

css

.space-between,
.space-evenly,
.space-around {
    display: grid;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
    grid-template: repeat(3, 150px) / repeat(3, 150px);
    gap: 10px 10px;
    width: 70%;
    margin: 0 auto;
}

.space-around {
    justify-content: space-around;
    background: aqua;
}


.space-between {
    justify-content: space-between;
    background: pink;
}

.space-evenly {
    justify-content: space-evenly;
    background: purple;
}

.container1 {
    background: rgb(72, 131, 72);
    width: 100px;
    height: 100px;

}

Tuve que ir a youtube a aclarar dudas, de hecho estaba super frustrado porque no lograba entender lo que la profesora explicaba y los desafíos que hacía, hasta pensé que tendría que estudiar todo de nuevo porque dudé de los conocimientos adquiridos del curso de HTML Y CSS Definitivo.

…-content:

TAREA 1:
HTML:

CSS:

RESULTADO:

Experimentando y buscando en la documentación:

Cuando ocupamos

place-items

en un container que esté estilizado con

display: flex

css ignorará el bloque asignado a justify-items y solo aplicará los estilos de la posición asignada align-items

Hola, les comparto la demostración:
.
.

1. justify-content: space-around
   
   

.

1. justify-content: space-between
   
   

.

1. justify-content: space-evenly
   
   

Reto finalizado.
![](

Seria muy importante que la profesora hiciera un ejercicio de muestra, así sea sencillo entender esto, pues en la forma como se hacía se desplegó varios ejemplos y para mí es más importante este nuevo tema que uno que ya está en camino de deprecated.

html:

<body>
 <section>
  <div class="grid-container">
    
    <div class="container">
    
      <div class="items"></div>
      <div class="items"></div>
      <div class="items"></div>
      <div class="items"></div>
      
    </div>
        
  </div>
  </section>
</body>

Space - between:
*{
margin:0;
padding:0;
}
.grid-container{
display:grid;
width:800px;
height:400px;
border:4px dotted blue;
background-color:papayawhip;
justify-content:space- between;
}

.container{
display:grid;
grid-template: repeat(2,100px) /repeat(2,100px);
width:400px;
height:200px;
background:pink;
justify-content:space-between;
}
.items{
border:4px solid #4d3ba2;
background:pink;
}
![](

Space - around:

*{
margin:0;
padding:0;
}
.grid-container{
display:grid;
width:800px;
height:400px;
border:4px dotted blue;
background-color:papayawhip;
justify-content:space-around;
}

.container{
display:grid;
grid-template: repeat(2,100px) /repeat(2,100px);
width:400px;
height:200px;
background:pink;
justify-content:space-around;
}
.items{
border:4px solid #4d3ba2;
background:pink;
}
![](

Space - evenly:

*{
margin:0;
padding:0;
}
.grid-container{
display:grid;
width:800px;
height:400px;
border:4px dotted blue;
background-color:papayawhip;
justify-content:space-evenly;
}

.container{
display:grid;
grid-template: repeat(2,100px) /repeat(2,100px);
width:400px;
height:200px;
background:pink;
justify-content:space-evenly;
}
.items{
border:4px solid #4d3ba2;
background:pink;
}
![](

La respuesta al quiz

display: grid;
place-items: center;
<code> 

space-around

space-between

space-evenly

Para los que aún no entienden la diferencia entre space-around y space-evenly:

fuente: https://www.samanthaming.com/flexbox30/14-space-around-vs-space-evenly/

justify-content

align-content

La respuesta es la C.
Ya que con las primeras solo se esta alineando en linea y en la segunda en Bloque.
Mientras que en la C se hace uso de la propiedad place-item que como vimos podemos definir tanto la dimensión en linea y en bloque.

hola, quisiera compartir un dato para los que como yo aun tienen dudas o confusiones.

Primero le decimos al padre que sea display grid y después que cree una malla (grilla) con X columnas y X filas hasta ahí todo bien.

Después usamos justify o align para modificar la dirección ya sea en filas o en columnas

Ahora cuando nos referimos a content lo que haremos es mover la grilla

Cuando nos referimos a items, no movemos la grilla si no movemos lo que esta dentro de esa grilla.

Dejo acá mi código par a que ustedes jueguen con la linea de código 21 22 o si no la encuentran esta arriba del comentario /* valor a cambiar */ usen y guíense de la herramienta chrome

HTML

<!DOCTYPE html>
<html lang="es">
<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">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="container">
    <div class="container-2">
      <div class="color-1">color 1</div>
      <div class="color-2">color 2</div>
      <div class="color-3">color 3</div>
      <div class="color-4">color 4</div>
    </div>
    <div class="container-2">
      <div class="color-1">color 1</div>
      <div class="color-2">color 2</div>
      <div class="color-3">color 3</div>
      <div class="color-4">color 4</div>
    </div>
  </div>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
.color-1, 
.color-2, 
.color-3, 
.color-4 {
  border: 4px solid black;
}
.container {
  display: grid;
  border: 8px dotted black;
  width: 500px;
  height: 500px;
  grid: 200px 200px / 300px;
  justify-items: start;
  justify-content: start;
   /* valor a cambiar */
}
.container-2 {
  display: grid;
  border: 8px solid olive;
  grid: repeat(2, 1fr) / repeat(2, 70px);
}
.color-1 {
  background-color: rebeccapurple;
  color: white;
  font-size: 2rem;
  
}
.color-2 {
  background-color: blue;
  color: white;
  font-size: 2rem;
  
}
.color-3 {
  background-color: rgb(255, 6, 130);
  color: white;
  font-size: 2rem;
  
}
.color-4 {
  background-color: brown;
  color: white;
  font-size: 2rem;
}

para el Quiz es la opción C jejejejeje XD

.container{
/* Para Alinear contenedors */
/* 1 :
        justify-items => Horizontal
        align-items   => Vertical
        place-items   => Metodo Corto
*/

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <align-item> / <justify-items>;

/* 2 :
        justify-content
        align-content
        place-content
*/
justify-content: start | end | center | stretch;
justify-content: space-around | space-between | space-evenly;
align-content: start | end | center | stretch; 
aling-content: space-around | space-between | space-evenly;
place-items: <alingn-item> / <justify-items>;
}

La respuesta al Quiz es la C :v

    display:grid;
    place-items: center;

/*Tambien funciona asi*/

	display:grid;
    place-content: center;

😃

💡🟢 Esta es mi respuesta al Quiz
Como pueden observar en el código, la respuesta es la opción C, puesto que “place-items” nos permite alinear los elementos hijos de manera horizontal y vertical a la vez.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      background-color: aquamarine;
      display: grid;
      place-items: center;
    }
    .item {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: dodgerblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item"></div>
  </div>
</body>
</html>

En el navegador se ve así:

Los ultimos cursos que tome con esta profesora fueron una MUY mala experiencia… lleva 20 clases haciendo una ensalada de conceptos para propiedades basicas que pueden ser explicadas en muchisimo menos tiempo.
Menos teoria y mas codigo por favor

La respuesta es la

• C

Reto terminado

Unos ejemplos del uso de las propiedades justify y align con respecto a su grilla o content y a los elementos o items

para alineacion de la grilla

<justify-content> 
<align-content> 
<place-content> 

para alineacion de todos los items en general dentro de la grilla

<justify-items> 
<align-items> 
<place-items> 

Ejemplo conciso

Esta profesora solo habla mucho, practica poco y plantea demasiado restos… queremos ver > como
se hace

me llamaran loco pero yo venia quejandome anteriormente de algunos cursos que daba y dejaba cosas a medio entender… pero en este curso me quito el sombrero que no tengo para felicitarle por este, ya que absolutamente todas mis dudas e inquietudes han venido siendo respondidas por este, desde los cuatro metodos de posicionamiento, el tema de posicion absolute y relativa, el modelo logico, los tracks, areas, el inline-grid/flex, y las propiedades de flex y grid. Hasta ahora he practicado mucho todos estos conceptos, tanto que un video de estos me dan como para practicar entre 30 a 40 minutos. Excelente y gracias.

C

Justify es en el eje X / Align es en el eje Y

😄

Sin alinear:

space-between:

space-around:

space-evenly:

Html:

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="justifycontent.css">
</head>
<body>
    <main>
        <div class="container">
            <div class="items1"></div>
            <div class="items2"></div>
        </div>
    </main>
</body>
</html>

CSS:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
main{
    display: grid;
    width: 80%;
    height: 80vh;
    border: 10px solid orangered;
}
.container{
    display: grid;
    grid-template: repeat(2, 200px) / repeat(2, 200px);
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    justify-content: space-evenly;
}
.items1{
    grid-area: 1/1/3/2;
    background-color: aqua;
    border: 1px solid #333;
}
.items2{
    grid-area: 1/2/3/3;
    background-color: rgb(14, 61, 150);
    border: 1px solid #333;
}

C

“Space between” en un Grid Layout significa que el espacio se distribuye uniformemente entre todos los elementos del grid, dejando un espacio vacío entre ellos.

“Space around” significa que el espacio se distribuye de manera uniforme alrededor de cada elemento en el grid, proporcionando una cantidad igual de espacio tanto a la izquierda como a la derecha de cada elemento.

“Space evenly” significa que el espacio se distribuye de manera uniforme entre todos los elementos y en los bordes del grid, proporcionando una cantidad igual de espacio entre elementos y alrededor del grid en sí.
En esta imagen se puede ver a lo que hace referencia lo anteriormente dicho

La respuesta es la número C

Quiz:

place-content: center

Tarea # 2:

space-around

space-between

space-evenly

Tarea 1:

space-around:

space-between:

space-evenly:

Aquí mi resultado de la tarea.

La respuesta es la C

El problem principal esta en que el codigo que dejan de ejemplo para el ejercicio no es el que en realidad se necesita por qu epara poder acomodar los elementos con justify solo necesitamos un contendor con una grilla

Resopuesta: C

La respuesta al quiz es la C

Reto superado 😁😁

Tarea realizada 💚
space-evenly

space-around

space-between

Estuve realizando la practica y el código mientras pasaba la clase, espero que les pueda ser de ayuda.

HTML

<!DOCTYPE html>
<html lang="es">
<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="style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </main>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <footer>
        <div></div>
    </footer>
</body>
</html>

CSS

/*
    1. Posicionamiento
    2. Modelo de caja
    3. Tipografia
    4. Visuales
    5. Otros
*/

html{
    font-size: 62.2%;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-size: 1.5rem;
}

main{
    display: grid;
    grid-template: repeat(5,50px) / repeat(5,50px);
    gap: 5px 5px;
    width: 100%;
    height: 300px;
    margin-block-start: 10px;
    /* justify-content: space-between;
    justify-content: space-around; */
    justify-content: space-evenly;
    border: 1px solid black;
}
main div {
    background-color: #5858ef;
}
section{
    display: grid;
    grid-template: repeat(5,50px) / repeat(5,50px);
    gap: 5px 5px;
    width: 100%;
    height: 500px;
    margin-block-start: 10px;
    /* align-content: space-between; */
    /* align-content: space-around; */
    align-content: space-evenly;
    border: 1px solid black;
}
section div {
    background-color: #f04545;
}
footer{
    display: grid;
    width: 300px;
    height: 300px;
    margin-block-start: 10px;
    place-items: center;
    border: 1px solid black;
    background-color: #df93ed;
}
footer div {
    width: 25px;
    height: 25px;
    background-color: #33e0f0;
    border-radius: 50%;
}

En el Quizz es la respuesta A, hermana de la C.

Es la C. Soy UI Designer pero quiero aprender como se comporta lo que hago en Figma en CSS GRID.

la Respuesta del Quiz es la C.

Resumen de la clase 😉 :

B R U H . . .

C:
display: grid;
place-items: center ;

el ejercicio es la respuesta c.
display: grid;
place-items: center;

La respuesta al quiz es C.

El codigo mostrado en imagen C es el short hand para el codigo mostrado en imagenes A y B.

estuvo un poco enredada la clase

Resultado :

CSS

.container{
            display: grid;
            place-items: center;
            background-color: pink;
            height: 200px;
            width: 200px;
        }
        .elemento{
            border-radius: 50%;
            height: 80px;
            width: 80px;
            background-color: blanchedalmond;
        }

HTML:

<div class="container">
        <div class="elemento"></div>
    </div>

Hay un pequeño error en el código de la profesora a la hora de probar justify-content y align-content.

En las propiedades del div container el valor de las columnas y filas debe ser una medida absoluta y menor que la mitad del contenedor para que los efectos del justify-content y align-content se puedan notar:

.container {
background: papayawhip;
display: grid;
grid-template-columns: repeat(2, 50px);
grid-template-rows: repeat(2, 50px);
width: 150px;
height: 150px;
}

En mi caso particular agrandé container a 150px y en grid-container le coloqué la propiedad place-items: center para que quede más bonito. 😃

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

Siento que me perdí en la explicación de los space

Done!

Es todo muy confuso, y son solo propiedades no tiene logica algoritmica ni nada muy dificil, lo digo sin ofender, son temas sencillos que necesitan conceptos sencillos y cortos, esto es una re ensalada de conceptos!!!

Respuesta Quiz:

C.
Para hacerlo con display grid, debemos asignar la propiedad grid, y luego los elementos hijos se orientaran de manera block-grid por herencia de grid.
y la propiedad place-items: center; centrará el elemento.

Realice la representacion visual de los ejercicios space-around, space-betweeny space evenly.
y tanto space-evenly como space-around se orientaron hacia el centro del contenedor principal.

Pero space-between se oriento hacia el start.

Lo cual da un pequeño vistazo de que y como se puede aplicar, sin embargo recomiendo que se haga con mas elementos para asi apreciar la diferencia de space-between.