Ubicación + Reto

He aquí mi aporte, le he agregado más cosas de CSS

HTML

<div class="window">
  <div class="glass glass1"></div>
  <div class="glass glass2"></div>
  <div class="glass glass3"></div>
</div>

CSS

:root {
  --purple: #451171;
  --blue: #89d5e0;
  --orange-dark: #fc7000;
}

body{
  box-sizing: border-box;
  margin: 0;
  height: 100vh;
  padding-bottom: 30vmin;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: var(--purple);  
  background-repeat: no-repeat;
  background-image: linear-gradient(to top, green 10%, rgba(0,0,0,0) 10%);
}
.window {
  
  display: grid;
  grid-template-columns: repeat(2, 40%);
  grid-auto-rows: 40%;
  grid-gap: 10px;
  
  place-content: center;
  
  background: var(--orange-dark);
  box-shadow: 0vmin 0vmin 3vmin 2vmin rgba(0,0,0, 0.3);
  height: 50vmin;
  width: 50vmin;
  
  position: relative;
}
.window::before {
  content: '';
  position: absolute;
  bottom: -5vmin;
  justify-self: center;
  height: 5vmin;
  width: 60vmin;
  background: var(--orange-dark);
  box-shadow: 0vmin 0vmin 2vmin 2vmin rgba(0,0,0, 0.3); 
}
.window::after {
  content: '';
  position: absolute;
  bottom: 0vmin;
  right: 6vmin;
  height: 30vmin;
  width: 16vmin;
  
  background-repeat: no-repeat;
  background-image: 
    /* maceta */
    linear-gradient(75deg, rgba(0,0,0,0) 40%, brown 40%),
    linear-gradient(105deg, brown 40%, rgba(0,0,0,0) 40%),
    /* centro*/
    radial-gradient(yellow 50%, rgba(0,0,0,0) 40%),
    /* petalos*/
    radial-gradient(red 50%, rgba(0,0,0,0) 40%),
    radial-gradient(red 50%, rgba(0,0,0,0) 40%),
    radial-gradient(red 50%, rgba(0,0,0,0) 40%),
    radial-gradient(red 50%, rgba(0,0,0,0) 40%),
    radial-gradient(red 50%, rgba(0,0,0,0) 40%),
  /* tallo*/
  linear-gradient(85deg, rgba(0,0,0,0) 40%, green 40%, rgba(0,0,0,0) 50% );
  
  background-position:
    /* maceta*/
    2vmin 20vmin,
    8vmin 20vmin,
    /* centro*/
    6vmin 5vmin,
    /* petalos*/
    5vmin 1.5vmin,
    2.5vmin 4.5vmin,
    4vmin 7.5vmin,
    7.5vmin 7vmin,
    8vmin 3.5vmin,
    /* tallo*/
    5vmin 6vmin;
  background-size:
    /* maceta*/
    8vmin 10vmin,
    16vmin 10vmin,
    /* centro*/
    5vmin 5vmin,
    /* petalos*/
    6vmin 6vmin,
    6vmin 6vmin,
    6vmin 6vmin,
    6vmin 6vmin,
    6vmin 6vmin,
    /* tallo*/
    10vmin 20vmin;
    ;
}

.glass {
  box-shadow: 
      inset 0vmin 0vmin 0.5vmin 1vmin rgba(0,0,0, 0.2),
      0vmin 0vmin 2vmin 1vmin rgba(0,0,0, 0.2);
  background: var(--blue);
}
.glass3{
  grid-column: 1 / -1;
}

Este es mi reto, me tomó algo de tiempo porque estaba poniendo las imágenes desde el html y resultaba más fácil hacerlo desde CSS con background-image

que cool poder usar el inspector asi

es solo seleccionar esta opcion

Lo logré gracias compañeros 😃

Viendo en el sitio de frontend mentor encontré un desafío similar que pueden realizar.
Link del challenge

Link de mi repositorio con el código

Así quedó el mío

Espero les sirva de algo 😄

Reto
Código

🗾 Ubicación

• Desde el contendor podemos ubicar a los elementos hijos
  • Todos deben estar alineados a la misma dirección
  • Pero no siempre es posible cumplir esa regla
• Existen diferentes formas de ubicar los elementos de la grilla

  1. Grupo 1

     • grid-column-start & grid-column-end

     .item{
     	grid-column-start: 1;
     	grid-column-end: 2;
     }
     

     • Shorthand ⇒ grid-column

     .item{
     	grid-column: 1 / 2;
     }
     

  2. Grupo 2

     • grid-row-start & grid-row-start

     .item{
     	grid-row-start: 1;
     	grid-row-end: 2;
     }
     

     • Shorthand ⇒ grid-row

     .item{
     	grid-row: 1 / 3;
     }
     

  3. Grupo 3

     • Grid Area

     .container{
     	display: grid;
     	grid-template-columns: 1fr 1fr;
     	grid-template-area:
     	"card1 card-2"
     	"card1 card-3";
     }
     
     .item{
     	grid-area: card-1;
     }
     

Listo, completado con grid area, me parece lo mejor y mas facil, me senti comodo viendo el ejemplo de la profe y aplicandolo.

#CSS

.container{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "card-1 card-2"
    "card-3 card-3";
  width: 500px;
  height: 400px;
}
.item1{
  background: green;
  grid-area: card-1;
}
.item2{
  background:red;
  grid-area: card-2;
}

.item3{
  background: blue;
  grid-area: card-3
}

#HTML

<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>

ta bien?

Hola a todos, aquí muestro mi reto
![](

<section class="section">
        <div class="Container">
            <div class="item-one"></div>
            <div class="item-two"></div>
            <div class="item-three"></div>
        </div>
            <div class="Container__two">
                <div class="item-one"></div>
                <div class="item-two"></div>
                <div class="item-three-second"></div>
            </div>
    </section>

CSS

body {
  font-family: 'Roboto', sans-serif;
  background-image: linear-gradient(to top, #9996cb, #ab99cc, #bb9dcd, #caa1cc, #d8a6cb);
  margin: 0;
  width: 100%;
  height: 100vh;
}

.section {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    
}
.Container {
    width: 350px;
    min-width: 150px;
    height: 350px;
    min-height: 150px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
    "card-1 card-2"
    "card-1 card-3";
    gap: 5px;
}
.item-one
 {
   grid-area: card-1;
  display: grid;
  background-image: 
  url("https://images.pexels.com/photos/1486974/pexels-photo-1486974.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
  box-shadow: 3px 5px 8px #211e1e;
}
.item-two
 {
  background-image: url("https://images.pexels.com/photos/3476312/pexels-photo-3476312.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
  box-shadow: 3px 5px 8px #211e1e;
}
.item-three
 {
  background-image: 
  url("https://images.pexels.com/photos/4553362/pexels-photo-4553362.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
  box-shadow: 3px 5px 8px #211e1e;
}

.Container__two {
  width: 350px;
    min-width: 150px;
    height: 350px;
    min-height: 150px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
    "card-1 card-2"
    "card-3 card-3";
    gap: 5px;
}
.item-three-second {
  grid-area: card-3;
  background-image: 
  url("https://images.pexels.com/photos/4553362/pexels-photo-4553362.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
  box-shadow: 3px 5px 8px #211e1e;

}

¡Listo! En mi caso lo hice usando template areas :3
.
HTML

<div class="grid">
    <div class="card-1"></div>
    <div class="card-2"></div>
    <div class="card-3"></div>
</div>

CSS

.grid {
    display: grid;
    width: 500px;
    height: 500px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
        "card1 card2"
        "card3 card3";
}

.card-1 {
    background: #E6BA65;
    grid-area: card1;
}

.card-2 {
    background:#E9BBAA;
    grid-area: card2;
}

.card-3 {
    background: #E15740;
    grid-area: card3;
}

no es mucho pero es trabajo honesto

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="./styles.css">
</head>
<body>
    <div class="container">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
            <div class="item1-1"></div>
            <div class="item1-2"></div>
            <div class="item1-3"></div>
</div>
</body>
</html>

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 62.5%;
}
body {
	background-image: linear-gradient(to left bottom, #f6680c, #fa503c, #f43f5c, #e43a77, #cc408e, #bc3d95, #a93b9c, #943ca2, #8930a4, #7b23a6, #6b17aa, #560bad);
	height: 100vh;
}
.container {
	display: grid;
	grid-template: repeat(2, 1fr) / repeat(4, 1fr);
	height: 100%;
	gap: 2%;
	padding: 2%;
}

.item1 {
	grid-column: 1 /2;
	grid-row: 1/3;
	background-color: #560bad;
	height: 100%;
	border-radius: 10px;
}

.item2 {
	grid-column: 2/3;
	grid-row: 1/2;
	background-color: #e85d04;
	height: 100%;
	border-radius: 10px;
}

.item3 {
	grid-column: 2/3;
	grid-row: 2/3;
	background-color: #f48c06;
	height: 100%;
	border-radius: 10px;
}

.item1-1 {
	grid-column: 3 / 5;
	grid-row: 1/2;
	background-color: #560bad;
	height: 100%;
	border-radius: 10px;
}

.item1-2 {
	grid-column: 3/4;
	grid-row: 2/3;
	background-color: #e85d04;
	height: 100%;
	border-radius: 10px;
}

.item1-3 {
	grid-column: 4/5;
	grid-row: 2/3;
	background-color: #f48c06;
	height: 100%;
	border-radius: 10px;
}

Hola hola, yo traté de hacer un layout de celular desde cero.
![](

Les dejo mi trabajo por acá, la verdad parece muy intimidante al comienzo pero después la curiosidad te consume y no paras de experimentar las posibilidades.

Este es mi reto completado, de una forma sencilla pero practica.
-Mi código

Reto realizado

CSS:

.container{
            background-color: coral;
            width: 300px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: 
            "item-1 item-2"
            "item-3 item-3";
        }
        .item{
            width: 100%;
            height: 200px;
        }
        .it-1{
            background-color: aqua;
            grid-area: item-1;
        }
        .it-2{
            background-color: peachpuff;
            grid-area: item-2;
        }
        .it-3{
            background-color: tomato;
            grid-area: item-3;
        }

HTML:

<div class="container">
        <div class="item it-1"></div>
        <div class="item it-2"></div>
        <div class="item it-3"></div>
    </div>

Reto cumplido!

Me encantó entender por fin

Aca va mi solución, Saludos!!!

challenge completed

costo pero lo logre!!!

reto terminado. 👍

Para el curso Basico de Grid hice estos ejemplos, en grid area usé las lineas de la grid para ubicar los items más rápido.

Claramente el reto se puede rograr con un rotate : 90deg;
jajaja

Lo hice…! :

!Reto resuelto!

![](

Mi pequeño aporte:

Comparto mi reto, espero se entienda:

Aquí está mi reto 😃
HTML:

CSS:

RESULTADO:

Reto:

HTML

<body>
    <div class="container">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>        
</body>

CSS

.container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'item1 item2' 'item3 item3';
    width: 200px;
    height: 200px;
}

.item1{
    grid-area: item1;
    background-color: bisque;
}

.item2{
    grid-area: item2;
    background-color: orange;
}

.item3{
    grid-area: item3;
    background-color: orangered;
}

Aqui dejo la parte del reto:

listo

Reto logrado

Bueno hay vamos 😄

Esto es lo que logre hacer, hay mucho que me falta por experimentar para practicar.

![](

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>
    <section class="container">
        <div class="item_one">1</div>
        <div class="item_two">2</div>
        <div class="item_three">3</div>
        <div class="item_four">4</div>
        <div class="item_five">5</div>
        <div class="item_six">6</div>
        <!--<div class="item_seven">7</div>
        <div class="item_eight">8</div>
        <div class="item_nine">9</div>
        <div class="item_ten">10</div>-->
    </section>
</body>
</html>

CSS

html{
    font-size: 62.5%;
}

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

body{
    width:100vw;
}

.container{
    display: grid;
    grid-template: repeat(4,minmax(50px, 1fr)) / repeat(7, minmax(50px,300px));
    /*grid-template-columns: repeat(autofit, minmax(50px, 1fr));
    grid-template-rows: / repeat(autofit, minmax(50px, 1fr));; */
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    justify-content: center;
    width: 100vw;
    background: linear-gradient(27deg, rgba(135,8,110,1) 14%, rgba(50,117,186,1) 63%, rgba(0,255,193,1) 98%);
}

.item_one{
    grid-column: 2 / 3 ;
    grid-row: 2 / 4;
    background-color: aquamarine;
    border-radius: 5px;
}

.item_two{
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background-color: blanchedalmond;
    border-radius: 5px;
}

.item_three{
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    background-color: rgb(68, 199, 120);
    border-radius: 5px;
}

.item_four{
    grid-column: 5 / 6;
    grid-row: 2 / 3;
    background-color: rgb(68, 120, 199);
    border-radius: 5px;
}

.item_five{
    grid-column: 6 / 7;
    grid-row: 2 / 3;
    background-color: rgb(57, 171, 175);
    border-radius: 5px;
}

.item_six{
    grid-column: 5 / 7;
    grid-row: 3 / 4;
    background-color: rgb(199, 68, 149);
    border-radius: 5px;
}

¡Done!

HTML

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

CSS

body {
  width: 100%;
  height: 100vh;
}

.container {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr);
  height: 100vh;
  grid-template-areas: "box1 box2"
"box3 box3";
  width: 30%;
  margin: 0 auto;
 
}

.box1 {
  background: red;
  grid-area: box1;
}

.box2 {
  background: blue;
  grid-area: box2;
}

.box3 {
  background: orange;
  grid-area: box3;
}```

.container{
    display:grid;
    grid-template:repeat(10,1fr)/ repeat(10,1fr);
    grid-template-areas: 
    "item-1 item-2"
    "item-3 item-3";
    height:100vh;
}
.item-1{
    background-color: var(--color-two);
    grid-area: item-1;

}
.item-2{
    background-color: var(--color-three);
    grid-area: item-2;
    
}
.item-3{
    background-color: var(--color-four);
    grid-area: item-3;
    
}

Mi aporte:
Grid Area

Se siente como magia

![](

2023 estudiando Platzi 😃

RETO LOGRADO

HTML

CSS

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</div>

.container {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template: repeat(2, 200px) / repeat(2, 200px);
    place-content: center;
    gap: 10px;
}

.item1 {
    background-color: pink;
    grid-column: span 2;
}

.item2 {
    background-color: yellow;
}

.item3 {
    background-color: aquamarine;
}

![](

css

.container {
    width: 75vw;
    height: 75vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    grid-template-areas: 
        "card-1 card-2"
        "card-3 card-3"
    ;
}

.card-one {
    grid-area: card-1;
    background-color: rgb(255, 196, 0);
}

.card-two  {
    grid-area: card-2;
    background-color: pink;
}

.card-three {
    grid-area: card-3;
    background-color: rgb(175, 48, 48);
}```

aquí mi versión, espero que les guste:

HTML

<
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ubicación</title>
    <link rel="stylesheet" href="./ubicación.css" />
  </head>
  <body>
    <div class="container">
      <div class="container-1">
        <img src="./assets/left/1.jpg" class="l1" />
        <img src="./assets/left/helado 2.webp" class="l2" />
        <img src="./assets/left/3.webp" class="l3" />
      </div>

      <div class="container-2">
        <img src="./assets/rigth/1.jpg" class="r1" />
        <img src="./assets/rigth/2.jpg" class="r2" />
        <img src="./assets/rigth/3.jpg" class="r3" />
      </div>
    </div>
  </body>
</html>

> 

CSS

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

.container {
  width: 90%;
  margin: 5rem auto;
  display: flex;
  justify-content: space-between;
}

.container .container-1 {
  width: 530px;
  display: grid;
  grid-template-columns: 250px 250px;
  grid-template-rows: repeat(2, 240px);
  overflow: hidden;
  gap: 1rem;
}
.container .container-2 {
  width: 500px;
  display: grid;
  grid-template-columns: 240px 240px;
  grid-template-rows: repeat(2, 240px);
  overflow: hidden;
  gap: 1rem;
}
img {
  height: 100%;
  object-fit: cover;
  border-radius: 2rem;
}
.l1 {
  width: 100%;
  grid-area: 1/1/3/2;
  object-position: left;
}

.l2 {
  width: 100%;
  grid-area: 1/2/2/3;
}
.l3 {
  width: 100%;
  grid-area: 2/2/2/3;
}
.r3 {
  width: 100%;
  grid-area: 2/1/2/3;
}
.r1 {
  object-fit: cover;
  width: 100%;
  grid-area: 1/1/2/2;
  object-position: left;
}

.r2 {
  object-fit: cover;
  width: 100%;
  grid-area: 1/2/2/3;
  object-position: left;
}

> 

Este es el reto:

y el código:

.contenedor{
    background: papayawhip;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 300px;
    height: 300px;
    grid-template-areas: 
    'card2 card3'
    'card1 card1';
}
.item1{
    grid-area: card1;
    background: hotpink;
    width: 100%;
    height: 100%;
    
}
.item2{
    grid-area: card2;
    background: green;
    width: 100%;
    height: 100%;
    
}
.item3{
    grid-area: card3;
    background: red;
    width: 100%;
    height: 100%;
    
}

Con todo el respeto, pero me parece que temas importantes como este deberían ser mejor explicados… en esta clase a parte de que hay códigos incompletos, en un momento habla sobre una manera de crear las grids (columns, rows) y de la nada salta al tema de grid-area… yo entiendo que para algunos que ya sepan del tema pueda ser sencillo identificar estas cuestiones pero para los que apenas están aprendiendo, no lo es… De hecho, en la sección de preguntas casi todas las preguntas es sobre esta cuestión… OJO

Mi reto:

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-one"></div>
        <div class="item-two"></div>
        <div class="item-three"></div>
    </div>
</body>
</html> 

CSS:

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "card-1 card-2"
    "card-3 card-3";
    width: 600px;
    height: 600px;
    gap: 20px;
}

.container div {
    border-radius: 50px;
}

.item-three {
    grid-area: card-3;
    background: linear-gradient(to right, #4286f4, #373B44);
}

.item-two {
    background: linear-gradient(to right, #a2ab58, #636363);
}

.item-one {
    background: linear-gradient(to right, #ffd452, #544a7d);
}

reto

Reto:

La clase fue mal explicada. El curso deja mucho que desear en cuanto a la parte práctica y el método de enseñanza de la profesora. Espero que los demás cursos ofrecidos sean de mejor calidad.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main{
    width: 100%;
    height: 100vh;
}
section{
    width: 40%;
    height: 40%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    grid-template-areas: 
    "card-1 card-2"
    "card-3 card-3";
}
.item-1{
    background-color: aqua;
    grid-area: card-1;
}
.item-2{
    background-color: tomato;
    grid-area: card-2;
}
.item-3{
    background-color: papayawhip;
    grid-area: card-3;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-areas: 
            "item1 item1 item1"
            "item3 item3 item4"
            "item3 item3 item2";
            grid-auto-rows: 100px;
            gap: 20px;
        }

        .item {

            border-radius: 15px;
        }

        .item1 {
            background-color: red;
            grid-area: item1;
        }

        .item2 {
            background-color: blue;
            grid-area: item2;
        }

        .item3 {
            background-color: orange;
            grid-area: item3;
        }

        .item4 {
            background-color: yellow;
            grid-area: item4;
        }

    </style>
</head>
<body>
    <h1>Grid template areas</h1>
    <div class="container">
       <div class="item item1"></div>
       <div class="item item2"></div>
       <div class="item item3"></div>
       <div class="item item4"></div>
    </div>
</body>
</html>

**Auto fill vs Auto fit **
Ambos son una técnica para trabajar código responsive pero se comportan de manera diferente
Auto fit: llena el espacio agrandando a sus hijos para que estos ocupen todo el contenedor
Auto fill: crea nuevas columnas para llenar el contenedor, no importa si están vacías.

<!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>
    <style>
        .container-fit { 
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 20px;
        }

        .item-fit {
            background-color: green;
        }

        .container-fill {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 20px;
        }

        .item-fill {
            background-color: red;
        }
        
    </style>
</head>
<body>
    <h1>Auto fit</h1>
    <div class="container-fit">
        <div class="item-fit">a</div>
        <div class="item-fit">a</div>
        <div class="item-fit">a</div>
        <div class="item-fit">a</div>
        <div class="item-fit">a</div>
    </div>

    <h1 style="margin-top: 20px;">Auto fill</h1>
    <div class="container-fill">
        <div class="item-fill">a</div>
        <div class="item-fill">a</div>
        <div class="item-fill">a</div>
        <div class="item-fill">a</div>
        <div class="item-fill">a</div>
    </div>
</body>
</html>

Lo logré! Si bien me costó lo sentí mas simple con grid-area. Mucho mas intuitivo. Me falta mucha práctica pero quiero dominar CSS grid y flexbox si o si.

Hola a todos, acá está el reto de la clase 😃

![](

Reto realizado!

Reto:

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">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
    <title>Grid-Layout</title>
</head>
<body>
    <div class="container">
        <div class="item item-one"></div>
        <div class="item item-two"></div>
        <div class="item item-three"></div>
    </div>    
</body>
</html>

CSS

:root {
    --black: #041808;
    --cyan: #24313a;
    --grey: #9e8883;
    --greyLight: #f1e1dd;
    --white: #f9f9f9;
}

body {
    margin: 0;
    background-image: linear-gradient(to right, #041808, #24313a, #9e8883, #f1e1dd, #f9f9f9);
    height: 100vh;
}

.container {
    margin-block-start: 20px;
    margin-block-end: 20px;
    margin-inline-start: 20px;
    margin-inline-end: 20px;
    display: grid;
    grid-template: repeat(2, 1fr) / repeat(2, 1fr);
    height: 95vh;
    grid-template-areas: 
    "card-1 card-2"
    "card-3 card-3";
    gap: 10px;
}

.item {
    border-radius: 20px;
}

.item-one {
    background-image: url(/pexels-pixabay-39284.jpg);
    background-size: cover;
    background-position: center;
}

.item-two {
    background-image: url(/pexels-miguel-á-padriñán-1591060.jpg);
    background-size: cover;
    background-position: center;
}

.item-three {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    grid-area: card-3;

    background-image: url(/pexels-vlada-karpovich-4050288.jpg);
    background-size: cover;
    background-position: center;
}

![](

.gral{
  width: 300px;
  height: 250px;
  background-color: gray;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.c1{
  width: 100%;
  height: auto;
  background-color: yellow;
  grid-column: 2 / 4;
 grid-row: 2 / 3;
}
.c2{
 width: 100%;
 height: auto;
 background-color: blue;
grid-row: 3 / 4;
grid-column: 2 / 3;
 
}
.c3{
  width: 100%;
  height: auto;
  background-color: red;
  grid-area: 3 / 3 / 3 / 4;
}

Reto!

Reto logrado!!! 💪💻💚

Aquí está el código 👇
Reto-ubicacion-items

Mi Reto:

Mi aporte con lo que llevamos

Mi plantilla 😁😁

Quise hace el reto pero cambiando un poco y aplicando mas conocimientos anteriores

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 class="container">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
    </main>
</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;
}
.container{
    display: grid;
    width: 100%;
    height: 100vh;
    padding: 8px;
    grid-template-columns: repeat(2,1fr);
    grid-template-areas: 
    "card-1 card-1"
    "card-3 card-2"
    ;
    gap: 8px;
}
.item-1,.item-2,.item-3{
    border: 1px solid brown;
    border-radius: 4px;
}
.item-1{
    grid-area: card-1;
    background-color: burlywood;
}
.item-2{
    grid-area: card-2;
    background-color: cadetblue;
}
.item-3{
    grid-area: card-3;
    background-color: cornflowerblue;
}

LISTO

Deberas si no fuera por el juegito GRID GARDEN no entenderia casi nada de este curso, muy mal , no existe practica , todo es teoria

Me tomo mas rato del que pensaba pero lo logre:
Primer reto:

Segundo reto:

HTML

<div class="container">
    <div class="item-one"></div>
    <div class="item-two"></div>
    <div class="item-three"></div>
</div>

CSS

.container {
    background: papayawhip;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "card-1 card-2"
        "card-3 card-3";
    width: 100px;
    height: 100px;
}

.item-one {
    background-color: #00AFC1;
    grid-area: card-1;
}

.item-two {
    background-color: #FF7BA9;
    grid-area: card-2;
}

.item-three {
    background-color: #F1D00A;
    grid-area: card-3;
}

Mi aporte

Aquí les dejo mi reto!
![](

Hola este es mi reto sencillo

Reto completado

.container {
    background-color: aquamarine;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
        "card-1 card-2"
        "card-3 card-3"
    ;
    width: 600px;
    height: 600px;
}

.item1 {
    background-color: papayawhip;
    grid-area: card-1;
}

.item2 {
    background-color: blueviolet;
    grid-area: card-2;
}

.item3 {
    background-color: burlywood;
    grid-area: card-3;
}

mi aporte al reto
https://codepen.io/tatys-jaramillo/pen/KKZqdKa

This is my exercise in Codepen.

Challenge complete! maybe I overextend a lil bit.

Aqui mi aporte mis compas

<!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comforter&family=Roboto:wght@300&display=swap" rel="stylesheet">
    <title>Hunter-x-Hunter</title>
</head>
<body>
    <header></header>
    <main class="container">
        <div class="container--title">
            <h1>Hunter-x-Hunter Characteres</h1>
        </div>
        <div class="container--content">
            <div class="item Gon"> 
                <picture>
                    <img src="https://i.pinimg.com/564x/c1/2a/67/c12a672f22ce9b3632cca926c2d37027.jpg" alt="Gon">
                    <figcaption>Gon Freecss (ゴン = フリークス, Gon Furīkusu) es el protagonista principal de la serie de manga y anime Hunter × Hunter.</figcaption>
                </picture>
            </div>
            <div class="item Killua"> 
                <picture>
                    <img src="https://i.pinimg.com/564x/e2/99/90/e2999054e001a4c8f60f356c2e81b697.jpg" alt="Killua">
                    <figcaption>Killua Zoldyck (キルア・ゾルディック, Kirua Zorudikku) es el coprotagonista y el mejor amigo de Gon Freecss. Es el tercero de los cinco hijos de la familia Zoldyck.</figcaption>
                </picture>
            </div>
            <div class="item Kurapika"> 
                <picture>
                    <img src="https://i.pinimg.com/564x/66/2b/96/662b96f66788411437aee5ded05b85e2.jpg" alt="Kurapika">
                    <figcaption>Leorio Paradinight (レオリオ=パラディナイト, Reorio Paradinaito) es un cazador novato y actualmente es estudiante de medicina</figcaption>
                </picture>
            </div>
            <div class="item Leorio"> 
                <picture>
                    <img src="https://i.pinimg.com/564x/97/01/3e/97013eed8fd6513d7e6f0aa0fd258541.jpg" alt="Leorio">
                    <figcaption>Kurapika (クラピカ, Kurapika) es uno de los cuatro protagonistas principales de la serie Hunter x Hunter. Busca venganza por su sangriento pasado.</figcaption>
                </picture>
            </div>
        </div>
    </main>
    <footer></footer>
</body>
</html>

:root{
    --onyx: #32373bff;
    --blue-munsell: #1f183b;
    --snow: #f7f3f5ff;
    --go-green: #3e7d36;
    --maize-crayola: rgb(158, 130, 55);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
}
.container{
    width: 100%;
    height: 100vh;
    background-color: var(--snow);
    display: grid;
    grid-template-rows: 10vh 90vh;
    grid-template-columns: 100%;
    gap:0;
}
.container--title{
    font-family: Comforter;
    font-size: 2rem;
    box-shadow: 3px 3px 3px 2px rgba(0, 0, 0, 0.4);
    color: snow;
    background-color: var(--onyx);
    text-align: left;
}
.container--title h1 {
    padding-top: 5px;
    padding-left: 10px;
}
.container--content{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25vw, 1fr));
    grid-template-rows: auto;
    margin-top: 0;
    max-width: 100%;
    justify-content: stretch;
}
.item img {
    padding: 5px;
    background-color: var(--onyx);
    margin-top: 20px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}
.Gon picture {
    width: 100%;
    height: 100%;
    background-color: var(--go-green);
}
.Gon img {
    width: 80%;
    height: 50vh;
    object-fit: cover;
}

.Killua picture {
    width: 100%;
    height: 100%;
    background-color: var(--blue-munsell);
}
.Killua img {
    width: 80%;
    height: 50vh;
    object-fit: cover;
    background-color: #ccc;
}

.Leorio picture {
    width: 100%;
    height: 100%;
    background-color: #405a71;
}
.Leorio img {
    width: 80%;
    height: 50vh;
    object-fit: cover;
    background-color: #ccc;
}

.Kurapika picture {
    width: 100%;
    height: 100%;
    background-color: var(--maize-crayola);
}
.Kurapika img {
    width: 80%;
    height: 50vh;
    object-fit: cover;
}
.item picture{
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.item figcaption{
    font-family: Roboto;
    font-size: 1.7rem;
    font-weight: 500;
    padding-left: 10px;
    margin-top: 30px;
    color: var(--snow);
    padding-right: 10px;
}
.Killua figcaption{
    color: var(--snow);
}

@media (max-width:800px) {
    .Killua{
        display: none;
    }
    .Leorio{
        display: none;
    }
}

.container{
background: papayawhip;
display: grid;
grid-template-columns: repeat(2, 1rf);
grid-template-areas:
"card-1 card-2"
“card-3 card-3”;
width: 100px;
}

Mi pequeño aporte

HTML

 <div class="container">
        <div class="container__art1">
            <div class="item item1"></div>
            <div class="item item2"></div>
            <div class="item item3"></div>
        </div>
        <div class="container__art2">
            <div class="item image1"></div>
            <div class="item image2"></div>
            <div class="item image3"></div>
        </div>
    </div>

CSS

*{
    margin: 0
}


body{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(to top, #e9e9e9, #dadde0, #c9d3d4, #bcc8c2, #b7bbae);
}

/* container padre */
.container{
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* Primer container hijo*/
.container__art1{
    width: 500px;
    height: 800px;
    margin: 0 auto;
    margin-block-start: 50px;
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
     "card1 card2"
     "card1 card3";
    gap: 10px;
}

.item{
    border-radius: 30px;
    box-shadow: 3px 5px 8px #211e1e ;
}

.item1{
    grid-area: card1;
    background-image: url(assets/img/Magui.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
   
}

.item2{
    grid-area: card2;
    background-image: url(assets/img/50\ Eye-Catching\ Lion\ Tattoos\ That’ll\ Make\ You\ Want\ To\ Get\ Inked.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.item3{
    grid-area: card3;
    background-image: url(assets/img/descarga.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* segundo container hijo*/
.container__art2{
    width: 500px;
    height: 800px;
    margin: 0 auto;
    margin-block-start: 50px;
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
     "image1 image2"
     "image3 image3";
     gap: 10px;
}

.image1{
    grid-area: image1;
    background-image: url(assets/img/Magui.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.image2{
    grid-area: image2;
    background-image: url(assets/img/50\ Eye-Catching\ Lion\ Tattoos\ That’ll\ Make\ You\ Want\ To\ Get\ Inked.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.image3{
    grid-area: image3;
    background-image: url(assets/img/descarga.jpg);
    background-size: cover;
    background-position-y: 18.5%;
    background-repeat: no-repeat;
}

Resultado 😄

Me la re sube cuando salen los retos

:root {
–rosa: #d16ba5;
–lilas: #86a8e7;
–verde-agua: #5ffbf1;
}

body {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(
to right top,
#dee17f,
#d1e27d,
#c3e47c,
#b4e57d,
#a3e680,
#a7e279,
#acdf72,
#b0db6b,
#c7d15e,
#dcc758,
#edbb58,
#fbb05f
);
}

.container-1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 300px;
height: 300px;
grid-template-areas:
"item-1-1 item-1-2"
“item-1-1 item-1-3”;
}

.item-1-1 {
background: var(–rosa);
grid-column: 1 / 2;
grid-row: 1 / 3;
grid-area: item-1-1;
}

.item-1-2 {
background: var(–verde-agua);
}

.item-1-3 {
background: var(–lilas);
}

.container-2 {
margin-top: 100px;
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 300px;
height: 300px;
grid-template-areas:
"item-2-1 item-2-2"
“item-2-3 item-2-3”;
}

.item-2-1 {
background: var(–verde-agua);
}

.item-2-2 {
background: var(–lilas);
}

.item-2-3 {
background: var(–rosa);
grid-column: 1 / 3;
grid-row: 2 / 3;
grid-area: item-2-3;
}