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 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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Alineamiento en el elemento contenedor + Quiz

19/28
Recursos

Aportes 168

Preguntas 15

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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;
}

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.

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.

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.

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; ❌
	
}

respuesta es la C

Estoy enamorado de la profesora

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 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!!!

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

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.

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;
}

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.

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



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.

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.

Por si tenían duda 😊

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.

Propiedades en el padre

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

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


Hola, les comparto la demostración:
.
.

  1. justify-content: space-around

.

  1. justify-content: space-between

.

  1. justify-content: space-evenly

Reto finalizado.
![](

Hola, les comparto el desarrollo del Quiz!
.
.

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

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;
}

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

💪🏻
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
😇.

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;

😃

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 clase esta subestimada !
No todo es codigo papus !
miss ❤️ !

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

TAREA 1:
HTML:

CSS:

RESULTADO:

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.

Content vs Items Simplificado


Propiedades -items

Alínea a los hijos dentro de sus propias celdas.


Propiedades -content

Alínea toda la grid, sus rows y/o sus columns siempre y cuando en el padre tengamos:

width > Suma de Grid-temp-columns
height > Suma de Grid-temp-rows

Esto quiere decir que si definimos grid-temp-columns con unidades en => fr <= la propiedad justify-content no funcionará.
Para que las propiedades -content funcionen tendríamos que tener algo así:

.container {
  background: papayawhip;
  display: grid;
  grid-template-columns: repeat(2, 50px);
  grid-template-rows: repeat(2, 50px);
  justify-content: space-evenly;
  align-content:space-between;
  width: 180px; // la suma de columns es de 100px
  height: 180px; // la suma de rows es de 100px
}

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

Para place content: Justify en este caso opera en el eje X (main axis) y align en el Y ,(cross axis). Y para usar css grid habría que utilizar el display: grid, jeje eso entiendo hasta ahora, y la verdad se ve muchísimo mas confiable para organizar la distribucion de la pagina que simplemente llenar todo de divs xD

<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="/style.css">
    <title>Document</title>
</head>
<body>
    <div class="grid-container">
            <div class="conteiner1">
                
                <div class="item1">

                </div>
                <div class="item2">
                    
                </div>
                <div class="item3">
                    
                </div>
                <div class="item4">
                    
                </div>
            

            </div>



            <div class="conteiner2"> </div>
            <div class="conteiner3"> </div>
            <div class="conteiner4"> </div>
    </div>
    
</body>
</html>
 

CSSS

<.grid-container{

display: grid;
grid-template: repeat(2,100px)/repeat(2,100px);
background-color: aqua;
gap: 5px;
width:500px;
justify-content: space-evenly;
    align-content: space-evenly;
height:500px;



}

.conteiner1{
  display: grid;
  grid-template: repeat(2,20px)/repeat(2,20px);
   background-color:blue;
   border-color: rgb(231, 15, 15);
  border:solid;
  justify-content: space-evenly;
  align-content: space-evenly;

}
.conteiner2{
  background-color:red;
  }
.conteiner3{
    background-color:yellowgreen;
    }
.conteiner4{
      background-color:green;
      
    
    }

  .item1{
background-color:rgb(189, 16, 16);



 }

 .item2{
  background-color:rgb(62, 199, 35);

  
  
   }

   .item3{
    background-color:rgb(233, 200, 53);
    
    order:1px solid;
    
    
     }
    
     .item4{
      background-color:rgb(111, 35, 199);
    
            
       }> 

Les recomiendo practicar, les aclarará la mente

Código:

<!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="./clase19.css">
</head>
<body>
    <div class="container">
        <div class="item item1"><p>Hola</p></div>
    </div>
</body>
</html>

Css:

.container{
    width: 800;
    height: 800px;
    display: grid;
    grid-template: repeat(4, 100px) / repeat(4, 100px);
    justify-content: start;
    align-content: end;
    justify-items: end;
    align-items: start;
}
.item1{
    background-color: pink;
    width: 75px;
    height: 75px;
    display: grid;
    grid-row: 2;
    grid-column: 3;
    justify-content: end;
    align-content: end;
}
.item1 p{
   margin: 0;
}


En el minuto 7:40 muestra este slide. Tiene un pequeño error. Los valores de place-content son align-content y justify-content.

respuesta del quiz es la c !

place-content: center

C respuesta

Al momento de trabajar con grid tenemos varias propiedades  que nos permiten ordenar en la pantalla nuestros elementos.


Hay 3 tipos de propiedades:

			Alineación del contenedor:  Estas propiedades  nos permitirán alinear la grilla dentro de su contenedor como un bloque, existen 3 propiedades que nos permiten hacer esto:
			
			
					® Justify-content: Alineara la grilla en el eje X (Horizontal) sus valores pueden ser:
					
									w Start: Alinea la grilla al principio del contenedor, o sea a la izquierda.
									
									w End: Alinea la grilla al final del contenedor, o sea a la derecha.
									
									w Center: Alinea la grilla al centro del contenedor.
									
									w Space-around: Alinea de la grilla de tal manera que el espacio entre las celdas y el borde del contenedor es la mitad que el espacio entre las celdas.
									
									w Space-between: Alinea la grilla de forma que en la primera y última columna están pegadas en el inicio y final del contenedor y separa el resto entre el espacio restante.
									
									w Space-evenly:   Alinea de la grilla de tal manera que el espacio entre las celdas y el borde del contenedor es igual que el espacio entre las celdas.
									
					® Aling-content: Alineara la grilla en el eje Y (Vertical) sus valores pueden ser:
					
									w Flex-Start: Alinea la grilla al principio del contenedor, o sea a la arriba.
									
									w Flex-End: Alinea la grilla al final del contenedor, o sea a la abajo.
									
									w Center: Alinea la grilla al centro del contenedor.
									
									w Space-around: Alinea de la grilla de tal manera que el espacio entre las celdas y el borde del contenedor es la mitad que el espacio entre las celdas.
									
									w Space-between: Alinea la grilla de forma que en la primera y última columna están pegadas en el inicio y final del contenedor y separa el resto entre el espacio restante.
									
									w Space-evenly:   Alinea de la grilla de tal manera que el espacio entre las celdas y el borde del contenedor es igual que el espacio entre las celdas.
									
					
					® Place-content:   es una combinación de los anteriores, es como si colocáramos ambas propiedades con un mismo valor, los valores posibles son los mismos antes mencionados. 
				
				
		Alineación de los items:  Estas propiedades nos permiten alinear nuestros elementos dentro de cada una de las celdas en la que se encuentra.
		
					® Justify-items: Alineara nuestros elementos dentro de la celda en el eje horizontal, sus valores son: 
									w Start:  Alineara nuestros elementos en la celda al principio del eje horizontal, es decir a la izquierda.
									
									w End: Alineara nuestros elementos en la celda al final del eje horizontal, es decir a la derecha.
									
									w Center: Centrara nuestros elementos en relaciona a la celda.
									
									w Stretch:  Los elementos ocuparan todo el eje horizontal.
									
					® Aling-items:  Alineara nuestros elementos dentro de la celda en el eje vertical, sus valores son: 
									w Start:  Alineara nuestros elementos en la celda al principio del eje vertical, es decir a la arriba.
									
									w End: Alineara nuestros elementos en la celda al final del eje vertical, es decir a la abajo.
									
									w Center: Centrara nuestros elementos en relaciona a la celda.
									
									w Stretch:  Los elementos ocuparan todo el eje vertical.
									
					® Place-items:   es una combinación de los anteriores, es como si colocáramos ambas propiedades con un mismo valor, los valores posibles son los mismos antes mencionados. 
				
				
		Alineación de un ítem:  En caso de que necesitemos alinear un solo ítem tenemos propiedades que nos permiten esto, es importante recalcar que estas propiedades se le escriben en el elemento que queramos alinear de manera exclusiva, se usan las mismas propiedades vistas anteriormente en la propiedad:
		
					®  Aling-self
					®  justify-self 

place-self

hola!

Quiz:
La respuesta es la C.

Tarea #2:

HTML

<body>
    <h2>align space-around </h2>
    <div class="container spaceAround">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>        
    <h2>align space-between </h2>
    <div class="container spaceBetween">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>        
    <h2>align space-evenly </h2>
    <div class="container spaceEvenly">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>        
</body>

CSS

.container{
    display: grid;
    grid-template: 100px 100px / 100px 100px;
    gap: 10px;
    width: 300px;
    height: 300px;
    background-color: papayawhip;
    border: 2px solid orangered;
}

.spaceAround{
    align-content: space-around;
}

.spaceBetween{
    align-content: space-between;
}

.spaceEvenly{
    align-content: space-evenly;
}

.item{
    width: 100px;
    height: 100px;
    background-color: orange;
}

Tarea #1:

HTML

<body>
    <h2>justify space-around </h2>
    <div class="container spaceAround">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>        
    <h2>justify space-between </h2>
    <div class="container spaceBetween">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>        
    <h2>justify space-evenly </h2>
    <div class="container spaceEvenly">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>        
</body>

CSS

.container{
    display: grid;
    grid-template: 100px 100px / 100px 100px;
    gap: 10px;
    width: 300px;
    height: 300px;
    background-color: papayawhip;
    border: 2px solid orangered;
}

.spaceAround{
    justify-content: space-around;
}

.spaceBetween{
    justify-content: space-between;
}

.spaceEvenly{
    justify-content: space-evenly;
}

.item{
    width: 100px;
    height: 100px;
    background-color: orange;
}

la respuesta es la C.

Respuesta del quiz:

C.

La respuesta correcta es la C:

display: grid;
place-items: center;

C

La respuesta al quiz es la C. place-ítems: center.

esta es la respuesta al utlimo quiz

  display: grid;
  place-items: center;

Respuesta C

Respuesta quiz = C
css:
.grid-conteiner{
border: 4px dotted turquoise;
display: grid;
justify-content:space-around;
width: 200px;
height: 200px;
}

.container{
background: palevioletred;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
width: 100px;
height: 100px;
}

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

.grid-conteiner2{
border: 4px dotted turquoise;
display: grid;
justify-content:space-between;
width: 200px;
height: 200px;
}

.container2{
background: palevioletred;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
width: 100px;
height: 100px;
}

.item2{
background: peru;
border: 4px solid hotpink;
}

.grid-conteiner3{
border: 4px dotted turquoise;
display: grid;
justify-content:space-evenly;
width: 200px;
height: 200px;
}

.container3{
background: palevioletred;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
width: 100px;
height: 100px;
}

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

.grid-conteiner4{
border: 4px dotted turquoise;
display: grid;
align-content:space-around;
width: 200px;
height: 200px;
}

.container4{
background: palevioletred;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
width: 100px;
height: 100px;
}

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

.grid-conteiner5{
border: 4px dotted turquoise;
display: grid;
align-content:space-between;
width: 200px;
height: 200px;
}
.container5{
background: palevioletred;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
width: 100px;
height: 100px;
}
.item{
background: peru;
border: 4px solid hotpink;
}

.grid-conteiner6{
border: 4px dotted turquoise;
display: grid;
align-content:space-evenly;
width: 200px;
height: 200px;
}
.container6{
background: palevioletred;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
width: 100px;
height: 100px;
}
.item{
background: peru;
border: 4px solid hotpink;
}

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="./style.css">
</head>
<body>
<div class=“grid-conteiner”>
<div class=“container”>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
</div>
<h5>j-c:space around</h5>
</div>
<div class=“grid-conteiner2”>
<div class=“container2”>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
</div>
<h5>j-c:space between</h5>
</div>
<div class=“grid-conteiner3”>
<div class=“container3”>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
</div>
<h5>j-c:space evenly</h5>
</div>
<div class=“grid-conteiner4”>
<div class=“container4”>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
</div>
</div>
<div class=“grid-conteiner5”>
<div class=“container5”>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
</div>
</div>
<div class=“grid-conteiner6”>
<div class=“container6”>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
</div>
</div>
</body>
</html>

Respuesta del quiz: C.

align-content: space-evenly;

align-content: space-between;

align-content: space-around;

justify-content: space-evenly;

justify-content: space-between;

justify-content: space-around;

<section>
        <p>Quiz</p>
        <div class="container__quiz">
            <div class="container__quiz__item"></div>
        </div>
    </section>

css

.container__quiz{
    width: 400px;
    height: 400px;
    display: grid;
    place-items: center;
    background-color: pink;
}
.container__quiz__item{
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: hotpink;
}

diferencias:

La respuesta del quiz es la letra C

Tarea 2:
![](

La tarea:
![](

quiz:

la respuesta es la C:

La respuesta al quiz es la C.

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

La respuesta de la Quiz es la C
Aquí les traigo como se vería si se hubiese usado place-content, a simple vista no había mucha diferencia, así que puse dos ítems para que se note más.

space-around es el de arriba, el de abajo es space-evenly

Tarea1:
Cambiando los valores del grid-container
Resultado de: space-around y space-evenly:


space-between:

La respuesta es la C, puesto que en la A se centra en inline ósea horizontalmente y en la B se centra en block sea verticalmente. La C junta las dos propiedades de la A y la C y como las dos serán center con que lo coloques una vez center basta para que se aplique en inline y block