A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Propiedades de ubicaci贸n

5/13
Recursos

Aportes 308

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Propieades de ubicaci贸n (para las columnas)(columns)

  • Grid-column-start

  • Grid-column-end

  • simplifica las de start y end
    Grid-column

Propieades de ubicaci贸n (para las filas (rows))

  • Grid-row-start
  • Grid-row-end

Simplifica las el grid-start y end

  • Grid-row

Definimos las 4 ubicaciones donde comienza y terminan las filas y columnas

Inicia en la row 2 y column 2 | termina en la 4 y 4

  • Grid-area: 2 /2 / 4 / 4;

Este es mi reto 馃槂 馃惐.

C贸digo

Al fin puedo crear un collage sin paint c鈥:

El uso de grid-template-areas es fabuloso.
Todo se hace mucho mas intuitivo.

Creo que el tener retos todas las clases nos ayuda a poder reforzar conocimientos y est谩 bueno,

Iron man 馃槑

Tip:

Podemos usar el valor span seguido del valor que indica el n煤mero de celdas abarcara.

grid-column: span 2;

Mi soluci贸n:  

Considerando la grid de 3X3, aprovechando el flujo de los elementos y la forma en la que grid por defecto va colocando los elementos, el primer elemento no requiere de acomodo, el segundo elemento, al decirle que se extienda 2 dos celdas, ocasiona que al tercer elemento, grid lo posicione  en la segunda fila. 

C贸digo

html

<div  className="Grid-container">
  <div  className="item-1"></div>
  <div  className="item-2"></div>
  <div  className="item-3"></div>
  <div  className="item-4"></div>
  <div  className="item-5"></div>
  <div  className="item-6"></div>
  <div  className="item-7"></div>
</div>

css

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

.item-2, .item-3 {
  grid-column: span 2;
}

.item-1, .item-4, .item-5 {
  background-color: greenyellow;
}

.item-2, .item-6 {
  background-color: limegreen;
}

.item-3, .item-7 {
  background-color: green;
}

No es el mas bonito pero aqui esta 馃槀

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

.item{
font-size: 4rem;
}

.item-1{
border: 5px solid #f8bbd0;
background-color: #ffeeff;
}
.item-2{
border: 5px solid #e1bee7;
background-color: #fff1ff;
grid-column: 2 / 4;
}
.item-3{
border: 5px solid #b2ebf2;
background-color: #e5ffff;
grid-column: 1 / 3;
}
.item-4{
border: 5px solid blue;
background-color: #ffeeff;
}
.item-5{
border: 5px solid yellow;
background-color: #fff1ff;
}
.item-6{
border: 5px solid green;
background-color: #e5ffff;
}
.item-7{
border: 5px solid cyan;
background-color: #ffeeff;
}

chau flexbox , gracias por nadaaa

Soluci贸n al reto鈥 creo

<!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>CSS Grid Prac 3</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="item item-1"></div>
        <div class="item item-2"></div>
        <div class="item item-3"></div>
        <div class="item item-4"></div>
        <div class="item item-5"></div>
        <div class="item item-6"></div>
        <div class="item item-7"></div>
    </div>
</body>
</html>
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    width: 100vw;
    height: 100vh;
    display: grid;
    place-content: center;
}
.container{
    display: grid;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 150px);
    border-radius: 20px;
    box-shadow: 0px 5px 5px 5px rgba(0, 0 , 0, 0.16);
}
.item.item-1{
    background-color:#ccee3a;
    grid-column: 1 / 2;
    border-radius: 20px 0 0 0;
}
.item.item-2{
    background-color: #71bb05;
    grid-area: 1 / 2 / 2 / 4 ;
    border-radius: 0 20px 0 0;
}
.item.item-3{
    background-color: #268201;
    grid-area: 2 / 1 / 3 / 3;
}
.item.item-4, .item.item-5{
    background-color: #ccee3a;
}
.item.item-5{
    border-radius: 0 0 0 20px;
}
.item.item-6{
    background: #71bb05;;
}
.item.item-7{
    background-color: #268201;
    border-radius: 0 0 20px 0;
}
 

Html

css

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="./css/styles.css">
</head>
<body>
    <div class="container">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item4"></div>
        <div class="item item5"></div>
        <div class="item item6"></div>
        <div class="item item7"></div>
    </div>
</body>
</html>

CSS

.container{
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
    grid-template-areas: 
    "one two two"
    "three three four"
    "five six seven";
    place-content: center;
    gap: 15px;
}
.item{
    border: 1px solid black;
    border-radius: 15px;
    box-shadow: 4px 4px rgb(0,0,0,0.16);
}
.item1{
    background-color: pink;
    grid-area: one
}
.item2{
    background-color: rgb(193, 251, 255);
    grid-area: two;
}
.item3{
    background-color: rgb(212, 255, 192);
    grid-area: three;
}
.item4{
    background-color: pink;
    grid-area: four;
}
.item5{
    background-color: pink;
    grid-area: five;
}
.item6{
    background-color: rgb(193, 251, 255);
    grid-area: six;
}
.item7{
    background-color: rgb(212, 255, 192);
    grid-area: seven;
}

 

RESULTADO:

CSS:


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.contenedor{
  background-color: white;
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 200px 200px 200px;
  place-content: center ;
  gap: 10px;
  grid-template-areas: 
    "item1 item2 item2"
    "item3 item3 item4"
    "item5 item6 item7" ;
  height: 640px;
}

.contenedor img {
  border: 10px solid black;
}
.item1{
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4 {
  grid-area: item4;
}
.item5{
  grid-area: item5;
}
.item6 {
  grid-area: item6;
}
.item7 {
  grid-area: item7;
}

Solamente utilizando span 2 en los items 2 y 3 en las columnas, para que ocupe 2 espacios pude resolver el ejercicio

.contenedor {
    border: 5px solid #e1bee7;
    background-color: white;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 75px 75px 75px;
    place-content: center;
  }
  
  .item {
      font-size: 4rem;
      border: 5px solid #f8bbd0;
      background-color: #ffeeff;
  }

  .item-2, .item-3 {
    grid-column: span 2;
  }

MI soluci贸n al reto.

Resultado:

C贸digo:

<div class="container">
        <div class="grid-content">
            <div class="item">
                <img src="/img/caja.png" alt="caja">
            </div>
            <div class="item">
                <img src="/img/estrella.png" alt="estrella">
            </div>
            <div class="item">
                <img src="/img/fantasma.png" alt="fantasma">
            </div>
            <div class="item">
                <img src="/img/hongo_rojo.png" alt="hongo-rojo">
            </div>
            <div class="item">
                <img src="/img/hongo_verde.png" alt="hongo-verde">
            </div>
            <div class="item">
                <img src="/img/mario.png" alt="mario">
            </div>
            <div class="item">
                <img src="/img/moneda.png" alt="moneda">
            </div>
            <div class="item">
                <img src="/img/tubo.png" alt="tubo">
            </div>
        </div>
    </div>
 html {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    
}

.container {
    margin: 0 auto;
    padding: 2rem;
}

.grid-content {
    background-color: #f7f7f7;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1.5rem;
}

.grid-content div:nth-child(1) {
    background-color: 	#FFA500;
}

.grid-content div:nth-child(1) img {
    width: 5rem;
}

.grid-content div:nth-child(2) {
    background-color: 	#FFFF00;
    grid-column: 2 / 4;
}

.grid-content div:nth-child(2) img {
    width: 11rem;
}

.grid-content div:nth-child(3) {
    background-color: #000;
    grid-column: 1 / 3;
}

.grid-content div:nth-child(3) img {
    width: 10rem;
}

.grid-content div:nth-child(4) {
    background-color: 	#FF4500;
}

.grid-content div:nth-child(4) img {
    width: 6rem;
}

.grid-content div:nth-child(5) {
    background-color: #00FF00;
}

.grid-content div:nth-child(5) img {
    width: 6rem;
}

.grid-content div:nth-child(6) {
    background-color: #4169E1;
}

.grid-content div:nth-child(6) img {
    width: 6rem;
}

.grid-content div:nth-child(7) {
    background-color: 	#FFD700;
}

.grid-content div:nth-child(7) img {
    width: 7rem;
}

.grid-content div:nth-child(8) {
    background-color: #008000;
    grid-column: 1 / 4;
}

.grid-content div:nth-child(8) img {
    width: 10rem;
}

.item {
    height: 20rem;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: grid;
    place-items: center;
}

Les comparto mi resultado:

C贸digo:

Resultado:

CSS:

<style>
  .contenedor,
  .item {
    border-radius: 8px;
    font-size: 48px;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: white;
    display: grid;
    place-content: center;
  }
  .contenedor {
    background-color: #f9ed69;
    border: 22px solid #f08a5d;
    gap: 20px;
    grid-auto-columns: 100px;
    grid-auto-rows: 100px;
    grid-template-areas:
      "a b b"
      "c c d"
      "e f g";
    width: 360px;
    height: 360px;
  }
  .item {
    background-color: #6a2c70;
    border: 16px solid #b83b5e;
  }

  .item:nth-child(1) {grid-area: a;}
  .item:nth-child(2) {grid-area: b;}
  .item:nth-child(3) {grid-area: c;}
  .item:nth-child(4) {grid-area: d;}
  .item:nth-child(5) {grid-area: e;}
  .item:nth-child(6) {grid-area: f;}
  .item:nth-child(7) {grid-area: g;}
</style>

body:

<body>
  <div class="contenedor">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
    <div class="item">e</div>
    <div class="item">f</div>
    <div class="item">g</div>
  </div>
</body>

practiqu茅 con un teclado 鉂わ笍

Mi aporte:

MI c贸digo:

<.contenedor {
    background-color: #212529;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
    gap: 5px;
    grid-template-areas: 
        "ww superman superman"
        "batman batman jl"
        "aquaman flash cyborg";
    place-content: center;
    padding: 5px 0;
}
.item {
    font-size: 3rem;
    border-radius: 10px;
}
.item-1 {
    background-image: url("./assets/ww.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-area: ww;
}
.item-2 {
    background-image: url("./assets/superman.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-area: superman;
}
.item-3 {
    background-image: url("./assets/batman.jpg");
    background-size: cover;
    background-position: start;
    background-repeat: no-repeat;
    grid-area: batman;
}
.item-4 {
    background-image: url("./assets/jl.jpg");
    background-size: cover;
    background-position: start;
    background-repeat: no-repeat;
    grid-area: jl;
}
.item-5 {
    background-image: url("./assets/aquaman.jpg");
    background-size: cover;
    background-position: start;
    background-repeat: no-repeat;
    grid-area: aquaman;
}
.item-6 {
    background-image: url("./assets/flash.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-area: flash;
}
.item-7 {
    background-image: url("./assets/cyborg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-area: cyborg;
}> 

Cumplido con tem谩tica de Snoopy 馃惗

Se pudiera hacer un comic con esto de las grillas 馃槃

Me inspirado en los comics

.container{
    border: 5px solid black;
    background: whitesmoke;
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px; 
    grid-template-areas:
    "box1 box2 box2"
    "box3 box3 box4"
    "box5 box6 box7";
    place-content: center;
}

.item1{
    border: 5px solid gray;
    background: red;
    grid-area: box1;
    background-image: url(" ");
    background-size: cover;
}
.item2{
    border: 5px solid gray;
    background: black;
    grid-area: box2;
    background-image: url("");
    background-size:cover;
    background-position: center;
}
.item3{
    border: 5px solid gray;
    background: blue;
    grid-area: box3;
    background-image: url("");
    background-size: cover;
    background-position: center;
}

.item4{
    border: 5px solid gray;
    background: blue;
    grid-area: box4;
    background-image: url("");
    background-size: cover;
    background-position: center;
}
.item5{
    border: 5px solid gray;
    background: blue;
    grid-area: box5;
    background-image: url("");
    background-size: cover;
    background-position: center;
}
.item6{
    border: 5px solid gray;
    background: blue;
    grid-area: box6;
    background-image: url("");
    background-size: cover;
}
.item7{
    border: 5px solid gray;
    background: blue;
    grid-area: box7;
    background-image: url("");
    background-size: cover;
    background-position: center;
}

<!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="./reto3.css">
</head>
<body>
    <section class="container">
        <article class="item1">1</article>
        <article class="item2">2</article>
        <article class="item3">3</article>
        <article class="item4">4</article>
        <article class="item5">5</article>
        <article class="item6">6</article>
        <article class="item7">7</article>
    </section>
</body>
</html>

Les dejo un peque帽o tutorial que hie aqu铆 mismo para que sepan todas las formas de posicionar un item en GRID https://platzi.com/tutoriales/2222-css-grid-layout/10559-mejores-tecnicas-de-posicionamiento-con-css-grid-layout/

<!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="/css/grid3.css">
</head>
<body>
    <main>
        <div class="item1 item"></div>
        <div class="item2 item"></div>
        <div class="item3 item"></div>
        <div class="item4 item"></div>
        <div class="item5 item"></div>
        <div class="item6 item"></div>
        <div class="item7 item"></div>
    </main>
</body>
</html>
*{
    box-sizing: 0;
    margin: 0;
    padding: 0;
}

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

main{
    display: grid;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 150px);
    gap: 10px;
    justify-content: center;
    align-content: center;
    width: 480px;
    height: 480px;
    background-color: rgb(96, 183, 199);
}

.item1{
    background-image: url(/images/ardillla.jpg);
}

.item2{
    grid-column: 2 / 4;
    background-image: url(/images/mariposa.jpg);
}

.item3{
    grid-area: 2 / 1 / 3 / 3;
    background-image: url(/images/tucan.jpg);
}

.item4{
    background-image: url(/images/delfin.jpg);
}

.item5{
    background-image: url(/images/pez.jpg);
}

.item6{
    background-image: url(/images/culebra.jpg);
}

.item7{
    background-image: url(/images/rana.jpg);
}

.item{
    background-repeat: no-repeat;
    background-size: cover;
}

Mi reto 馃槂

Bueno, fue un poco m谩s f谩cil de lo que pensaba pero estuvo bueno el reto

me estoy enamorando de display Grid porque es mas r谩pido poner en orden cada celda a tu gusto

Maquetacion

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>reto</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item item-1"><span>馃槑</span></div>
        <div class="item item-2"><span>馃ぉ</span></div>
        <div class="item item-3"><span>馃挅</span></div>
        <div class="item item-4"><span>馃槬</span></div>
        <div class="item item-5"><span>馃崟</span></div>
        <div class="item item-6"><span>馃槧</span></div>
        <div class="item item-7"><span>馃槯</span></div>
    </div>
</body>
</html>> 

Estilos

<:root{
    --background: #e2e2e2;
    --primary-color: #0966ac;
    --seconde-color: #00cb8e;
    --third-color: #ff9e0a;
    --fourth-color: #a3b5e9;
}

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

html{
    font-size: 62.5%;
}

.container{
    min-width: 320px;
    background-color: var(--background);
    display: grid;
    grid-template-columns: 120px 120px 140px;
    grid-template-rows: 130px 130px 130px;
    justify-content: center;
    gap: 10px;
}

.container .item{
    border: 5px solid var(--third-color);
    font-size: 4rem;
    border-radius: 10px;
    display: grid;
}

.item-1, .item-3, .item-6{
    background-color: var(--seconde-color);
}

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

.item-2, .item-4, .item-5{
    background-color: var(--primary-color);
}

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

.item-7{
    background-color: var(--fourth-color);
}

.container .item span{
    justify-self: center;
    align-self: center;
}> 

Comparto mi reto, quedo igual 馃槂

Codigo HTML

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

Codigo CSS

.contenedor{
    display: grid;
    grid-template-columns: 90px 90px 90px;
    grid-template-rows: 90px 90px 90px;
    place-content: center;
    background-color: white;
}

.item-1, .item-4, .item-5{
    background-color: #ccee3a;
}

.item-2, .item-6{
    background-color: #71bb05;
}

.item-3, .item-7{
    background-color: #268201;
}

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

Super super super interesante esta clase.
Muy muy buena la informacion de verdad y explciado de forma magistrl y sencilla.
Pero ahora me surgen dudas:
Esta es la mejor forma de ubicar nustro contenedores dentro del layaout? entiendo que no aplica para todos los casos, pero me gustar铆a un criterio de cuando si usarlo y cuando no.

隆 WOW ! Nadie mas sorprendido que yo, ver como vamos mejorando cada dia , Gracias a la profe y a mis compa帽eros 鉂わ笍

reto cumplido鈥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="contenedor">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
    </div>
</body>
</html>
:root {
    --color_uno: yellow;
    --color_dos: green;
    --color_tri: yellowgreen;
}
.contenedor {
    background-color: antiquewhite;
    border: 5px solid darkgrey;
    display: grid;
    grid-template-columns: repeat(3,200px);
    grid-template-rows: repeat(3,200px);
    gap:15px;    
    grid-template-areas: 
        "una dos dos"
        "tres tres cuatro"
        "cinco seis siete";
    place-content: center;
    height: 750px;
}
.item{
    border-radius: 15px;
    border: 5px solid white;
    box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.16);
    font-size: 4rem;
}
.item-1 {
    grid-area: siete;
    background-color: var(--color_dos);
}
.item-2 {
    grid-area: dos;
    background-color: var(--color_tri);
}
.item-3 {
    grid-area: tres;
    background-color: var(--color_dos);
}
.item-4 {
    grid-area: una;
    
    background-color: var(--color_uno);
}
.item-5 {
    grid-area: seis;
    background-color: var(--color_tri);
}
.item-6 {
    grid-area: cuatro;
    background-color: var(--color_uno);    
}
.item-7 {
    grid-area: cinco;
    background-color: var(--color_uno);    
}

Resultado

C贸digo:

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="./practicado.css">
</head>
<body>
    <div class="container">
        <div class="uno"></div>
        <div class="dos"></div>
        <div class="tres"></div>
        <div class="cuatro"></div>
        <div class="cinco"></div>
        <div class="seis"></div>
        <div class="siete"></div>
    </div>
</body>
</html>

CSS

.container{
    display: grid;
    grid-template-columns: repeat(3,150px);
    grid-template-rows: repeat(3,150px);
    gap: 15px;
}
.container div{
    border-radius: 20px;
}
.uno{
    background-color: aqua;
    border: 2px solid rgb(154, 230, 230);
}
.dos{
    background-color:  rgb(255, 0, 0);
    border: 2px solid rgb(230, 154, 154);
    grid-column: 2/4;
}
.tres{
    background-color: rgb(38, 0, 255);
    border: 2px solid rgb(155, 154, 230);
    grid-column: 1/3;
}
.cuatro{
    background-color: rgb(255, 0, 212);
    border: 2px solid rgb(230, 154, 224);
}
.cinco{
    background-color: rgb(0, 255, 21);
    border: 2px solid rgb(154, 230, 154);
}
.seis{
    background-color: rgb(251, 255, 0);
    border: 2px solid rgb(230, 229, 154);
}
.siete{
    background-color: rgb(119, 0, 255);
    border: 2px solid rgb(154, 181, 230);
}```



.contenedor{
background-color: aliceblue;
display: grid;
grid-template-columns: 75px 75px 75px;
grid-template-rows: 75px 75px 75px;
justify-content: center;
grid-template-areas:
"item1 item2 item2"
"item3 item3 item4"
鈥渋tem5 item6 item7鈥 ;
}

    .item-1{
        background-color: #ccee3a;
        grid-area: item1;
    }

    .item-2{
        background-color: #71bb05;
        grid-area: item2;
    }

    .item-3{
        background-color: #268201;
        grid-area: item3;
    }

    .item-4{
        background-color: #ccee3a;
        grid-area: item4;
    }

    .item-5{
        background-color: #ccee3a;
        grid-area: item5;
    }

    .item-6{
        background-color: #71bb05;
        grid-area: item6;
    }

    .item-7{
        background-color: #268201;
        grid-area: item7;
    }

<body>
<div class=鈥渃ontenedor鈥>
<div class=鈥渋tem-1鈥></div>
<div class=鈥渋tem-2鈥></div>
<div class=鈥渋tem-3鈥></div>
<div class=鈥渋tem-4鈥></div>
<div class=鈥渋tem-5鈥></div>
<div class=鈥渋tem-6鈥></div>
<div class=鈥渋tem-7鈥></div>
</div>
</body>

me encant贸 esta clase, s煤per bien explicado!

asombroso!!! que cosa tan buenos estos cursos

Mi reto:

As铆 qued贸 el m铆o. El c贸digo lo pueden ver ac谩.


Asi quedo el mio

Las propiedades de ubicaci贸n aceptan como valores a l铆neas de fila o de columna. Con l铆nea de fila o l铆nea de columna hacemos referencia literalmente a las l铆neas del grid. Recordemos que si un grid tiene 3 columnas, entonces tiene 4 l铆neas de columna. Lo mismo pasa con las filas. Estas l铆neas son las que debemos utilizar a la hora de setear estas propiedades.

Reto 馃惐鈥嶐煉


Reto completado! Me decante mejor hacerlo por fracciones, con el grid-area, se me hace un poco mas 鈥渟ucio鈥, es mi impresion de momento!

Codigo:

<body>
    <h1>Curso de CSS Grid B谩sico - Reto 03</h1>
    <div class="container">
      <div class="item item__1 bg-inch-worm"></div>
      <div class="item item__2 bg-lima"></div>
      <div class="item item__3 bg-forest-green"></div>
      <div class="item item__4 bg-inch-worm"></div>
      <div class="item item__5 bg-inch-worm"></div>
      <div class="item item__6 bg-lima"></div>
      <div class="item item__7 bg-forest-green"></div>
    </div>
  </body>
.container {
  display: grid;
  grid-auto-rows: 100px;
  grid-template-columns: 100px 100px 100px;
}

.item {
  display: grid;
  place-items: end;
}

.item__2 {
  grid-column: 2 / 4;
}

.item__3 {
  grid-column: 1 / 3;
}

Soluci贸n al 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">
    <title>propiedades contenedo</title>
    <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=DM+Sans:[email protected];500;700&family=Dongle:[email protected];400&family=Inter:[email protected];500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="contenedor">
        <div class="item-1 verde_C"></div>
        <div class="item-2 verde_C"></div>
        <div class="item-3 verde_C"></div>
        <div class="item-4 verde_L"></div>
        <div class="item-5 verde_L"></div>
        <div class="item-6 verde_O"></div>
        <div class="item-7 verde_O"></div>
    </div>
</body>
</html>

CSS

<!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>propiedades contenedo</title>
    <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=DM+Sans:[email protected];500;700&family=Dongle:[email protected];400&family=Inter:[email protected];500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="contenedor">
        <div class="item-1 verde_C"></div>
        <div class="item-2 verde_C"></div>
        <div class="item-3 verde_C"></div>
        <div class="item-4 verde_L"></div>
        <div class="item-5 verde_L"></div>
        <div class="item-6 verde_O"></div>
        <div class="item-7 verde_O"></div>
    </div>
</body>
</html>

Reto cumplido鈥!

<body>
   <div class="contenedor">
       <div class="item item-1"></div>
       <div class="item item-2"></div>
       <div class="item item-3"></div>
       <div class="item item-4"></div>
       <div class="item item-5"></div>
       <div class="item item-6"></div>
       <div class="item item-7"></div>
   </div> 
</body>
.contenedor {
  border: 5px solid #e1bee7;
  background-color: #fff1ff;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 75px 75px 75px;
  place-content: center;
}

.item {
  font-size: 4rem;
}
.item-1 {
  background-color: #7af706;
  grid-column-start: 1;
  grid-column-end: 2;
}

.item-2 {
  background-color: #29ce1a;
  grid-column-start: 2;
  grid-column-end: 4;
}

.item-3 {
  background-color: #118a06;
  grid-row: 2/3;
  grid-column: 1/3;
}
.item-4 {
  background-color: #7af706;
  grid-column-start: 3;
  grid-column-end: 4;
}

.item-5 {
  background-color: #7af706;
  grid-column: 1/2;
}

.item-6 {
  background-color: #29ce1a;
  grid-column: 2/3;
}

.item-7 {
  background-color: #118a06;
  grid-column: 3/4;
}


challenge complete隆

Reto Numero 3 Realizado!!

HTML

<body>
    <div class="contenedor">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
    </div>
  </body> 

CSS

.contenedor {
  border: 5px solid #e1bee7;
  background-color: white;
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 75px 75px 75px 75px 75px 75px;
  place-content: center;
}

.item {
  font-size: 4rem;
}

.item-1 {
  border: 5px solid green;
  background-color: greenyellow;
  grid-row: 1 / 3;
}

.item-2 {
  border: 5px solid blue;
  background-color: turquoise;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row: 1 / 3;
}

.item-3 {
  border: 5px solid red;
  background-color: hotpink;
  grid-area: 3 / 1 / 3 / 3;
  grid-row: 3 / 5;
}

.item-4 {
  border: 5px solid orangered;
  background-color: darkorange;
  grid-row: 3 / 5;
}

.item-5 {
  border: 5px solid navy;
  background-color: khaki;
  grid-row: 5 /7;
}

.item-6 {
  border: 5px solid indigo;
  background-color: plum;
  grid-row: 5 / 7;
}

.item-7 {
  border: 5px solid magenta;
  background-color: lightblue;
  grid-row: 5 / 7;
} 

RETO

HTML

CSS

Lo visto en clase junto al reto. 馃槃

Como siempre tratando de dejarlo lo mas parecido al 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">
  <title>Reto 3 grid areas</title>
  <link rel="stylesheet" href="./styleReto3.css">
</head>
<body>
  <div class="container">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
    <div class="item item-5"></div>
    <div class="item item-6"></div>
    <div class="item item-7"></div>
  </div>
</body>
</html>

CSS

* { 
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html { 
  font-size: 62.5%;
}
:root { 
  --verde-claro: #ccee3a;
  --verde: #71bb05;
  --verde-oscuro: #268201;
}
.container { 
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(3, 150px);
  grid-template-areas: 
    "cuadro1 cuadro2 cuadro2"
    "cuadro3 cuadro3 cuadro4"
    "cuadro5 cuadro6 cuadro7"
  ;
  place-content: center;
}
.item-1 { 
  grid-area: cuadro1;
  background-color: var(--verde-claro);
}
.item-2 { 
  grid-area: cuadro2;
  background-color: var(--verde);
}
.item-3 {
  grid-area: cuadro3;
  background-color: var(--verde-oscuro);
}
.item-4 {
  grid-area: cuadro4;
  background-color: var(--verde-claro);
}
.item-5 {
  grid-area: cuadro5;
  background-color: var(--verde-claro);
}
.item-6 {
  grid-area: cuadro6;
  background-color: var(--verde);
}
.item-7 {
  grid-area: cuadro7;
  background-color: var(--verde-oscuro);
}

Aqu铆 mi reto!
.

Aqu铆 mi soluci贸n!

.container {
    display: grid;
    grid-template-columns: 75px 75px 75px;
    grid-template-rows: 75px 75px 75px;
    place-content: center;
}

.item-1 {
    background-color: #ccee3a;
    border-radius: 8px 0px 0px 0px;
}

.item-2 {
    background-color: #71bb05;
    border-radius: 0px 8px 0px 0px;
    grid-column: 2 / 4;
}

.item-3 {
    background-color: #268201;
    grid-column: 1 / 3;
}

.item-4 {
    background-color: #ccee3a;
}

.item-5 {
    background-color: #ccee3a;
    border-radius: 0px 0px 0px 8px;
}

.item-6 {
    background-color: #71bb05;
}
.item-7 {
    background-color: #268201;
    border-radius: 0px 0px 8px 0px;
}

Reto 馃槂

Reto #3 superado 馃槑


me ajust茅 a lo necesario aunque no fue necesario areas para la imagen
https://codepen.io/xsrpm/pen/abyLprq

HTML

  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
  </div>

CSS

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

.container {
    display: grid;
    height: 600px;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    border: 5px solid black; 
    background-color: blanchedalmond;
    place-content: center;
}
  
  .item {
    font-size: 3rem;
  }

  .item1 {
    background-color: greenyellow;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .item2 {
    background-color: rgb(118, 175, 33);
    grid-column-start: 2;
    grid-column-end: 4;
  }

  .item3 {
    background-color: green;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .item4 {
    background-color: greenyellow;
    grid-column-start: 3;
    grid-column-end: 4;
  }

  .item5 {
    background-color: greenyellow;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .item6 {
    background-color: rgb(118, 175, 33);
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .item7 {
    background-color: green;
    grid-column-start: 3;
    grid-column-end: 4;
  }

Soluci贸n al reto :

.contenedor {
    width: 100%;
    height: 600px;
    background-color: white;
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    grid-auto-rows: 150px;
    grid-template-areas: 
    "area1 area2 area2"
    "area3 area3 area4"
    "area5 area6 area7";

}
.item {
    font-size: 3rem;
    border: 2px solid gray;
}
.item-1 {
    background-color: greenyellow;
    grid-area: area1;

}
.item-2 {
    background-color: rgb(93, 160, 76);
    grid-area: area2;
    
}
.item-3 {
    background-color: rgb(93, 160, 76);
    grid-area: area2;
}
.item-4 {
    background-color: green;
    grid-area: area3;
}
.item-5 {
    background-color:  green;
    grid-area: area3;
}
.item-6 {
    background-color:  greenyellow;
    grid-area: area4;
}
.item-7 {
    background-color:  greenyellow;
    grid-area: area5;
}
.item-8 {
    background-color:  rgb(93, 160, 76);
    grid-area: area6;
}
.item-9 {
    background-color: green;
    grid-area: area7;
}

Soluci贸n del reto:

:root{
    --lime-green: #ccee3a;
    --light-green: #71bb05;
    --dark-green: #268201;
}

.container {
    padding-left: 20px;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-rows: 100px 100px 100px;
    height: 400px;
    place-content: center;
    grid-template-areas:
        "one two two"
        "three three four"
        "five six seven"
    ;
}

.container__1 {
    background-color: var(--lime-green);
    grid-area: one;
}

.container__2{
    background-color: var(--light-green);
    grid-area: two;
}

.container__3{
    background-color: var(--dark-green);
    grid-area: three;
}

.container__4{
    background-color: var(--lime-green);
    grid-area: four;
}

.container__5{
    background-color: var(--lime-green);
    grid-area: five;
}


.container__6{
    background-color: var(--light-green);
    grid-area: six;
}
.container__7{ 
    background-color: var(--dark-green);
    grid-area: seven;
}
![](https://res.cloudinary.com/piedriz/image/upload/v1635401423/RetoGrid_dbmbcu.png)

  

.contenedor{
    border: 5px solid #e1bee7;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    place-content: center;
}

.item{
    font-size: 4rem;
}

.item-1{
    background-color: #9EEC25;
    grid-area: 1/1 / 1/2;

}

.item-2{
    background-color: #95BB5A;
    grid-area: 1/2 / 1/4;
}

.item-3{
    background-color: #517716;
    grid-area: 2/1 / 2/3;
}

.item-4{
    background-color: #9EEC25;
    grid-area: 2/3 / 2/4;
}

.item-5{
    background-color: #9EEC25;
    grid-area: 3/1 / 3/2;
}

.item-6{
    background-color: #95BB5A;
    grid-area: 3/2 / 3/3;
}

.item-7{
    background-color: #517716;
    grid-area: 3/3 / 3/4;
}

La traducci贸n del shortcode 鈥済rid-area鈥 ser铆a as铆:

.item-3 {
    // ...
    grid-area: 2 / 2 / 4 / 4;
        grid-row-start: 2;
        grid-column-start: 2;
        grid-row-end: 4;
        grid-column-end: 4;
}

Reto cumplido, me hab铆an quedado algunas dudas en cursos pasados, pero aqu铆 ya aterrice bien los conceptos de posicionamiento.

Soluci贸n del tercer reto:

<!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="reto-3.css">
    <title>Document</title>
</head>
<body>
    <div class="contenedor">
        <div class="item item-1"><p>馃</p></div>
        <div class="item item-2"><p>馃崏</p></div>
        <div class="item item-3"><p>馃崑</p></div>
        <div class="item item-4"><p>馃崗</p></div>
        <div class="item item-5"><p>馃崘</p></div>
        <div class="item item-6"><p>馃</p></div>
        <div class="item item-7"><p>馃</p></div>
    </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}
.contenedor{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;   
    gap: 4px;
    place-content: center;
}
.item{
    border: 5px solid seagreen;
    border-radius: 10px;
    font-size: 2rem;
    display: grid;
    place-content: center;
}
.item-2{
    grid-column: 2/4;
}
.item-3{
    grid-column: 1/3;
}
.item:nth-child(1), .item:nth-child(4), .item:nth-child(5){
    background-color: #b9f066;
}
.item:nth-child(2), .item:nth-child(6){
    background-color: lightgreen;
}
.item:nth-child(3), .item:nth-child(7){
    background-color: darkgreen;
}

realizado:

Pude!!!

As铆 yo


    <div class="ejercicio-cuatro">
        <div class="ej4 item1 ej4A">A</div>
        <div class="ej4 item2 ej4B">B</div>
        <div class="ej4 item3 ej4C">C</div>
        <div class="ej4 item1 ej4D">D</div>
        <div class="ej4 item2 ej4E">E</div>
        <div class="ej4 item3 ej4F">F</div>
        <div class="ej4 item1 ej4G">G</div>
    </div>

CSS

.ejercicio-cuatro {
    margin-top: 100px;
    display: grid;
    grid-template-columns: 100px 100px 100px ;
    grid-template-rows: 100px 100px 100px ;
    gap: 10px;
    justify-content: center;
    margin-bottom: 100px;
}
.ej4 {
    color: white; 
    padding: 10px;
    font-size: larger;
    font-weight: bolder;
}
.ej4B {
    grid-column: 2 / 4;
}
.ej4C {
    grid-column: 1 / 3;
}
.ej4G {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
.contenedor { 
 background-color: white;
 display: grid;
 grid-template-columns: 150px 150px 150px;
 grid-template-rows: 75px 75px 75px;
 grid-template-areas:
 "uno dos dos"
 "tres tres cuatro"
 "cinco seis siete";
 place-content: center;
}

.item {
 font-size: 4.0rem;
}

.item-1 {
 background-color: #89d631;
 grid-area: uno;
}
.item-2 {
 background-color: #5ab507;
 grid-area: dos;
}
.item-3 {
 background-color: #72cb10;
 grid-area: tres;
}
.item-4 {
 background-color: #a9e159;
 grid-area: cuatro;
}
.item-5 {
 background-color: #c7eb7a;
 grid-area: cinco;
}
.item-6 {
 background-color: #66c00b;
 grid-area: seis;
}
.item-7 {
 background-color: green;
 grid-area: siete;
}

<code>


El m铆o quedo as铆:

Atajo usando repeat

Podemos usar repeat para crear la cantidad de filas o columnas que deseamos. Esto tiene la siguiente sintaxis repeat( n掳 deseado, tama帽o) Ejemplo para crear 3 columnas de 200px:

grid-template-columns: repeat(3, 200px)


Hola gente, les comparto mi soluci贸n al reto con mi c贸digo. 驴el reto tiene alguna solucin recomendada basados en las buenas practicas?

.container{
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px 200px;
    grid-template-areas:
    "logo header header"
    "side side main"
    "option1 option2 option3";
    place-content: center;
}

div{
    font-size: 4rem;
}
.item-1{
    border: 5px solid #f8bbd0;
    background-color: #ffeeff;
    grid-area: logo;
    
}
.item-2{
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
    grid-area: header;    
}
.item-3{
    border: 5px solid #b2ebf2;
    background-color: #e5ffff;
    grid-area: side;
}
.item-4{
    border: 5px solid #b2ebf2;
    background-color: #e5ffff;
    grid-area: main;
}
.item-5{
    border: 5px solid #b2ebf2;
    background-color: #b2f5f5;
    grid-area: option1;
}
.item-6{
    border: 5px solid #b2ebf2;
    background-color: #64dada;
    grid-area: option2;
}
.item-7{
    border: 5px solid #b2ebf2;
    background-color: #197a7a;
    grid-area: option3;
}

Asi lo hice yo, aunque vi uno que logro hacerlo con menos codigo e igual me gusto.

.contenedor {
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 200px 200px 200px;
            grid-template-areas:
            "f1 f2 f2"
            "f3 f3 f4"
            "f5 f6 f7 ";
            place-content: center;
        }
        img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            object-fit: cover;
        }
        .f1 {
            grid-area: f1;
        }
        .f2 {
            grid-area: f2;
        }
        .f3 {
            grid-area: f3;
        }
        .f4{
            grid-area: f4;
        }
        .f5 {
            grid-area: f5;
        }
        .f6 {
            grid-area: f6;
        }
        .f7 {
            grid-area: f7;
        }

reto superado!

completado!!!

Ahora usando GRID COLUMN and ROW

:root {
    --green-ligth: #CBEE39;
    --green-medium: #70BC04;
    --green-dark: #258300;
}
.container {
    border: 1px solid #fff;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
    place-content: center;
}
.item-1 {
    border: 1px solid var(--green-ligth);
    background-color: var(--green-ligth);
    grid-column: 1 /2;
}
.item-2 {
    border: 1px solid var(--green-medium);
    background-color: var(--green-medium);
    grid-column: 2 / 4;
}
.item-3 {
    border: 1px solid var(--green-dark);
    background-color: var(--green-dark);
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}
.item-4 {
    border: 1px solid var(--green-ligth);
    background-color: var(--green-ligth);
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
.item-5 {
    border: 1px solid var(--green-ligth);
    background-color: var(--green-ligth);
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
.item-6 {
    border: 1px solid var(--green-medium);
    background-color: var(--green-medium);
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}
.item-7 {
    border: 1px solid var(--green-dark);
    background-color: var(--green-dark);
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

GRID AREA

:root {
    --green-ligth: #CBEE39;
    --green-medium: #70BC04;
    --green-dark: #258300;
}
.container {
    border: 1px solid #fff;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
    grid-template-areas: 
        "one two two"
        "three three four"
        "five six seven";
    place-content: center;
}
.item-1 {
    border: 1px solid var(--green-ligth);
    background-color: var(--green-ligth);
    grid-area: one;
}
.item-2 {
    border: 1px solid var(--green-medium);
    background-color: var(--green-medium);
    grid-area: two;
}
.item-3 {
    border: 1px solid var(--green-dark);
    background-color: var(--green-dark);
    grid-area: three;
}
.item-4 {
    border: 1px solid var(--green-ligth);
    background-color: var(--green-ligth);
    grid-area: four;
}
.item-5 {
    border: 1px solid var(--green-ligth);
    background-color: var(--green-ligth);
    grid-area: five;
}
.item-6 {
    border: 1px solid var(--green-medium);
    background-color: var(--green-medium);
    grid-template-columns: six;
}
.item-7 {
    border: 1px solid var(--green-dark);
    background-color: var(--green-dark);
    grid-area: seven;
}