Lleva tus conocimientos de CSS a otro nivel

1

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

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

2

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

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

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

5

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

6

驴Qu茅 significa Grid para CSS?

Control de alineamiento

7

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

8

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

9

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

10

Modos de escritura y ejes de alineamiento + Reto

11

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

12

T茅cnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

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

15

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

16

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

Propiedades y valores para el elemento padre

17

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

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

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

21

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

Propiedades y valores para los elementos hijos

22

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

23

Ubicaci贸n + Reto

24

Alineamiento en los elementos hijos + Quiz

25

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

26

Continuando con la fase de ubicaci贸n y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

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

No tienes acceso a esta clase

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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
16H
55M
38S

Ubicaci贸n + Reto

23/28
Recursos

Aportes 194

Preguntas 8

Ordenar por:

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

o inicia sesi贸n.

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

<h4>Apuntes</h4>
  • 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;
      }
      
      • Shorthandgrid-column
      .item{
      	grid-column: 1 / 2;
      }
      
    2. Grupo 2

      • grid-row-start & grid-row-start
      .item{
      	grid-row-start: 1;
      	grid-row-end: 2;
      }
      
      • Shorthandgrid-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;
}

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"
鈥渃ard-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鈥檒l\ 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鈥檒l\ 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 {
鈥搑osa: #d16ba5;
鈥搇ilas: #86a8e7;
鈥搗erde-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"
鈥渋tem-1-1 item-1-3鈥;
}

.item-1-1 {
background: var(鈥搑osa);
grid-column: 1 / 2;
grid-row: 1 / 3;
grid-area: item-1-1;
}

.item-1-2 {
background: var(鈥搗erde-agua);
}

.item-1-3 {
background: var(鈥搇ilas);
}

.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"
鈥渋tem-2-3 item-2-3鈥;
}

.item-2-1 {
background: var(鈥搗erde-agua);
}

.item-2-2 {
background: var(鈥搇ilas);
}

.item-2-3 {
background: var(鈥搑osa);
grid-column: 1 / 3;
grid-row: 2 / 3;
grid-area: item-2-3;
}