Propiedades de alineación

Propiedades para la alineación de los items (elementos):

Justify-items
Align-items
Place-items

Propiedades para la alineación del container(El Contenedor):

Justify-content
Align-content
Place-content

Propiedades para la alineación de un solo item individual

Justify-self
Align-self
Place-self

Luis Fernando León Esqueda

Viendo los comentarios, creo que me compliqué demás.

<!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-container">
            <div class="item"><span></span></div>
            <div class="item"><span></span></div>
            <div class="item"><span></span></div>
            <div class="item"><span></span></div>
            <div class="item-center"></div>
        </div>
</html>

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid-container{
    display: grid;
    width: 449px;
    height: 449px;
    grid-template-columns: 200px 200px;
    grid-template-rows: 200px 200px;
    gap: 50px;
    place-content: center;
    background-color: #3a630d;
    
}
.item{
    background-color: #add901;
    display: grid;
    place-items: end;
}
.item span{
    display: block;
    height: 90px;
    width: 60px;
    background-color: #61a81e;
}
.item-center{
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    height: 50px;
    width: 50px;
    background-color: #1f3207;
}

Rocio Quigua López

John Alexander Rios Mora

Propiedades básicas de Grid:
• Display Grid
• Grid-template
• Gaps
• Grid-Auto

display: grid;
grid-template-rows: 100px 100px 100px ; /filas 3/
grid-auto-columns: 100px; /tamaño columnas/
grid-auto-flow: column; /ordenado en columnas/
/row-gap: 15px;/
gap: 20px;

Propiedades de alineación de los ítems
Justify-items: Alineación de manera horizontal en el espacio que haya
Align-items: Alineación vertical
Place items: Mezcla de las 2 Justify y Align
Valores:
start | end | center | stretch;

Propiedades de alineación del contenedor
Justify-content: Alineación de manera horizontal en el espacio que haya
Align-content: Alineación vertical
Place-content: Mezcla de las 2 Justify y Align
Valores:
start | end | center | stretch |space-around | space-between |space-evenly;
Propiedades de alineación del ítem
Justify-self: Alineación de manera horizontal en el espacio que haya
Align- self: Alineación vertical
Place- self: Mezcla de las 2 Justify y Align
Valores:
start | end | center | stretch;

Luis Fernando Valladares Castro

`align-content` | `justify-content`

.
Especifica la alineación vertical (align-content) / horizontal (justify-content) de los elementos dentro de una flexbox o una cuadrícula.

align-content: flex-start;
justify-content: flex-start;

Valores disponibles

flex-start - Cada línea solo llenará el espacio que necesita. El conjunto de elementos se moverán hacia el inicio del eje vertical / horizontal del contenedor.
flex-end - Cada línea solo llenará el espacio que necesita. El conjunto de elementos se moverán hacia el final del eje vertical / horizontal del contenedor.
center - Cada línea solo llenará el espacio que necesita . El conjunto de elementos se moverán hacia el centro del eje vertical / horizontal del contenedor.
space-between - Cada línea solo llenará el espacio que necesita. El espacio restante aparecerá entre las líneas.
space-around - Cada línea solo llenará el espacio que necesita. El espacio restante se distribuirá equitativamente alrededor de las líneas
space-evenly - Cada línea solo llenará el espacio que necesita. El espacio restante se distribuirá equitativamente entre las líneas
stretch - Cada línea se estirará para llenar el espacio restante. Disponible únicamente para la alineacion vertical

.
.

`align-items` | `justify-items`

.
Especifica la alineación vertical (align-items) / horizontal (justify-items) del contenido de cada elemento dentro una flexbox o una cuadrícula.

align-items: center;
justify-items: center;

Valores disponibles

flex-start | start - Los elementos alinean al inicio del eje vertical / horizontal.
flex-end | end - Los elementos alinean al final del eje vertical / horizontal.
center - Los elementos alinean en el centro del eje vertical / horizontal.
baseline - Los elementos alinean en la línea de base del eje vertical / horizontal.
stretch - Los elementos extenderán a lo largo de todo el eje vertical / horizontal.

.
.

`align-self` | `justify-self`

.
Especifica la alineación vertical (align-self) / horizontal (justify-self) del contenido de un elemento independiente dentro una flexbox o una cuadrícula.

align-self: center;
justify-self: center;

Valores disponibles

auto - el objetivo utilizará el valor de la propiedad align-items.
Admite todos los valores disponibles en las propiedades align-items & justify-items

.
.

`place-content` | `place-items` | `place-self`

Las 3 propiedades son un atajo que nos permite definir en una sola linea las propiedades align-* & justify-*

place-content: stretch space-between;
place-items: center start;
place-self: center start;

En todas las estructuras, el 1er valor corresponde a la propiedad align-* y el 2do valor a la propiedad justify-*. Si no se establece el 2do valor, se utilizara el primero como valor para ambas propiedades.

José Armando Alvarez Torres

Listo el pollo!

Guadalupe Monge Barale

HTML

    <div class="container">
        <div class="item">
            <img src="https://clubcrochetero.com/wp-content/uploads/2019/03/cropped-logo-club-crochetero.png" alt="lana">
        </div>
        <div class="item">
            <img src="https://clubcrochetero.com/wp-content/uploads/2019/03/cropped-logo-club-crochetero.png" alt="lana">
        </div>
        <div class="item">
            <img src="https://clubcrochetero.com/wp-content/uploads/2019/03/cropped-logo-club-crochetero.png" alt="lana">
        </div>
        <div class="item">
            <img src="https://clubcrochetero.com/wp-content/uploads/2019/03/cropped-logo-club-crochetero.png" alt="lana">
        </div>
    </div>

CSS

.container {
        border: 5px solid #e1bee7;
        background-color: #fff1ff;
        display: grid;
        grid-template-columns: 200px 200px;
        grid-auto-rows: 200px;
        gap:15px;
        height: 600px;
        place-content: center;
        

    }
    .item {
        width: 200px;
        height: 200px;
        background-image: url('https://cdn.pixabay.com/photo/2018/03/27/17/25/cat-3266673_960_720.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.9;
        display: grid;
        place-items: end;
    }
    img {
        width: 50px;
        height: 50px;
    }

Lautaro Agustin Barrera

RETO

HTML

CSS

Jose Luis Grande Acevedo

Código Emmet

 div.contenedor>div.item.item-${$}*6

Angel Hernandez

Intente hacerlo lo mas parecido posible, pero no encontre forma de darle color a las gaps de Css grid. Si saben como dejen sus sugerencias. Gracias!

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>Justify and Align Reto 2</title>
  <link rel="stylesheet" href="./stylejustify-AlignReto2.css">
</head>
<body>
  <div class="container">
    <div class="item">
      <div class="item-card"></div>
    </div>
    <div class="item">
      <div class="item-card"></div>
    </div>
    <div class="item">
      <div class="item-card"></div>
    </div>
    <div class="item">
      <div class="item-card"></div>
    </div>
  </div>
</body>
</html>

CSS

* { 
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html { 
  font-size: 62.5%;
}
.container { 
  display: grid;
  height: 100vh;
  place-content: center;
  grid-template-columns: repeat(2, 200px);
  grid-template-rows: repeat(2, 200px);
  gap: 40px;
}
.item { 
  background: #add901;
  display: grid; 
  place-content: flex-end; /* con esto lo posicionamos Abajo a la Derecha */
}
.item .item-card {
  height: 80px;
  width: 40px;
  background: #62a81e;
}

José Isidro Torres Caldea

https://codepen.io/jos-torres-the-looper/pen/PoKjpYz

Solución al reto

Stalin Badillo

Mi resultado

Julian Franco

Mi aporte.

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-reto-2.css">
</head>
<body>
    <div class="container">
        <div class="item"><p></p></div>
        <div class="item"><p></p></div>
        <div class="item"><p></p></div>
        <div class="item"><p></p></div>
    </div>
</body>
</html>

CSS:

.container{
    background-color: antiquewhite;
    height: 400px;
    width: 400px;
    display: grid;
    grid-template-rows: 100px 100px;
    grid-auto-columns: 100px;
    grid-auto-flow: column;
    place-content: center;
}
.item {
    padding: 0;
    background-color: #acda0a;
    display: grid;
    place-items: end;
}
.item p{
    padding: 0;
    margin: 0;
    background-color: #60a923;
    width: 20px;
    height: 30px;
}
.item:nth-child(1){
    border-right: 8px solid #396310;
    border-bottom: 8px solid #396310;
    
}
.item:nth-child(2){
    border-top: 8px solid #396310;
    border-right: 8px solid #396310;
}
.item:nth-child(3){
    border-left: 8px solid #396310;
    border-bottom: 8px solid #396310;
}
.item:nth-child(4){
    border-top: 8px solid #396310;
    border-left: 8px solid #396310;
}```

Josué Ramírez Hernández

Aquí mi reto y mi código 😄
.

Jesús Lautaro Careglio Albornoz

Resultado:

propiedades-de-alineación-JLCareglio.png

CSS:

<style>
  .contenedor,
  .item {
    display: grid;
    border-radius: 8px;
    font-size: 48px;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: white;
  }
  .contenedor {
    place-content: center;
    background-color: #f9ed69;
    border: 22px solid #f08a5d;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 20px;
    height: 260px;
    width: 260px;
  }
  .item {
    place-items: end;
    background-color: #6a2c70;
    border: 16px solid #b83b5e;
    line-height: 28px;
  }
</style>

body:

<body>
  <div class="contenedor">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>

NICOLAS ALBERTO CASTELLANO DE LA CRUZ

Les comparto una pagina que habla mucho sobre este tema
https://css-tricks.com/snippets/css/complete-guide-grid/#grid-properties
Me ha ayudado mucho a comprender. No he tenido que hacer un curso de grid como este para entender el 70% de este fabuloso sistema de maquetado de sitios. Aun asi he aprendido cosas que no sabía como grid auto flow. Eso ayuda a no tener que recurrir a flex cuando vas a implementar las vistas de por ejemplo, un numero casi ilimitado de articulos de noticias, post de blogs, productos de ecomerce, usuarios de red social, etc. Estoy ahora mismo haciendo un foro chan/redit con django. Y estoy implementando tanto grid como flex, asi como diseño responsive. Es el proyecto mas serio que me he propuesto. En su momento les compartiré como va quedando.

Maria Esther Mendoza Zafra

Mi reto:

Código:

Joserph Camacho

Here is my challenge.

<!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>Reto 1</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="contenedor">
        <div class="item"><p></p></div>
        <div class="item"><p></p></div>
        <div class="item"><p></p></div>
        <div class="item"><p></p></div>
    </div>
</body>
</html>

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

.contenedor{
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 20px;
    grid-auto-flow: column;
    justify-content: center;
    align-content: center;
    background-color: darkgreen;
    height: 600px;
}

.item {
    display: inherit;
    background-color: greenyellow;
}

.item p{
    display: inline-block;
    justify-self: end;
    align-self: end;
    width: 30px;
    height: 50px;
    background-color: green;
}

Brad Neydan Velarde Fabian

Listoooooooooooooooo me demore 30 minutos

beres

Hola, les comparto mi apunte de esta clase:

Acá el apunte completo si gustan darle una revisada.
¡Saludos!

Orangel Brito

Rafael Baculima

Así quedó el mío. Pueden ver el código en este link

Le traté de ponerle colores para que se vea el gap, las celdas del grid y el item alineado

Martin Alvarez

👍Reto

HTML

CSS

Meritxell Valadez

Aquí les dejo mis resultados del reto #2!!

0ne

Jose Carlos Manjarres Pereira

.contenedor{
    border: 5px solid #e1bee7;
    display: grid;
    grid-template-columns: 150px 150px;
    grid-template-rows: 150px 150px;
    gap: 20px;
    height: 600px;
    place-content: center;
    place-items: end;
}

.item{
    border: 5px solid #00bcd4;
    font-size: 2rem;
    font-family: 'Zen Kurenaido', sans-serif;
    color: #ffffff;
    background-color: blue;
}

Elcira Ibarra

Johan Rodriguez

También podemos usar la propiedad place-content de esta manera:

place-content: [valor del eje vertical] [valor del eje horizontal]

place-content: center end

La anterior línea de código centraría la grilla en el eje vertical y la pondría al final en el eje horizontal. Lo mismo podemos hacer con place-items y place-self

Victor Ovalle Porras

Mauricio Andrés Brochet Buelvas

Lo que me salió del reto:

Captura de Pantalla 2023-04-02 a la(s) 9.54.58 p.m..png

El 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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="item item-1"><span>1</span></div>
        <div class="item item-2"><span>2</span> </div>
        <div class="item item-3"><span>3</span></div>
        <div class="item item-4"><span>4</span></div>
        <!-- <div class="item">5</div>
        <div class="item">6</div> -->
    </div>
</body>
</html>

Los estilos:

.container {
    border: 5px solid green;
    
    display: grid;
    grid-template-rows: 100px 100px;
    grid-auto-columns: 100px;
    grid-auto-flow: column;
    gap: 20px;
    height: 600px;
    align-content: center;
    justify-content: center;
    
}
.item {
       
    border: 4px solid green;
    font-size: 30px;
    display: flex;
    justify-content: end;
    align-items: end; 
    background-color: yellowgreen;
    color: green;
    
}

span{
    background-color: green;
}

BenjaTzul

Captura de Pantalla 2022-08-01 a la(s) 21.55.45.png

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=“contenedor”>
<div class=“item”> <span></span> </div>
<div class=“item”> <span></span> </div>
<div class=“item”> <span></span> </div>
<div class=“item”> <span></span> </div>
</div>
</body>
</html>

CSS

.contenedor {
border: 5px solid #e1bee7;
background-color: #085606;
display: grid;
grid-template-rows: 150px 150px;
grid-auto-columns: 150px;
grid-auto-flow: column;
gap: 20px;
place-content: center;
height: 600px;
}

.item {
display: grid;
justify-items: end;
align-items: end;
background-color: #72cb10
}

.item span {
width: 50px;
height: 70px;
font-size: 30px;
background-color: #377f03;
color: white;
display: grid;
justify-items: center;
align-items: center;
}

JONASE90

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">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <section >
        <div class="contenedor">
        <div class="item-1 item">1</div>
        <div class="item-2 item">2</div>
        <div class="item-3 item">3</div>
        <div class="item-4 item">4</div>            
        </div>

    </section>
    
</body>
</html>
<code>

CSS

section {
    width: 100%;
    height: 800px;
    margin: 0;
}

.contenedor {
    width:100%; 
    height:100%; 
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    place-content: center;
    gap:  20px;
    place-items: end ;
  }

.item {
    display: grid;
    width: 100px;
    height:100px;
    border: 1px solid red;
    place-items: end;
    
}
<code>

Walberto Roblero Hernandez

Solucion del reto:

andres gonzalez

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”>
<link rel=“stylesheet” href="./style.css">
<title>Reto2</title>
</head>
<body>
<div class=“container”>
<div class=“item”>
<div class=“cuadrito”></div>
</div>
<div class=“item”>
<div class=“cuadrito”></div>
</div>
<div class=“item”>
<div class=“cuadrito”></div>
</div>
<div class=“item”>
<div class=“cuadrito”></div>
</div>
</div>
</body>
</html>

CSS
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-rows: 100px;
gap: 16px;
background-color: rgb(58, 99, 15);
place-content: center;
height: 600px;
}
.item {
background-color: rgb(173, 217, 1);
display: grid;
place-items: end;
}
.cuadrito {
width: 22px;
height: 40px;
background-color: rgb(98, 168, 30);
}

Erika Nathaly Bernal Morales

Reto logrado!!! 💪🚀💚

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>Reto 2</title>
    <link rel="stylesheet" href="./reto2-style.css" />
  </head>
  <body>
    <div class="contenedor">
      <div class="item item-1">
				<div class="element"></div>
			</div>
      <div class="item item-2">
				<div class="element"></div>
			</div>
      <div class="item item-3">
				<div class="element"></div>
			</div>
      <div class="item item-4">
				<div class="element"></div>
			</div>
    </div>
  </body>
</html>

CSS

/* Propiedades de alineación */

.contenedor {
	width: 400px;
	height: 400px;
	display: grid;
	grid-template-columns: repeat(2, 100px);
	grid-auto-rows: 100px;
	gap: 20px;
	place-content: center;
	background-color: #f1def1;
}
.item {
	display: grid;
	background-color: #add901;
}
.element {
	width: 30px;
	height: 50px;
	place-self: end;
	background-color: #61a81e;
}

Martin Gustavo Gonzalez

Logrado, solo tuve que transformar a todos los elementos de mi Grid en display grid para acomodar los eleementos dentro de ellos.

Captura de pantalla 2022-03-20 a las 02.11.49.png

Daniel Cardenas Parra

Tarde, pero lo logreeeee !!!

Andrés Felipe Morantes Vergara

Captura de pantalla 2021-11-20 113919.png

Jose Luis Grande Acevedo

Reto resuelto

<!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="PropiedadesDeAlineacionReto.css" />
  </head>
  <body>
    <div class="contenedor">
      <div class="item">
        <div class="subitem"></div>
      </div>
      <div class="item">
        <div class="subitem"></div>
      </div>
      <div class="item">
        <div class="subitem"></div>
      </div>
      <div class="item">
        <div class="subitem"></div>
      </div>
    </div>
  </body>
</html>

.contenedor {
  border: 5px solid #ff34ff;
  background-color: #1f3206;
  height: 600px;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-auto-rows: 150px;
  gap: 20px;
  place-content: center;
}
.item {
  background-color: #b4fe98;
  display: grid;
  place-items: end;
}
.subitem {
  background-color: #34be82;
  height: 60px;
  width: 30px;
}

Christian Andres Moreno Ceballos

El codigo utilizado para la solucion del reto:

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

.contenedor {
	background: #B8FB9E;
	border: 1px solid #5A7A4D;
	height: 600px;
	display: grid;
	place-content: center;
	grid-template-columns: 100px 100px;
	grid-auto-rows: 100px;
	gap: 20px;
}

.item {
	border: 1px solid #407A28;
	background-color: #67C742;
	display: grid;
	place-items: flex-end;
}

span {
	width: 30%;
	height: 50px;
	background: #5A7A4D;
	border: 1px solid #407A28;
	text-align: center;
}

Santiago Muñoz

Segundo reto, ¡Terminado!

Hernan Cañete

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">
    <link rel="stylesheet" href="./style2.css">
    <title>Document</title>
</head>
<body>
    <div class="contenedor">
            <div class="item">
            <div class="item-inside">
            </div>
        </div>
        <div class="item">
            <div class="item-inside">
            </div>
        </div>
        <div class="item">
            <div class="item-inside">
            </div>
        </div>
        <div class="item">
            <div class="item-inside">
            </div>
        </div>
        <div class="center"></div>
    </div>
</body>
</html>

CSS

.contenedor {
    background-color: #1c6b16;
    display: grid;
    place-content: center;
    grid-template-columns: 150px 150px;
    grid-auto-rows: 150px;
    gap: 30px;
    height: 400px;
    width: 400px;
}
.item {
    background-color: #add901;
    display: grid;
    place-items: end;
}
.item-inside {
    width: 40px;
    height: 50px;
    background-color: #61a81e;
}
.center {
    background-color: #12410e;
    width: 30px;
    height: 30px;
    position: absolute;
    top: calc(50% - 250px);
    left: calc(20% - 175px);
}

No se que estoy haciendo…
pierdo mucho tiempo haciendo los ejercicios ¬¬
el cuadrado del medio crei que se iri a formar solo pero no (si
le doy zoom se pierde la imagen por el centro)

Neftali Rafael Flores Cabrera

Un reto bastante rápido de hacer.

Marcos Perez

Segundo Reto Cumplido!! 👍

HTML

 <body>
    <main class="main-contenedor">
      <div class="contenedor">
        <div class="item"><span>1</span></div>
        <div class="item"><span>2</span></div>
        <div class="item"><span>3</span></div>
        <div class="item"><span>4</span></div>
      </div>
    </main>
  </body>

CSS

.main-contenedor {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contenedor {
  background-color: #3a630d;
  width: 215px;
  height: 215px;
  display: grid;
  gap: 15px;
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px;
  grid-auto-rows: 100px;
  padding: 0;
  margin: 0;
}

.item {
  background-color: #add901;
  display: grid;
  place-items: end;
}

.item span {
  display: block;
  height: 50px;
  width: 50px;
  background-color: #61a81e;
}

Leonard Sumoza

<code> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="item1">1</div>
        </div>
        <div class="item">
            <div class="item2">2</div>
        </div>
        <div class="item">
            <div class="item3">3</div>
        </div>
        <div class="item">
            <div class="item4">4</div>
        </div> 
    </div>      
</body>
</html>

CSS:
.container {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 150px 150px;
    grid-auto-rows: 150px;
    height: 600px;
    place-content: center center;    
}

.item {
    background-color: green;
    border: 5px solid #00bcd4;
    font-size: 4rem;  
    display: grid;  
}

.item1, .item2, .item3, .item4 {
    border: 5px solid #d4009f;
    place-self: end;
}

Jorge Eliecer Rangel Jimenez

Captura de Pantalla 2021-11-03 a la(s) 9.47.35 a.m..png

Captura de Pantalla 2021-11-03 a la(s) 9.48.12 a.m..png

Brisley Jaquelín Galindo Daza

<body>
   <div class="contenedor">
       <div class="item">1</div>
       <div class="item">2</div>
       <div class="item">3</div>
       <div class="item">4</div>

   </div> 
</body>


.contenedor {
  border: 5px solid #e1bee7;
  background-color: #fff1ff;
  display: grid;
  grid-template-columns: 150px 150px;
  grid-template-rows: 150px 150px;
  height: 600px;
  gap: 30px;
  place-content: center;
}

.item {
  border: 5px solid #00bcd4;
  font-size: 4rem;
  display: grid;
  justify-content: end;
  align-items: flex-end;
  background-color: chartreuse;
}

ulyses

Omar Castillo Ortiz

Griger Ratia

Jeferson Mejicanos

Listo!

body {
    height: 100vh;
    display: grid;
    place-content: center;
}


.contenedor {
    border-radius: 8px;
    background-color: #ACD900;
    display: grid;
    grid-template-columns: 150px 150px;
    grid-template-rows: 150px 150px;
    gap: 20px;
    place-content: center;
    place-items: end;
}


.item {
    font-family: sans-serif;
    font-size: 3rem;
    background-color: #001400;
    border-radius: 8px;
    width: 90px;
    height: 90px;
}

Alexander Reyes

Challenge #2 Done!

Juan Gui Arenas

Hola creo que este fue el reto, si me equivoque quiero que me corrijan

 <div class="container2">
            <div class="item__1">R</div>
            <div class="item__1">E</div>
            <div class="item__1">T</div>
            <div class="item__1">0</div>
    </div>

.container2 {
    border: 5px solid #00011a;
    background-color: #fff;
    display: grid;
    gap:15px;
    grid-template-columns: 100px 100px;
    grid-auto-rows: 180px;
    max-height: 600px;
    place-content: center;
}



.item__1{
    border: 5px solid #066517;
    font-size: 3rem;
    justify-self:end;
    align-self: flex-end;
}

Rodriguez Rosamaria

<code> 
.contenedor {
    width: 450px;
    height: 450px;
    display: grid;
    grid-template-columns: 200px 200px;
    grid-template-rows: 200px 200px;
    gap: 50px;
    place-content: center;
    background-color: #0c3786;  
    border-radius: 35px;
}


.item {
    border-radius: 10px;
    background-color: #3b719e;
    display: grid;
    place-items: end;
} 

.item span{
    display: block;
    height: 90px;
    width: 60px;
    background-color: #7599cf;
    border-radius: 10px;
}

.item-c{
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    height: 50px;
    width: 50px;
    background-color: #041027;
    border-radius: 10px;
}

Luis Gómez ojeda

Captura de pantalla 2021-10-30 191031.png

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="contenedor">
        <div class="items"><div class="item">1</div></div>
        <div class="items"><div class="item">2</div></div>
        <div class="items"><div class="item">3</div></div>
        <div class="items"><div class="item">4</div></div>
    </div>
</body>
</html>

css

contenedor {
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
    grid-template-columns: 200px 200px;
    grid-template-rows: 200px 200px;
    grid-gap: 15px;
    grid-auto-flow: column;
    grid-auto-columns: 50px;
    place-content: center;
    height: 600px;
  }
  
  .items {
    border: 5px solid #00bcd4;
    font-size: 2rem;
    text-align: end;
    display: grid;
  }

    .items .item{
        width: 25%;
        background-color: aquamarine;
        place-self: end;
        text-align: center;
    }>

César Palma

reto cumplido
https://codepen.io/xsrpm/pen/vYJeXXq

Wilder Valverde Ruiz

Les dejo el codigo realizado en CSS para la solucion del reto

.contenedor {
    width:100%;
    height: 500px;
    background-color: blanchedalmond;
    display: grid;
    grid-template-columns: repeat(2 , 150px);
    grid-auto-rows: 150px;
    font-size: 4rem;
    justify-content: center;
    align-content: center;

}
.item {
    border: 1px dashed black;
    background-color: chartreuse;

}
.item-1 , .item-2 , .item-3 , .item-4 {
    justify-self: end;
    align-self: end;
}

Sebastian Pedroza

Sebastian Pedroza

Ruben Hernandez Reichelbauman

Reto cumplido, al momento de hacer código, tarde un poco en colocar correctamente las propiedades, ya que en el inspector de elementos no es muy entendible (para mi) durante la clase.

Fernando Yutiz

Hola, me parece que esta faltando por lo menos una clase.

Angel Gabriel Villanueva Gonzales

hace 3 días

Ejercicio completado: ![](https://static.platzi.com/media/user_upload/IMAGEN%20EJERCICIO%202-37397290-7fb1-4fac-b8c1-878dc69bd3ce.jpg) ![](https://static.platzi.com/media/user_upload/HTML%20PRACTICA%202-41f91880-1f5b-4498-81f3-89a284c6ac6f.jpg) ![](https://static.platzi.com/media/user_upload/CSS%20PRACTICA%202-95bc91fb-4c18-4933-9899-fbd963b1917c.jpg)

Favio

hace un mes

![](https://static.platzi.com/media/user_upload/image-910c3c69-f202-4f8f-8e99-5094da833b37.jpg) Hasta donde llegue ...

Eduardo Elias Castellanos Picon

hace 2 meses

Hice lo que mejor pude hasta el momento, creo que voy por buen camino. dejo el codigo por aca ![](https://static.platzi.com/media/user_upload/image-adadc0da-62b6-4ee7-81c2-38981e364e39.jpg) ![](https://static.platzi.com/media/user_upload/image-4a3bd6d5-9842-4358-a8d5-c6c6b4e56b20.jpg) ![](https://static.platzi.com/media/user_upload/image-65f5bb21-c001-430c-a3f9-2aed962187d0.jpg)

Francisco Carusso

hace 2 meses

html ```

``` css ``` .container{ display: grid; grid-template-columns: 100px 100px; grid-auto-rows: 100px; justify-content: end; gap: 20px; } .item{ display: grid; border: 5px solid gray; width: 100px; height: 100px; place-items: end; } ```

Pedro García

Reto Realizado: ![](https://static.platzi.com/media/user_upload/image-51aae8fe-02ff-4f1b-9191-29027731e2eb.jpg)```css :root{ --verde:#081c15; --verde1:#004b23; --verde2:#006400; --verde3:#007200; --verde4:#008000; --verde5:#38b000; --verde6:#70e000; } body{ display: grid; place-content: center; } .container{ background-color: var(--verde); display: grid; place-content: center; grid-template-columns: 100px 100px; grid-auto-rows: 100px; gap: 40px; } .item{ background-color: var(--verde6); display: grid; place-items: end; } .item div{ width: 30%; height: 50%; background-color: var(--verde3); } ```

Leyla Carmona

mi aporte: ![](https://static.platzi.com/media/user_upload/image-6b16949b-8314-4c98-89d7-11541fbdda89.jpg)

Alejandro Rafael Soto Medina

*!Propiedades de alineación:* ** * *Justify: cuando veamos una propiedad que comienza con "Justify" significa que nos ayuda a alinear de manera horizontal el espacio que tenemos.* * *Align: cuando veamos una propiedad "Align" es alineación vertical con respecto al espacio que tenemos.* * *Place: es la mezcla de estas 2 directivas.* *!Propiedades de alineación de los items:* ** *estas propiedades son las que se declaran en el contenedor y nos ayuda a alinear todos los items que viven dentro de ese contenedor, se complementa con las propiedades anteriores:* * *Justify-items* * *Align-items* * *Place-items* *!Propiedades de alineación del contenedor:* *Estas propiedades son las que ajusta la grilla completa al espacio donde ella vive (no tiene nada que ver con los elementos en su interior) si no, que se alinea completamente como un bloque (es decir, ella y su contenido se alinean como un solo conjuntos).* * *Justify-content* * *Align-content* * *Place-content* *!Propiedades de alineación para los items individual:* *Estas propiedades de alineación se le dan directamente a lo hijos directo del contenedor que le coloquemos la propiedad de "Display: Grid".* * *Justify-self* * *Align-self* * *Place-self*

Leonardo Guevara

Reto logrado! ![](https://static.platzi.com/media/user_upload/reto2-b76566d3-42ff-4c5c-9512-0c6d24677601.jpg) ```css /* RETO 2 */ .containerR2 { border: 1px dotted red; height: 600px; display: grid; grid-template-rows: 150px 150px 150px; grid-auto-columns: 150px; grid-auto-flow: column; place-content: center; justify-items: end; align-items: end; gap: 20px; font-size: 4rem; background-color: green; } .containerR2 .item { border: 1px solid blue; background-color: lightgreen; color: blue; } ```

César Cubarrubia

Logrado. Intenté hacerlo como el ejemplo, creo que quedó bien jeje. ![]()

Juan David Cuervo Rojas

![](https://static.platzi.com/media/user_upload/image-4c09c754-c48e-482b-8931-40531ddfd112.jpg)

César Piña M.

No sé si soy hacker o el reto de esta clase estuvo muy facherito, o no lo entendí bien xd. Comparto mi resultado :v ![](https://static.platzi.com/media/user_upload/image-c7c3df02-1c86-47fb-bbc6-bdeb43456f90.jpg)v

Gerardo Lara

Mi aporte ```js .contenedor{ border: 5px solid #e1bee7; background-color: #38620b; display: grid; grid-auto-rows: 150px ; grid-template-columns: 150px 150px; gap: 15px; height: 600px; justify-content: center; align-content: center; } .item{ background-color: #abd800; display: grid; place-items: end; } .item span{ background-color: #5fa71c; width: 30px; height: 50px; } .center{ position: absolute; display: grid; justify-self: center; align-self: center; height: 16px; width: 16px; background-color: #1f3207; } ```.contenedor{ *border*: 5px solid #e1bee7; *background-color*: #38620b; *display*: grid; *grid-auto-rows*: 150px ; *grid-template-columns*: 150px 150px; *gap*: 15px; *height*: 600px; *justify-content*: center; *align-content*: center;} .item{ *background-color*: #abd800; *display*: grid; *place-items*: end;} .item span{ *background-color*: #5fa71c; *width*: 30px; *height*: 50px;} .center{ *position*: absolute; *display*: grid; *justify-self*: center; *align-self*: center; *height*: 16px; *width*: 16px; *background-color*: #1f3207;} ```js .contenedor{ border: 5px solid #e1bee7; background-color: #38620b; display: grid; grid-auto-rows: 150px ; grid-template-columns: 150px 150px; gap: 30px; height: 600px; justify-content: center; align-content: center; } .item{ background-color: #abd800; display: grid; place-items: end; } .item span{ background-color: #5fa71c; width: 30px; height: 50px; } .center{ position: absolute; display: grid; justify-self: center; align-self: center; height: 30px; width: 30px; background-color: #1f3207; } ```.contenedor{ *border*: 5px solid #e1bee7; *background-color*: #38620b; *display*: grid; *grid-auto-rows*: 150px ; *grid-template-columns*: 150px 150px; *gap*: 30px; *height*: 600px; *justify-content*: center; *align-content*: center;} .item{ *background-color*: #abd800; *display*: grid; *place-items*: end;} .item span{ *background-color*: #5fa71c; *width*: 30px; *height*: 50px;} .center{ *position*: absolute; *display*: grid; *justify-self*: center; *align-self*: center; *height*: 30px; *width*: 30px; *background-color*: #1f3207;}

Victor Vls

hace 5 meses

No se puede resolver usando 2x2, necesitas incluir un 5 elemento en el centro para lograr en cuadrado oscuro que se ve en la imagen. Tal vez usando blend-mode: multiply y pseudoclases, que son cosas que no hemos visto en la ruta. Pero aunque ocupe posiciones negativas (- margin-left: -5px;) Grid las va a mantener separadas ![](https://www.imghippo.com/i/wjKfg1720202005.jpg)

Valentina Hernández

hace 5 meses

![](https://static.platzi.com/media/user_upload/image-baae3d6b-ff92-4e20-a529-8eef9360e6eb.jpg)Simple y sencillo solo para demostrar lo aprendido...

Ángela Sofía Osorio García

hace 5 meses

Acá ls dejo mi solución : ![](https://static.platzi.com/media/user_upload/image-5e89bfd5-e056-40f2-abfc-48a5b8801a36.jpg) ```html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>reto 2</title> </head> <body> <section class="grid__container">

</section> </body> </html> <style> * { box-sizing: border-box; padding: 0; margin: 0; } .grid__container { display: grid; place-content: center; height: 100dvh; } .grid__box { display: grid; position: relative; gap: 2rem; grid-template-columns: 150px 150px; grid-auto-rows: 150px; background: #39630e; } .grid__box::after{ content: ""; display: grid; place-content: center; position: absolute; top:45%; left: 50%; transform: translateX(-50%); width: 35px; height: 35px; background: #1f3305; } .item{ position: relative; background: #acd900; place-content: end; display: grid; && span{ background: #63a81d; height:calc(150px /2); width: 3rem; padding: 1rem; } } </style> ```

Eduardo Perez Cardenas

hace 6 meses

![](https://static.platzi.com/media/user_upload/Screenshot%20from%202024-06-15%2012-38-56-9793a859-e00f-49ac-8c66-31200259f953.jpg) ```js .container{ display: grid; background-color: rgb(152,243,15); grid-template-columns: 100px 100px; grid-auto-rows: 100px; gap: 20px; justify-content: end; justify-items: end; align-items: end; } .item{ display: grid; border: 5px solid #555; } ``` \>

Alicia Rivas

hace 6 meses

![]()![](https://static.platzi.com/media/user_upload/image-ed0f40a9-8e4c-48ce-b412-4034183beabe.jpg) ![](https://static.platzi.com/media/user_upload/image-63a1f350-29a8-41cf-af59-2e73b55594b1.jpg) ![](https://static.platzi.com/media/user_upload/image-c9b1aff9-f5f5-4a68-a747-c66bcbcea4f4.jpg)

César Jr Villarreal M

![](https://static.platzi.com/media/user_upload/image-67a2ce6e-b77f-4a01-9034-6be28814f35b.jpg)

Maria Anzola

![](https://static.platzi.com/media/user_upload/image-4f63bb11-61cc-4323-a03c-d7c05f53a77e.jpg) ```js

😺

🙀

😻

😹

David Limon

Me rindo, no logro que me quede exactamente igual jajaja :( ![](https://static.platzi.com/media/user_upload/Exercise2-d33a2cb8-ea82-4317-b53d-accaea003d1c.jpg)

Pablo Alejandro Figueroa

Captura y código:

Cesar Arellano Hernández

hace 8 meses

Kevin Yair Salazar Molinares

hace 8 meses

RESULTADO: ![](https://static.platzi.com/media/user_upload/image-2a27f3bd-e6e1-4a8f-8486-ac746a49365c.jpg) HTML: ![](https://static.platzi.com/media/user_upload/image-72c80d57-e293-4822-a9cb-3fd427e1e21c.jpg) CSS: ![](https://static.platzi.com/media/user_upload/image-91feed0d-6cd1-468f-94be-068bc33ba471.jpg)

David Chaparro

hace 8 meses

`.container{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 200px; background-color: #3a630c; gap: 10px; font-family: sans-serif;}` `.item{ background-color: #add900; font-size: 2rem; display: grid; place-items: end;}` `.item p{ background-color: #62a81f; margin: 0;}`

Pantaleón Berumen Ruiz

Mi reto, solo me falto el efecto del cruce del gap, pensé que los haría en automático. ![](https://static.platzi.com/media/user_upload/imagen-7868f7c7-7e2f-4d60-8316-b3a482a99060.jpg) ![](https://static.platzi.com/media/user_upload/imagen-d218abda-fc11-439b-8baf-8f9091fc7af4.jpg) ![](https://static.platzi.com/media/user_upload/imagen-47ae432a-2e7d-4dbe-83fc-5ce9305d1e7b.jpg)

Pedro Damian

.item1{
  border: 5px solid blueviolet;
  font-size: 2rem;
  background-color: green;
  color: #fff;
  display: grid;
  justify-items: end;
  align-items: end;
  
}


.contenedor4 {
  border: 3px solid;
  margin: 50px;
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-rows: 100px;
  height: 400px;
  gap: 20px;
  place-content: center;
}

Jose Luis Rosado Cardenas

Mi codigo del reto en codepen: <https://codepen.io/jlrc23/pen/NWmrgJX>

Duvan Javier Moreno Heredia

![](https://static.platzi.com/media/user_upload/image-5ed02149-d65f-43e3-937d-64b43ad62aa3.jpg)

Ivan Ynocente

![](https://static.platzi.com/media/user_upload/image-f911a636-66f4-4bda-9193-6c753583a087.jpg)

Ivan Ynocente

![](https://static.platzi.com/media/user_upload/image-b14fb0ab-b9ee-42ac-9440-b441553bf0fd.jpg)

Ivan Ynocente

![](https://static.platzi.com/media/user_upload/image-46d9aab4-4c04-4466-9cfe-7680e38aab93.jpg)

Johan Rodriguez

Comparto mi solución al reto, se agradece feedback:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Challenge</title>
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="item item-1">
        <div class="box"></div>
      </div>
      <div class="item item-2">
        <div class="box"></div>
      </div>
      <div class="item item-3">
        <div class="box"></div>
      </div>
      <div class="item item-4">
        <div class="box"></div>
      </div>
      <div class="square"></div>
    </div>
  </body>
</html>

CSS:

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
  place-content: center;
  position: relative;
  width: 100%;
  height: 100vh;
}

.item {
  display: grid;
  place-items: end;
  background-color: #add901;
}

.box {
  background-color: #61a81e;
  width: 55px;
  height: 90px;
}

.item-1 {
  border-right: 24px solid #3a630d;
  border-bottom: 24px solid #3a630d;
}

.item-2 {
  border-left: 24px solid #3a630d;
  border-bottom: 24px solid #3a630d;
}

.item-3 {
  border-top: 24px solid #3a630d;
  border-right: 24px solid #3a630d;
}

.item-4 {
  border-left: 24px solid #3a630d;
  border-top: 24px solid #3a630d;
}

.square {
  position: absolute;
  inset: 0;
  margin: auto;
  background-color: #1f3206;
  width: 48px;
  height: 48px;
}

Muchas gracias.

EDGAR PINTO

![](https://static.platzi.com/media/user_upload/image-1df31b1e-3a70-4514-8d82-04184370b927.jpg)

Cesar Victoria Ramírez

![](https://static.platzi.com/media/user_upload/image-d14ace82-8434-43f4-9674-f126bf9557bd.jpg)

Edwin Gustavo Rozo Gómez

Help Me! Llegué al siguiente resultado pero como diríamos en mi tierra, a madrazos(Casi adivinando). ![](https://static.platzi.com/media/user_upload/image-3d46a878-c3a9-4a37-8182-0d56c2225485.jpg) Usé el siguiente código: ![](https://static.platzi.com/media/user_upload/image-c620b85c-bc69-4b72-9a57-11739d599279.jpg) ![](https://static.platzi.com/media/user_upload/image-53b26be5-08aa-40a2-876a-655ede7c6de6.jpg)![](https://static.platzi.com/media/user_upload/image-83a91794-bc11-48b9-9068-199083b9b1d9.jpg)

Estiven Pelaez

Terminado ![](https://static.platzi.com/media/user_upload/image-d1a06091-a354-4737-aa9e-65ab18db4159.jpg)

Josue Tapia Linarez

**Reto 2 terminado** Todos los retos: <https://retos-css-grid-platzi.vercel.app/> GitHub: <https://github.com/josttme/challenges-css-grid-course-platzi> ![](https://res.cloudinary.com/josttme/image/upload/v1707168745/courses-platzi/css-grid-couse-platzi/brnnoicbfgajv7vrdtnp.png) ```css <section>

</section> /* CSS */ *{ background-color: #000019; margin: 0; } section { width: 100%; height: 500px; display: grid; place-content: center; grid-template-columns: 150px 150px; grid-auto-rows: 150px; gap: 50px; div { background: #0071cf; display: inherit; place-content: end; span { background: #1b99ff; width: 50px; height: 75px; } } } ```

Josue Tapia Linarez

**Reto terminado:** ![](https://static.platzi.com/media/user_upload/css-grid-2-37190cc7-ecae-4d2f-bdf2-98e68a5be776.jpg) ```js // HTML <section>

</section> // CSS * { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui; } section { background: #000044; width: 100%; height: 500px; display: grid; place-content: center; grid-template-columns: 150px 150px; grid-auto-rows: 150px; gap: 15px; div { background: #16a; display: inherit; place-content: end; span { background: #5ae; width: 50px; height: 75px; } } } ```

Reynaldo David Briceño Trejos