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

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 😄

Lo logré gracias compañeros 😃

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

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

ta bien?

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.

Reto cumplido!

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>

Me encantó entender por fin

Aca va mi solución, Saludos!!!

challenge completed

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

2023 estudiando Platzi 😃

costo pero lo logre!!!

reto terminado. 👍

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

> 

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.

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

![](

Reto

Acabo de culminar el siguiente poryecto, en donde para el footer utilicé los conceptos de grid-template-area
para el padre y grid-area para los items o hijos:

• Vista inspector:
  
  
• Vista normal:
  
  

=======================================================================
El código de este proyecto lo pueden encontrar en:

• Repo: Pincha aquí y mira el repo en GitHub

• Demo: Pincha aquí y mira la demo

reto cumplido!!!

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

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