Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Propiedades del contenedor

3/13
Recursos

Aportes 383

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

les recomiendo este juego ,en donde practicaran la escritura de codigo css grid, es una versión similar a la de Flexbox Froggy
https://flexboxfroggy.com/#es

Código Emmet para generar el contenedor y items:

div.contenedor>(div.item{$}*6)

Aqui el reto

Apuntes de la clase

**Propiedades del contenedor grid: **
*Display: Grid
*Grid-template
*Gaps
*Grid-auto


Para comenzar a usar grillas es necesario colocar en CSS al

contenedor padre:
display: grid;


grid-template-colums: indica cuantas columnas va a tener y

de que ancho va a ser cada columna
grid-template-rows: indica cuantas filas va a tener y de que

altura va a ser cada fila

Ejemplo, para crear 3 columnas (cada uno de diferentes

tamaño):
grid-template-colums: 100px 200px 300px;
Nota: Si en tu contenedor hay 4 o más items, grid-template-

columns te creará automáticamente 1 nueva fila y comenzará a

llenarla, y pondrá cada fila en 3 columnas

Además, también podemos colocar ambos tipos de grid-template
Ejemplo:
grid-template-columns: 100px 200px 300px;
grid-template-rows: 150px 250px;


Otra forma de colocar los tamaños de las filas y columnas, sería

usar grid-auto
Esta propiedad define el tamaño de cualquier fila o columna que

se crea.
Existe grid-auto-rows; grid-auto-columns; **grid-auto-

flow**

Ejemplo:
grid-auto-rows: 150px;
*Esto hara que todas tus filas siempre tenga una altura de

150px.

grid-auto-flow: Modifica cómo se está llenando nuestra grilla.

Por defecto está el row, ya que cuando los elementos no caben

en lo que hemos definido, lo que hace es crear mas filas nuevas

grid-auto-flow: dense; : Si hay un espacio vacío en la grilla, lo

que va a hacer es poner los elementos allí, en vez de seguir

poniéndolos en filas y columnas
grid-auto-flow: column; :Crea nuevas columnas, en vez de

nuevas filas


Para definir espacios entre filas y/o columnas
row-gap: crea un espacio solo entre filas (no se crea un

espacio entre una fila y el borde de su contenedor)
column-gap: se crea un espacio solo entre sus columnas
gap: una combinación entre row-gap y column-gap (crea un

espacio entre filas y entre columnas con el mismo tamaño puesto

en CSS)

Hola! Esta clase me costó mucho entender la diferencia entre grid-template y grid-auto. Afortunadamente, después de revisar algunos sitios web encontré la respuesta que me servía.

En resumen, en display grid existen una especie de celdas explícitas y celdas implícitas. Las celdas explícitas son las que tú controlas con grid-template, y nacen una vez aplicas esta propiedad en tu código. Todas las celdas que abarques con grid-template, serán celdas explícitas.

Por otro lado, las implicitas se controlan con grid-auto. Las celdas implícitas son todas aquellas que no se abarcan con el grid-template de antes. Por ejemplo:

div {
	display: grid;
	grid-template-columns: 300px 300px; /* Sólo aplica a dos*/
	grid-auto-columns: 50px;
	grid-auto-flow: column;
}

Supongamos que posees 6 divs. Al aplicar este código, tendrás una sola fila de divs con 6 columnas. Las primeras 2 tendrán un tamaño de 300px, ya que ese es el valor que le está asignando la propiedad grid-template-columns, sinedo las primeras 2 celdas las celdas explícitas. mientras que las otras 4 columnas medirán 50px, que son las celdas restantes y por lo tanto las celdas implícitas.

Espero que esto de las celdas explícitas e implícitas les ayude a comprender la diferencia, al menos yo no pude entender sin saber esto. Aquí les dejo el link de la página por si quieren echarle un vistazo (se los recomiendo).

Costó un poco pero la clave es el grid-auto-flow

Propiedades del Contenedor

  • Display Grid

  • Grid-template

  • Gaps

  • Grid-Auto

•Display grid: para decirle al contenedor que tenga esa propiedad y así aplicarle estilos de grid

•Grid-template: define cuantas y de qué tamaño son las filas o columnas

•Gaps: el espacio entre cada celda

•Grid-auto: aplica el cambio para todas las columnas o filas

.contenedor {
    border: 5px solid #e1bee7 ;
    background-color: #fff1ff;   

    /*Comvertir contenedor en un grid*/
    display: grid;

    /* ||Grid template coluimns y grid template rows*/
    grid-template-column: 150px 150px 150px;
    /*Le dice a la grilla que cuantas columns va a tener y de que ancho va ser */

    /* || GRIT TEMPLATE ROWS  */
    grid-template-rows: 150px 250px; 
    /* Lo agregan altura a las grillas.. en este caso contamos con dos lineas*/

    /* || Grid auto rows y grid auto colum*/
    grid-auto-rows: 150px; 
    /* defina el tamaño que va a tener cualquier fila o comuna que se cree */

    grid-auto-columns: 150px;
    /* nuestras columnas se crearan con un ancho de x*/


    /* || Grid auto flow */
    grid-auto-flow: column;
    /* lo que va hacer es crear nuevas columnas en ves de crear nuevas filas */

    /* GAP */

    row-gap: 20px;
    /* lo que vamos a definir es el tamaño de la brecha que deve tener */
    /* ->Algo a tener en cuenta es que esta fila se crea solo al borde de su grilla , no al borde de su contenedor. */

    column-gap: 20px;
    /* crea espacio en la columna un espacio */

    gap: 20px;
    /*si queremos que el espaciado ocurra tanto entre filas como en las columnas*/

}

RETO!!!

HTML CODE

<<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet"  href="style.css">
  <title>Document</title>
</head>
<body>
  <div class="contenedor">
    <div class="item item1"><p class="container-text1">1</p></div>
    <div class="item item2"><p class="container-text1">2</p></div>
    <div class="item item3"><p class="container-text2">3</p></div>
    <div class="item item4"><p class="container-text1">4</p></div>
    <div class="item item5"><p class="container-text1">5</p></div>
    <div class="item item6"><p class="container-text2">6</p></div>
</body>
</html>> 

CSS CODE:

<.contenedor{
  display:grid;
  grid-template-rows:100px 100px 100px;
  grid-template-columns:100px 100px;
  grid-auto-flow: column;
  gap: 20px;
  text-align:center;
}

.item{
  position:relative;
}

.item1, .item4{
  background-color: #b5de4b;
}
.item2, .item5{
  background-color: #77c00b;
}
.item3, .item6{
  background-color: #369513;
}

.item .container-text1{
  background-color: #369513;
}

.item .container-text2{
  background-color: #194907;
}

.item p{
  font-size: 30px;
  font-weight: bold;
  color: white;
  width: 25px;
  margin:0;
  position: absolute;
  bottom: 0;
  right: 0;
}
> 

RESULTADO:

Para posicionar los numeros en la esquina inferior, primero metí los numeros en etiquetas span y luego use flexbox.

Hola Comunidad 😄
Estos fueron los artículos que utilicé para estudiar y practicar un poco más acerca de los conceptos a la clase y otros que se relacionan:

Casi me pierdo en ese poquito, lo importante es hacerlo para entender como funciona cada propiedad

vamos muy bien con la curva de aprendizaje del curso. La teoria justa y necesaria, sin mas esperas al códido y usando el inspector para explicar los detalles visualmente. Me leyeron la mente.

Reto 😊


HTML

CSS

código CSS del reto¡

.contenedor{
  border: 5px solid #e1bee7;
  background-color: #fff1ff;
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-auto-columns: 1fr 1fr;
  grid-auto-flow: column;
  gap:20px;

}

.item{
  border: 5px solid #00bcd4;
  font-size: 4rem;

}

Mi diseño y su código XD
``
.contenedor{
border:3px solid #000;
background-color: rgb(2, 53, 2);
display: grid;
grid-template-rows: 150px 150px 150px;
grid-auto-columns: 150px;
grid-auto-flow:column;
row-gap: 20px;
column-gap: 20px;
}
.item{
position: relative;
border: 3px solid rgb(63, 255, 5);
background-color: rgb(20, 148, 16);
font-size: 4rem;

}
.numero{
position: absolute;
bottom:0;
right: 0%;
color: white;
}

Me parece que esta clase tendria que ir antes.

Mi solución al reto fue la siguiente:

Les comparto el HTML

<div class="contenedor">
	<div class="item"><span>1</span></div>
	<div class="item"><span>2</span></div>
	<div class="item"><span>3</span></div>
	<div class="item"><span>4</span></div>
	<div class="item"><span>5</span></div>
	<div class="item"><span>6</span></div>
</div>

Y acá el CSS

.contenedor {
	display: grid;
	grid-template-rows: 200px 200px 200px;
	grid-auto-columns: 200px;
	grid-auto-flow: column;
	gap: 20px;
}

.item {
	position: relative;
	background-color: #add901;
}
.item:nth-child(2),
.item:nth-child(5) {
	background-color: #71bb05;
}
.item:nth-child(3),
.item:nth-child(6) {
	background-color: #268201;
}

.item span {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 4rem;
	font-weight: bold;
	color: #ffffff;
	background-color: #248000;
}
.item:nth-child(3) span,
.item:nth-child(6) span {
	background-color: #0f3800;
}

EXCELENTE CLASE 😄

RETO CUMPLIDO 😄

Reto Cumplido

































































XD

Reto completado

<!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="./index.css" />
    <title>RETO 1 - Platzi</title>
  </head>
  <body>
    <div class="container">
      <div class="item">
        <label>1</label>
      </div>
      <div class="item"><label>2</label></div>
      <div class="item"><label>3</label></div>
      <div class="item"><label>4</label></div>
      <div class="item"><label>5</label></div>
      <div class="item"><label>6</label></div>
    </div>
  </body>
</html>
.container {
    display: grid;
    width: fit-content;
    grid-auto-columns: 100px;
    grid-auto-flow: column;
    grid-template-rows: 100px 100px 100px;
    gap: 15px;
}

.item {
    font-size: 2rem;
    background-color: #8fc58f;
    color: #d3eedc;
    border: 3px green solid;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
}

el html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST 1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
     <div class="container">
         <div class="itemPri"><div class="item2"><p class="p"><b>1</b></p></div></div>
         <div class="itemSeg"><div class="item2"><p class="p"><b>2</b></p></div></div>
         <div class="itemTerc"><div class="item3"><p class="p"><b>3</b></p></div></div>
         <div class="itemPri"><div class="item2"><p class="p"><b>4</b></p></div></div>
         <div class="itemSeg"><div class="item2"><p class="p"><b>5</b></p></div></div>
         <div class="itemTerc"><div class="item3"><p class="p"><b>6</b></p></div></div>
     </div>


    
</body>
</html>

el css

.container {
    
    background-color: rgb(255, 255, 255);
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-auto-columns:100px ;
    grid-auto-flow:column;
    gap:20px;

}

.itemPri{
    background-color: #9ed400;      
}

.itemSeg{
    background-color:#3FB700;
}

.itemTerc{
    background-color:#008000;
}

.item2{
    background-color:#007F00;
    width: 30px;
    height:40px;
    margin-top:60px;
    margin-left:69px;
        
}

.item3{
    background-color:#003800;
    width: 30px;
    height:40px;
    margin-top:60px;
    margin-left:69px;    
}

.p{
    font-size:2rem;
    text-align:center;
    color:white;
    padding:2px;   
}

ESTRUCTURA HTML
<div class=“contenedor”>
<div class=“item1”><span class=“fila1”>1</span></div>
<div class=“item2”><span class=“fila2”>2</span></div>
<div class=“item3”><span class=“fila3”>3</span></div>
<div class=“item4”><span class=“fila1”>4</span></div>
<div class=“item5”><span class=“fila2”></span></div>
<div class=“item6”><span class=“fila3”>6</span></div>
</div>
</div>

ESTILOS CSS
.contenedor{
display: grid;
grid-template-rows: 100px 100px 100px;
grid-auto-columns: 100px 100px;
grid-auto-flow: column;
gap: 20px;
}
.item1, .item2, .item3, .item4, .item5, .item6{
border-radius: 0.25rem;
font-size: 2.5rem;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display: grid;
justify-items: end;
align-items:end;
color: rgb(255, 255, 255);
}
.item1, .item4{
background-color:#AAC920;
}
.item2, .item5{
background-color:#71B62B;
}
.item3, .item6{
background-color: #268435;
}
.fila1{
background-color:green;
border-radius: 0 0 0.25rem 0;
height:40px;
width: 40px;
text-align: center;
}
.fila2{
background-color: green;
border-radius: 0 0 0.25rem 0;
height:40px;
width: 40px;
text-align: center;
}
.fila3{
background-color: rgb(9, 78, 14);
border-radius: 0 0 0.25rem 0;
height:40px;
width: 40px;
text-align: center;
}


reto cumplido 😃

<code> 
.container {    
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-auto-columns: 100px;
    grid-auto-flow: column;
    gap: 20px;
}

.item {    
    background-color: greenyellow ;
    font-size: 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: white;
}

.item:nth-child(2), .item:nth-child(5){
    background-color: rgb(0, 136, 52)
}

.item:nth-child(3), .item:nth-child(6){
    background-color: green;
}

Reto cumplido 😃

HTML

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

CSS

.contenedor {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  gap: 20px;
}

.item {
  border: 5px solid black;
  font-size: 4rem;
}

.item-green {
  background-color: rgb(134, 253, 15);
}

.item-green2 {
  background-color: rgb(13, 211, 13);
}

.item-green3 {
  background-color: rgb(18, 94, 18);
}
<body>
   <div class="contenedor">
       <div class="item">1</div>
       <div class="item">2</div>
       <div class="item">3</div>
       <div class="item">4</div>
       <div class="item">5</div>
       <div class="item">6</div>

   </div> 
</body>

.contenedor {
  border: 5px solid #94f07d;
  background-color: #1db124;
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px;
  grid-auto-flow: column;
  gap: 20px;
}

.item {
  border: 5px solid #94f07d;
  font-size: 4rem;
}

El reto.

Aquí esta el reto!
.

El reto

Reto:

Dejo el reto de esta clase terminado, utilicé lo aprendido en esta clase por ejemplo la propiedad grid-auto-colums para seguir el orden número solicitado en la actividad y tambien me apoyé con flexbox para colocar el número en la parte inferior derecha, les dejo mi código, si tienen alguna observación me gustaría saber en que puedo mejorar:

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">
    <link rel="stylesheet" href="./style.css">
    <title>Reto1</title>
</head>
<body>
    <main class="contenedor">
        <div class="item item-1"><p class="number-1">1</p></div>
        <div class="item item-2"><p class="number-2">2</p></div>
        <div class="item item-3"><p class="number-3">3</p></div>
        <div class="item item-4"><p class="number-4">4</p></div>
        <div class="item item-5"><p class="number-5">5</p></div>
        <div class="item item-6"><p class="number-6">6</p></div>
    </main>
    
</body>
</html>

Código CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.contenedor {
     background-color: white;
     display: grid;
     grid-auto-columns: 150px;
     grid-template-rows: 150px 150px 150px;
     grid-auto-flow: column;
     gap: 20px;
}
.item  {
    display: flex;
    align-items: flex-end;
    justify-content: end;
}
.item-1 {
    background-color: #add901;
}
.item-2 {
    background-color: #71bb05;
}
.item-3 {
    background-color: #268201;
}
.item-4 {
    background-color: #add901;
}
.item-5 {
    background-color: #71bb05;
}
.item-6 {
    background-color: #268201;
}
.number-1 {
    color: white;
    font-size: 45px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #218400;
    width: 35px;
    height: 50px;
    padding: 3px;
}
.number-2 {
    color: white;
    font-size: 45px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #248300;
    width: 35px;
    height: 50px;
    padding: 3px;
}
.number-3 {
    color: white;
    font-size: 45px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #113a03;
    width: 35px;
    height: 50px;
    padding: 3px;
}
.number-4 {
    color: white;
    font-size: 45px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #248300;
    width: 35px;
    height: 50px;
    padding: 3px;
}
.number-5 {
    color: white;
    font-size: 45px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #248300;
    width: 35px;
    height: 50px;
    padding: 3px;
}
.number-6 {
    color: white;
    font-size: 45px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #123a00;
    width: 35px;
    height: 50px;
    padding: 3px;
} 

<body{
    background:brown;
}

.contanier{
    border: 5px solid rgb(146, 124, 25);
    background: rgb(192, 15, 15);
    display: grid;
    grid-template-rows:150px 150px 150px;
    grid-auto-columns: 150px;
    grid-auto-flow: column;
    gap: 15px;
    justify-content: center;

}

.item{
    border: 5px solid  rgb(146, 124, 25);
    font-size: 4rem;
    text-align: center;
    vertical-align:sub;
    color: aliceblue;
}

Listo, jalisco:

<!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="container">
        <div class="item v1"><span>1</span></div>
        <div class="item v2"><span>2</span></div>
        <div class="item v3"><span>3</span></div>
        <div class="item v4"><span>4</span></div>
        <div class="item v5"><span>5</span></div>
        <div class="item v6"><span>6</span></div>
    </div>
</body>
</html>


*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html{
    font-family: Arial, Helvetica, sans-serif;
}
.container{
    border: 1px solid rgb(231, 231, 231);
    background-color: rgb(241, 241, 241);
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.16);
    display: grid;
    grid-template-rows: 200px 200px 200px;
    grid-template-columns: 200px 200px;
    grid-auto-flow: column;
    gap: 20px;
    place-content: center;
    margin-top: 100px;
    padding: 20px 0;
}
.item{
    position: relative;
    border-radius: 20px;
    box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.16);
    transition-duration: 200ms;
}
.item:hover{
    box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.36);
    transform:rotate(5deg);
    transition-duration: 200ms;
}
.item span{
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 60px;
    padding: 1px 15px;
    text-align: center;
    vertical-align: center;
    color: white;
    font-weight: 600;
    border-radius: 0 0 20px 0px;
}
.item.v1, .item.v4{
    background-color:#add901;
}
.item.v2, .item.v5{
    background-color:#71bb05;
}
.item.v3, .item.v6{
    background-color:#268201;
}
.item.v1 span, .item.v4 span{
    background-color: #248000;
}
.item.v2 span, .item.v5 span{
    background-color: #238300;
}
.item.v3 span, .item.v6 span{
    background-color: #133a00;
}

Resultado:

CSS:

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

body:

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

Página para conseguir paletas de colores:

https://colorhunt.co/

Así me salió el reto.
Intenté realizarlo lo mas parecido posible a la imágen de ejemplo.

<!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>
    <style>
      .container {
        display: grid;
        grid-template-columns: 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-auto-flow: column;
        gap: 20px;
      }
      .item {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
      .item:nth-child(1),
      .item:nth-child(4) {
        background-color: #acda0a;
      }
      .item:nth-child(2),
      .item:nth-child(5) {
        background-color: #70bc0c;
      }
      .item:nth-child(3),
      .item:nth-child(6) {
        background-color: #258305;
      }
      .item span {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        padding: 0 10px;
        font-size: 64px;
        color: white;
      }
      .item span:nth-child(1),
      .item span:nth-child(4) {
        background-color: #248007;
      }
      .item:nth-child(3) span,
      .item:nth-child(6) span {
        background-color: #133a07;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"><span>1</span></div>
      <div class="item"><span>2</span></div>
      <div class="item"><span>3</span></div>
      <div class="item"><span>4</span></div>
      <div class="item"><span>5</span></div>
      <div class="item"><span>6</span></div>
    </div>
  </body>
</html>

RETO

HTML

CSS

Aquí esta el reto 😃

Lo hice lo mas identico que pude al ejemplo que nos dieron.

He aqui el codigo que use.

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 Clase 1</title>
  <link rel="stylesheet" href="./styleReto1.css">
</head>
<body>
  <div class="container">
    <div class="item">
      <p>1</p>
    </div>
    <div class="item">
      <p>2</p>
    </div>
    <div class="item">
      <p>3</p>
    </div>
    <div class="item">
      <p>4</p>
    </div>
    <div class="item">
      <p>5</p>
    </div>
    <div class="item">
      <p>6</p>
    </div>
  </div>
</body>
</html>

CSS

* { 
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html { 
  font-size: 62.5%;
}
.container { 
  margin: 20px 20px 0 0;
  display: grid;
  background: white;
  justify-content: flex-end;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: column; /* este es como el flex direccion, aqui le decimos que vaya en columnas y no en row */
  gap: 20px;
}
.item { 
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: center;
  font-size: 3rem;
  color: white;
  font-weight: bold;
}
.item p { 
  width: 2.5rem;
  height: 3.5rem;
}
.item:nth-child(3n + 1) { /* aqui se toma el 1er item + 3 (osea le dara color al item 1 y al 4 */
  background: #add901;
}
.item:nth-child(3n + 2) { 
  background: #71bb05;
}
.item:nth-child(3n + 3) { 
  background: #268201;
}
.item:nth-child(3n + 1) p { 
  background: #268201;
}
.item:nth-child(3n + 2) p { 
  background: #2a8406;
}
.item:nth-child(3n + 3) p { 
  background: #113700;
}

Les comparto la solución del reto:

* {
    margin: 0;
    padding: 0;
}

.contenedor {
    width: 100%;
    height: 500px;
    font-size: 2rem;
    background: chartreuse;
    display: grid;
    grid-template-columns: repeat(2 , 150px);
    grid-auto-rows: 150px;
    gap: 20px;
}

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

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

Aqui mi solucion al reto de la clase

.contenedor{
    width: 400px;
    height: 600px;
    padding: 20px;
    border: 5px solid green;
    background-color: #fff1ff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-auto-flow: column;
    gap: 20px;
}

.item{
    background-color: greenyellow;
    display: flex;
    justify-content: flex-end;
}

.item div{
    font-size: 4rem;
    width: 50px;
    height: 50px;
    background-color: green;
    color: white;
    text-align: center;
    align-self: end;
}

Junto a una captura

.contenedor{
    border: 5px solid #e1bee7;
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-auto-columns: 100px;
    grid-auto-flow: column;
    gap: 20px;
}

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

Reto cumplido. Se me complico un poco entender el por que del cambio de ordenamiento pero finalmente me ilumino el universo. jaja

Mi reto:

Esta clase va primero que la anterior. Revisen esta y vuelvan nuevamente a la anterior para que todos los conceptos queden claros

Listo! Reto 1 cumplido

Aqui el reto 😄

Code:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
.contenedor {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  gap: 20px;
  border: 5px solid #e1bee7;
  background-color: #fff1ff;
}
.item {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-size: 4rem;
  background-color: green;
}
.ListItem{
    background-color: #add901;
}

.ListItem1{
    background-color: #71bb05;
}

.ListItem2{
    background-color: #268201;
}

div{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-content: center;
}

.ListItem__Value{
    font-size: 50px;
}
	import React from "react";
import "./ListItem.css";

function ListItem(props){
    let classn;
    if(props.value==1 || props.value==4){
        classn="ListItem";
    }else if(props.value==2 || props.value==5){
        classn="ListItem1";
    }
    else{
        classn="ListItem2"; 
    }
    return(
        <div 
        className={classn}
        >
            <p className="ListItem__Value">
                {props.value}
            </p>
        </div>
    );
}

export {ListItem};

Lo hice de esta menera

El HTML

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

EL CSS

.container{
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-auto-columns: 100px;
    grid-auto-flow: column;
    gap: 20px;
    place-content: center;
}

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

.item:nth-child(2),
.item:nth-child(5){
    background-color:#71bb05;
    
}

.item:nth-child(3),
.item:nth-child(6){
    background-color:#268201;
    
}

.item1 span,
.item4 span{
    background-color: #248104;
}

.item2 span,
.item5 span{
    background-color: #258404;
}

.item3 span,
.item6 span{
    background-color: #133a00;
}
span{
    font-size: 2rem;
    color: white;
}

EL RESULTADO:

Reto cumplido!

Código

.contenedor {
border: 5px solid blue;
background-color: gray;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-auto-columns: 50px;
grid-auto-flow: column;
gap: 20px;
}
.item {
border: 5px solid black;
}

.contenedor {
  border: 5px solid #e1bee7;
  background-color: #fff1ff;
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: column;
  gap: 20px;
  place-items: end;
}

.item {
  border: 5px solid #00bcd4;
  font-size: 2rem;
}

Me tomo bastante tiempo pero lo hice yo solo al 100%, si bien no tenia gran dificultad hacer esto me llevo bastante tiempo darle los estilos y elegir los colores jaja

Aquí mi resultado 😄

Código HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="contenedor">
    <div class="item">
      <div class="number">1</div>
    </div>
    <div class="item">
      <div class="number">2</div>
    </div>
    <div class="item">
      <div class="number">3</div>
    </div>
    <div class="item">
      <div class="number">4</div>
    </div>
    <div class="item">
      <div class="number">5</div>
    </div>
    <div class="item">
      <div class="number">6</div>
    </div>
  </div>
</body>
</html>

CSS:

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

.item {
  border-radius: 10px;
  font-size: 2rem;
  background-color: #acda0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.item:nth-child(3n + 2){
  background-color: #70bc0c;
}
.item:nth-child(3n + 3){
  background-color: #258305;
}
.item .number{
  color: #258307;
  background-color: white;
  min-height: 50px;
  min-width: 50px;
  padding: 5px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item:nth-child(3n + 2) .number{
  color: #258203;
}
.item:nth-child(3n + 3) .number{
  color: #143906;
}

Me costó mucho terminar el reto y, aunque lo hice, aún no entiendo cómo me salió. ¡Seguiré repitiendo la clase hasta entenderle!

CSS:

.contender {
	display: grid;
	grid-auto-columns: 200px;
	grid-template-rows: 200px 200px 200px;
	grid-auto-flow: column;
}

Les recomiendo mucho este sitio para leer más sobre el CSS Grid. También tiene poster con toda la información para descargar https://css-tricks.com/snippets/css/complete-guide-grid/

Envió reto

Lo logramos amigos!!! les comparto la imagen del resultado y el código que use:

listouuu

Listo reto Completo (no se como compartir imagenes es mi primera vez )

reto completado:

![](

codigo:

.contenedor {
  /* border: 5px solid #e1bee7;
  background-color: #fff1ff; */
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: column;
  place-content: center;
  gap: 20px;
}

.item {
    width: 100px;
    height: 100px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 40px;
    
  display: flex;
  font-size: 1.5rem;
  align-items: flex-end;
  justify-content: flex-end;
}


#one.item {
  background-color: #add901;
}

#two.item {
  background-color: #71bb05;
}
#three.item {
  background-color: #248300;
}

#four.item {
  background-color: #add901;
}

#five.item {
  background-color: #71bb05;
}
#six.item {
  background-color: #268201;
}

span{
    color: #ffff;

    background-color: #1e6103;
}

Reto completado

Aquí mi solución:

grid-template-rows: 150px 150px 150px;
    grid-auto-columns: 150px;
    grid-auto-flow: column;
    gap: 20px;

Aquí les dejo mi reto y mi código

Reto completado

<!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>Grilla</title>
    <link rel="stylesheet" href="/grilla.css">
</head>
<body>
    <!-- Emmet .contenerdor>.item{$}*6 -->
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>
/* RETO GRID */

.container {
    background-color: rgb(199, 221, 240);
    display: grid;
    grid-template-rows: 150px 150px 150px;
    grid-auto-columns: 150px;
    grid-auto-flow: column;
    gap: 20px;
    justify-content: center;
    align-content: center;
    margin: 20px auto;
    height: 600px;
    width: 450px;
}

.item {
    background-color: rgb(173, 255, 47);
    color: rgb(49, 129, 14);
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 9px 15px;
}

.item:nth-child(2), :nth-child(5) { /* Es lo mismo que .item:nth-child(3n+2) */
    background-color: rgb(104, 227, 51);
    color: rgb(61, 180, 10);
}

.item:nth-child(3), :nth-child(6) { /* Es lo mismo que .item:nth-child(3n+3) */
    background-color: rgb(62, 164, 18);
    color: rgb(162, 255, 22);
}

Mi solución

.container{
    border: 3px solid rgb(132, 225, 249);
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-auto-columns: 100px 100px;
    grid-auto-flow: column;
    gap: 20px;
}

.item{
    background-color: rgb(85, 212, 85);
   border: 2px #10c1c1;
   font-size: 2rem;
   color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);

}

Mi solución al reto

.contenedor {
    border: 5px solid #f86363;
    background-color: #f3c1c1;
    display: grid;
    grid-template-rows: 150px 150px 150px;
    grid-template-columns: 150px 150px;
    gap: 20px;
    grid-auto-flow: column;
}

.item {
    border: 5px solid #7757eb;
    background-color: #9d87e9;
    color: white;
    font-size: 4rem;
}

Resumen de la clase y reto con anotaciones en codepen
https://codepen.io/aloayzab88/pen/PoQmpNg

Resultado del Reto #1

.contenedor {
    background-color: palegoldenrod;
    display: grid;
    grid-template-rows: 150px 150px 150px;
    grid-auto-columns: 200px;
    grid-auto-flow: column;
    gap: 20px;
}
.item {
    font-size: 50px;
    border: 5px solid #5fc077;
    color: black;
    background-color: #008020;
}

Y el HTML es el mismo de la clase anterior.

Reto cumplido

.contenedor {
    display: grid;
    grid-template-rows: 200px 200px 200px;
    grid-auto-columns: 200px;
    grid-auto-flow: column;
    gap: 20px;
    border: 5px solid #e1bee7;
    background-color: #fff1ff;
}

Reto superado pero me demore bastante

Lo logre!

.contenedor {
    border: 5px solid violet;
    display: grid;
    grid-template-rows: 150px 150px 150px;
    grid-auto-columns: 150px;
    grid-auto-flow: column;
    gap: 20px;
}

.item {
    border: 5px solid cyan;
    font-size: 4rem;
    background-color: blue;
    color: aliceblue;
    font-family: sans-serif;
    text-align: center;
    padding: 35px;
}

codigo HTML:

<main>
        <div class="contenedor">
            <div class="item"><span>1</span></div>
            <div class="item"><span>2</span></div>
            <div class="item"><span>3</span></div>
            <div class="item"><span>4</span></div>
            <div class="item"><span>5</span></div>
            <div class="item"><span>6</span></div>
        </div>
    </main>

codigo CSS:

.contenedor{
    border: 5px solid #224045;
    display: grid;
    grid-template-rows:200px 200px 200px;
    /* grid-template-rows: 150px 200px; */
    grid-auto-columns: 200px;
    grid-auto-flow: column;
    gap: 20px;
}

.item{
    border: 5px solid #228004;
    font-size: 4rem;
    background-color: #add901;
    position: relative;
}

.item span{
    background-color: #228004;
    color: white;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 8px;
}

Solución 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-1.css">
    <title>Document</title>
</head>
<body>
    <div class="contenedor">
        <div class="item"><p class="paragraph">1</p></div>
        <div class="item"><p class="paragraph">2</p></div>
        <div class="item"><p class="paragraph">3</p></div>
        <div class="item"><p class="paragraph">4</p></div>
        <div class="item"><p class="paragraph">5</p></div>
        <div class="item"><p class="paragraph">6</p></div>
    </div>
</body>
</html>
.contenedor{
    display: grid;
    grid-template-columns: 150px 150px;
    grid-template-rows: 150px 150px 150px;
    grid-auto-flow: column;
    gap: 20px;
}
.item{
    border: 5px solid black;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.paragraph{
    font-size: 3rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: white;
    background-color: black;
    margin: 0px;
    padding: 3px;
}
.item:nth-child(1), .item:nth-child(4){
    background-color: rgb(176, 240, 79);
}
.item:nth-child(2), .item:nth-child(5){
    background-color: #75ca2b;
}
.item:nth-child(3), .item:nth-child(6){
    background-color: green;
}

¡Hola a todos!

Esta es la solución que di al reto 😄

  • index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
    <title>CSS Grid Challenge</title>
  </head>
  <body>
    <div class="contenedor">
      <div class="zone inchworm">
        <div class="item">1</div>
      </div>
      <div class="zone kiwi">
        <div class="item">2</div>
      </div>
      <div class="zone may-green">
        <div class="last-items">3</div>
      </div>
      <div class="zone inchworm">
        <div class="item">4</div>
      </div>
      <div class="zone kiwi">
        <div class="item">5</div>
      </div>
      <div class="zone may-green">
        <div class="last-items">6</div>
      </div>
    </div>
  </body>
</html>

  • styles.css
html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.contenedor {
  display: grid;
  grid-template-columns: 150px 150px;
  grid-template-rows: 150px 150px 150px;
  grid-auto-flow: column;
  gap: 20px;
}

.zone {
  display: flex;
  justify-content: end;
  align-items: flex-end;
  font-size: 5rem;
  color: white;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

.inchworm {
  background: #baed45;
}

.kiwi {
  background: #86d339;
}

.may-green {
  background: #489d26;
}

div.item {
  background-color: #489d26;
  padding: 0 10px;
}

div.last-items {
  background-color: #1e4a0d;
  padding: 0 10px;
}