Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

驴De d贸nde venimos y en d贸nde estamos?

2

驴C贸mo fue pensado CSS cuando se cre贸?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

驴C贸mo se lleg贸 al concepto de CSS Grid?

5

驴CSS Grid es una idea nueva? La evoluci贸n de la especificaci贸n

6

驴Qu茅 significa Grid para CSS?

Control de alineamiento

7

T茅cnicas de alineamiento antes de CSS Grid: margin y line-height

8

T茅cnicas de alineamiento antes de CSS Grid: table-cell y positions

9

T茅cnicas de alineamiento antes de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades f铆sicas y l贸gicas en CSS + Quiz

12

T茅cnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Qu铆z

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

隆Iniciemos nuestro proyecto! Fase de creatividad e identificaci贸n de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: 驴display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generaci贸n autom谩tica de tracks + Qu铆z

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

隆Manos al c贸digo! Fase de construcci贸n de la grid principal de nuestro proyecto

23

Ubicaci贸n + Reto

24

Alineamiento en los elementos hijos + Quiz

25

隆Manos al c贸digo! Fase de ubicaci贸n y alineamiento

26

Continuando con la fase de ubicaci贸n y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Contin煤a con el Curso de Dise帽o Web con CSS Grid y Flexbox

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
2H
39M
56S

Alineamiento en el elemento contenedor + Quiz

19/28
Recursos

Aportes 204

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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
<h4>justify-items</h4>
.container{
		justify-items: start | end | center | stretch;
}
<h4>align-items</h4>
.container{
	align-items: start | end | center | stretch;
}
<h4>place-items</h4>
  • Es el shorthand para los dos anteriores
.container{
	align-items: <alig-items> / <justify-items>;
}
<h4>justify-content</h4>
.container{
		/* Parte 1 */
		justify-content: start | end | center | stretch;
		/* Parte 2 */
		justify-content: space-around | space-between | space-evenly;
}
<h4>Align-content</h4>
.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 鈥渆quivoca鈥 o no le sale y lo arregla en 鈥渧ivo鈥. Volv铆 a platzi para volver a mirar ciertas partes de los cursor del 鈥渆x-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 鈥渟e 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

.

<h5>*-content:</h5>

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

.

<h5>*-items:</h5>

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 鈥溍眔鈥 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 鈥済rid 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 鈥渕ain鈥). 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鈥γ硈ea que 猬囷笍,as铆 como este rayo

En cambio cuando usamos justify(justificamos)鈥γ硈ea 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 鈥減lace-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

鈥淪pace 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.

鈥淪pace 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.

鈥淪pace 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.