Introducción a Grid
¿Qué es CSS Grid Layout?
Conceptos para comenzar
Propiedades de Grid
Propiedades del contenedor
Propiedades de alineación
Propiedades de ubicación
Power ups de Grid
Funciones especiales
Keywords especiales
Proyecto
Proyecto
Hagamos nuestra primera sección
Creando la grilla con área
Armando el listado
Bonus
¿Cómo hacer nuestro proyecto responsivo?
Próximos pasos
Más cursos de CSS Grid
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Propiedades de ubicación
5/13Recursos
Ya conoces las propiedaddes del contenedor y las propiedades de alineación. Vamos ahora a conocer las de ubicación.
Cuáles son las propiedades de ubicación
Imaginemos que tenemos una grilla de 4x4 con sólo dos elementos. Podemos moverlos para que ocupen más espacio que una celda, o estén en una celda distinta a la que deberían estar.
Para las columnas, las propiedades que nos van a ayudar son:
- grid-column-start: con esta propiedad nosotros vamos a decirle al elemento en que línea de columna debe comenzar.
- grid-column-end: con esta propiedad nosotros vamos a decirle al elemento hasta que línea de la columna va a llegar.
- grid-column: es una mezcla de grid-column-start y grid-column-end. Los valores que necesita son el valor inicial y el valor final, estos van separados de un “/” (diagonal).
Para las filas las propiedades son iguales, solo que vamos a trabajar en las filas:
- grid-row-start
- grid-row-end
- grid-row
Además de estas propiedades, tenemos:
- grid-area: con esta propiedad declaramos solo una vez donde va a comenzar tanto en columna como en fila y donde va a terminar tanto en columna como en fila.
Cómo agregar las propiedades de ubicación
Vamos al editor de texto para comprender mejor estos conceptos. Primero creamos un contenedor con tres elementos a los que les agregamos clases para poder aplicar estilos individuales a cada uno.
<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>
En nuestro archivo CSS llamamos al contenedor con su clase y le aplicamos propiedades similares a las que hemos trabajado anteriormente.
Ajustamos el ancho de fuente en 4rem para todas las clases.
Le damos un borde y color de fondo distinto a cada elemento del contenedor para poder diferenciarlo.
.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;
}
.item-1 {
border: 5px solid #f8bbd0;
background-color: #ffeeff;
}
.item-2 {
border: 5px solid #e1bee7;
background-color: #fff1ff;
}
.item-3 {
border: 5px solid #b2ebf2;
background-color: #e5ffff;
}
Item 1
Ahora, editemos el primer elemento para que ocupe todo el ancho de la primera fila. Debe empezar a numerar los elementos de izquierda a derecha.
Mucho ojo, el número no es la columna en sí, sino la línea en que termina la columna. Entonces si queremos que ocupe hasta la tercera celda, tendremos que colocar grid-column-end: 4.
.item-1 {
border: 5px solid #f8bbd0;
background-color: #ffeeff;
grid-column-start: 1;
grid-column-end: 4;
}
Item 2
En este caso queremos que ocupe la primera celda de las filas 2 y 3 dentro de la primera columna. Como la primera fila ya está ocupada, debemos empezar de la fila 2 y terminar en la 4.
grid-row: 2/4
Item 3
El tercer item ocupa tanto filas como columnas, por lo que conviene usar grid-area. El orden en que debemos colocar el valor es: fila y columna en que empieza, fila y columna en que termina.
.item-3 {
border: 5px solid #b2ebf2;
background-color: #e5ffff;
grid-area: 2/2/4/4;
}
¿Existen atajos para usar las propiedades?
Podemos usar grid-template-areas para acomodar todos los elementos con mucha más rapidez. grid-template-areas declaramos areas dentro de la grilla.
Para ello, agregamos la información a la tabla como si fuera dentro de una grilla, de esta manera:
.contenedor {
border: 5px solid #e1bee7;
background-color: white;
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 75px 75px 75px;
grid-template-areas:
"header header header"
"side main main"
"side main main";
place-content: center;
}
Luego, colocamos el nombre de la celda creada anteriormente a cada item.
}
.item-1 {
border: 5px solid #f8bbd0;
background-color: #ffeeff;
grid-area: header;
}
.item-2 {
border: 5px solid #e1bee7;
background-color: #fff1ff;
grid-area: side;
}
Completa este reto
Aprendiste varias formas de llegar a un mismo resultado. Ya sólo te queda jugar para seguir practicando lo aprendido. Pero adivina, te tengo un reto para ello.
Debes recrear la grilla que ves en al siguiente imagen. Estás en la total libertad de usar el método que consideres el mejor o simplemente el que quieras usar. Recuerda que en programación no hay una sola manera de lograr las cosas.
Contribución creada por: José Miguel Ventimilla (Platzi Contributor) con aportes de Josué Ramírez Hernández.
Aportes 682
Preguntas 13
Ordenar por:
Este es mi reto 😃 🐱.
Código
Al fin puedo crear un collage sin paint c’:
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;
practiqué con un teclado ❤️
Creo que el tener retos todas las clases nos ayuda a poder reforzar conocimientos y está bueno,
Iron man 😎
El uso de grid-template-areas es fabuloso.
Todo se hace mucho mas intuitivo.
¿Cómo? ¿Qué haga un pixel art con Grid? 😂
style.css
:root {
--item-w: 64px;
--base: #0db50d;
--light: #8fe38f;
--shadow: #0f800f;
--black: #004500;
--border: #dac76b;
--bg-frame: #753E23;
--shadow-frame: #552f1d;
}
.container {
height: 600px;
border: 40px solid var(--border);
background: radial-gradient(circle, var(--bg-frame) 70%, var(--shadow-frame) 100%);
display: grid;
grid-template-columns:
var(--item-w) var(--item-w) var(--item-w) var(--item-w)
var(--item-w) var(--item-w) var(--item-w) var(--item-w);
grid-template-rows:
var(--item-w) var(--item-w) var(--item-w) var(--item-w)
var(--item-w) var(--item-w) var(--item-w) var(--item-w);
place-content: center;
}
/* long-shadow-1 */
.item-13 {
grid-area: 2/5/4/6;
}
/* long-light */
.item-16 {
grid-area: 2/8/4/9;
}
/* eye 1 */
.item-18 {
grid-area: 3/2/5/4;
}
/* eye 2 */
.item-20 {
grid-area: 3/6/5/8;
}
/* nose */
.item-28 {
grid-area: 5/4/6/6
}
/* long-shadow-2 */
.item-33 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 6;
grid-row-end: 8;
}
/* mouth */
.item-34 {
grid-column: 3/7;
grid-row: 6/8;
}
.item {
background-color: var(--base);
}
.item-1, .item-5, .item-16, .item-29, .item-36, .item-37, .item-44 {
background-color: var(--light);
}
.item-2, .item-8, .item-9, .item-13, .item-30, .item-33, .item-39, .item-46 {
background-color: var(--shadow);
}
.item-18, .item-20, .item-28, .item-34, .item-42, .item-45 {
background-color: var(--black);
}
index.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 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 class="item item-8"></div>
<div class="item item-9"></div>
<div class="item item-10"></div>
<div class="item item-11"></div>
<div class="item item-12"></div>
<div class="item item-13"></div>
<div class="item item-14"></div>
<div class="item item-15"></div>
<div class="item item-16"></div>
<div class="item item-17"></div>
<div class="item item-18"></div>
<div class="item item-19"></div>
<div class="item item-20"></div>
<div class="item item-21"></div>
<div class="item item-22"></div>
<div class="item item-23"></div>
<div class="item item-24"></div>
<div class="item item-25"></div>
<div class="item item-26"></div>
<div class="item item-27"></div>
<div class="item item-28"></div>
<div class="item item-29"></div>
<div class="item item-30"></div>
<div class="item item-31"></div>
<div class="item item-32"></div>
<div class="item item-33"></div>
<div class="item item-34"></div>
<div class="item item-35"></div>
<div class="item item-36"></div>
<div class="item item-37"></div>
<div class="item item-38"></div>
<div class="item item-39"></div>
<div class="item item-40"></div>
<div class="item item-41"></div>
<div class="item item-42"></div>
<div class="item item-43"></div>
<div class="item item-44"></div>
<div class="item item-45"></div>
<div class="item item-46"></div>
<div class="item item-47"></div>
<div class="item item-48"></div>
</div>
</body>
</html>
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;
}
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>
chau flexbox , gracias por nadaaa
Les comparto mi resultado:
Código:
Cumplido con temática de Snoopy 🐶
Se pudiera hacer un comic con esto de las grillas 😄
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;
}
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;
}
Hola este es mi reto c:
Por fin, aqui esta el retiño:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black
}
.container{
width: 500px;
height: 500px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
border-radius: 10px;
}
.container div{
border-radius: 10px;
border: 1px solid black;
}
.item1{
background-color: pink;
}
.item1 img{
width: 100%;
height: 100%;
}
.item2{
background-color: red;
grid-column: 2 / 4;
}
.item2 img{
width: 100%;
height: 100%;
}
.item3{
background-color: yellow;
grid-column: 1 / 3;
}
.item3 img{
width: 100%;
height: 100%;
}
.item4{
background-color: cyan;
}
.item4 img{
width: 100%;
height: 100%;
}
.item5{
background-color: skyblue;
}
.item5 img{
width: 100%;
height: 100%;
}
.item6{
background-color: black;
}
.item6 img{
width: 100%;
height: 100%;
}
.item7{
background-color: orange;
}
.item7 img{
width: 100%;
height: 100%;
}
No es el layout que pedian pero esque luego de ver que hacian sus collage no me pude resistir :3 Anya mi diosa.
comparto el mio:)
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;
}
Html
css
Listo !!
Vi que los demas estan haciendolo con imagenes asi que quise unirme a la onda!!!
¿Como? un logo cuadriculado jajaja
me inspire en los retos que se plantearon algunos compañeros…
me deje llevar ppor la imaginacion
Reto completado!
🔥 Reto Completado 🔥
Jugando con los bloques me di cuenta de que se puede hacer píxel art. aunque es un poco tedioso el resultado es divertido.
CODIGO
:root {
--color-white: #ffffff;
--color-black: #000000;
--color-red: #ff0000;
}
.container {
background-color: greenyellow;
display: grid;
place-content: center;
grid-template-columns: repeat(12, 50px);
grid-auto-rows: 50px;
border: 2px solid black;
font-family: Arial, Helvetica, sans-serif;
}
.items {
/* border: 4px solid black; */
font-size: 0.5rem;
}
.container div:nth-child(1),
.container div:nth-child(45) {
grid-column: 1 / 5;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(2),
.container div:nth-child(46) {
grid-column: 5 / 9;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(3),
.container div:nth-child(47) {
grid-column: 9 / 13;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(4),
.container div:nth-child(40) {
grid-column: 1 / 3;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(5),
.container div:nth-child(41) {
grid-column: 3 / 5;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(6) {
grid-column: 5 / 9;
background-color: var(--color-red);
color: var(--color-white);
}
.container div:nth-child(7),
.container div:nth-child(43) {
grid-column: 9 / 11;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(8),
.container div:nth-child(44) {
grid-column: 11 / 13;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(9),
.container div:nth-child(13) {
grid-row: 3 / 5;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(10),
.container div:nth-child(12) {
grid-row: 3 / 5;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(11) {
grid-area: 3 / 3 / 6 / 11;
background-color: var(--color-red);
color: var(--color-white);
}
.container div:nth-child(14),
.container div:nth-child(17) {
grid-row: 5 / 9;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(15),
.container div:nth-child(16) {
grid-row: 5 / 7;
background-color: var(--color-red);
color: var(--color-white);
}
.container div:nth-child(18) {
grid-column: 3 / 6;
background-color: var(--color-red);
color: var(--color-white);
}
.container div:nth-child(19) {
grid-column: 6 / 8;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(20) {
grid-column: 8 / 11;
background-color: var(--color-red);
color: var(--color-white);
}
.container div:nth-child(21),
.container div:nth-child(23),
.container div:nth-child(25),
.container div:nth-child(27) {
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(22) {
grid-column: 3 / 5;
background-color: var(--color-red);
color: var(--color-white);
}
.container div:nth-child(24) {
grid-area: 7 / 6 / 9 / 8;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(26) {
grid-column: 9 / 11;
background-color: var(--color-red);
color: var(--color-white);
}
.container div:nth-child(28),
.container div:nth-child(31) {
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(29) {
grid-column: 3 / 6;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(30) {
grid-column: 8 / 11;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(32) {
grid-row: 9 / 11;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(33) {
grid-row: 9 / 11;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(34) {
grid-area: 9 / 3 / 11 / 6 ;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(35) {
grid-column: 6 / 8;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(36) {
grid-area: 9 / 8 / 11 / 11 ;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(39) {
grid-column: 6 / 8;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(37) {
grid-area: 9 / 11 / 11 / 12;
background-color: var(--color-black);
color: var(--color-white);
}
.container div:nth-child(38) {
grid-area: 9 / 12 / 11 / 13;
background-color: var(--color-white);
color: var(--color-black);
}
.container div:nth-child(42) {
grid-column: 5 / 9;
background-color: var(--color-white);
color: var(--color-black);
}
Reto cumplido…!
El HTML tiene cada parte que teine el 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">
<title>Location Properties challenge</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="item item-1">🤩Logo</div>
<div class="item item-2">😛header</div>
<div class="item item-3">🙄section-1</div>
<div class="item item-4">😫section-2</div>
<div class="item item-5">😶section-3</div>
<div class="item item-6">🥶section-4</div>
<div class="item item-7">🤑section-5</div>
</div>
</body>
</html>
y aqui en el CSS estan las divisiones con las propiedades para el grid
.container {
border: 7px solid tomato;
background-color: white;
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
grid-template-areas:
"logo header header"
"section-1 section-1 section-2"
"section-3 section-4 section-5";
}
.item {
font-size: 1.6rem;
}
.item-1 {
background-color: chocolate;
grid-area: logo;
}
.item-2 {
background-color: aqua;
grid-area: header;
}
.item-3 {
background-color: aquamarine;
grid-area: section-1;
}
.item-4 {
background-color: blueviolet;
grid-area: section-2;
}
.item-5 {
background-color: cornflowerblue;
grid-area: section-3;
}
.item-6{
background-color: teal;
grid-area: section-4;
}
.item-7{
background-color: springgreen;
grid-area: section-5;
}
Reto cumplido, me habían quedado algunas dudas en cursos pasados, pero aquí ya aterrice bien los conceptos de posicionamiento.
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;
}
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>
Reto con inspirado en otra de mis pasiones
```js
``` ```js
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
background-color: #343334;
display: flex;
justify-content: center;
align-content: center;
padding: 20px;
}
.container {
width: 80vw;
height: auto;
display: grid;
grid-template-columns: 300px 300px 300px;
grid-auto-rows: 200px;
gap: 20px;
grid-template-areas:
"uno dos dos"
"tres tres cuatro"
"sinco seis siete";
}
.item-1{
grid-area: uno;
}
.item-2{
grid-area: dos;
}
.item-3{
grid-area: tres;
}
.item-4{
grid-area: cuatro;
}
.item-5{
grid-area: sinco;
}
.item-6{
grid-area: seis;
}
.item-7{
grid-area: siete;
}
.img-1{
width: 300px;
height: 200px;
background-image: url('acces/Camaro-1.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 15px;
}
.img--e-2{
width: 620px;
height: 200px;
background-image: url('acces/Camaro-2.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 15px;
}
.img--e-3{
width: 620px;
height: 200px;
background-image: url('acces/Camaro-3.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 15px;
}
.img-4{
width: 300px;
height: 200px;
background-image: url('acces/Camaro-4.jpg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 15px;
}
.img-5{
width: 300px;
height: 200px;
background-image: url('acces/Camaro-5.jpg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 15px;
}
.img-6{
width: 300px;
height: 200px;
background-image: url('acces/Camaro-6.jpg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 15px;
}
.img-7 {
width: 300px;
height: 200px;
background-image: url('acces/Camaro-7.jpg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 15px;
}
```
Aquí les dejo mi reto cumplido
Listo el reto
HTML
`<html ``lang``="en"><head> <meta ``charset``="UTF-8"> <meta ``name``="viewport" ``content``="width=device-width, initial-scale=1.0"> <title>Css_Grid</title> <link ``rel``="stylesheet" ``href``="style.css"></head><body> </body></html>`
CSS
`* { background-color: rgb(3, 3, 3); justify-content: center; padding: 5%;}.container { display: grid; padding: 0; width: 450px; height: 400px; grid-template-rows: 150px 150px 150px; grid-auto-columns: 150px 150px 150px; margin: 0 auto; box-shadow: 10px 60px 10px rgba(255, 255, 255, 0.315);}.item-1 { background-color: greenyellow; text-align: center; padding-top: 4rem; font-size: 2rem;}.item-2 { background-color: rgb(61, 229, 23); text-align: center; padding-top: 4rem; font-size: 2rem; grid-column-start: 2; grid-column-end: 4;}.item-3 { background-color: rgb(12, 151, 8); text-align: center; padding-top: 4rem; font-size: 2rem; grid-column-start: 1; grid-column-end: 3;}.item-4 { background-color: greenyellow; text-align: center; padding-top: 4rem; font-size: 2rem; grid-column-start: 3; grid-column-end: 4}.item-5 { background-color: greenyellow; text-align: center; padding-top: 4rem; font-size: 2rem;}.item-6 { background-color: rgb(61, 229, 23); text-align: center; padding-top: 4rem; font-size: 2rem;}.item-7 { background-color: rgb(12, 151, 8); text-align: center; padding-top: 4rem; font-size: 2rem;}`
E
S
T
I
V
E
N
Aquí amamos a los gatos! Ter un reto por clase puede ser pesado pero ayuda mucho a pulir tus habilidades
Hola!! Les comparto mi reto 😄 !
reto completado !!
listo!
Reto de la clase - collage de fotos
-
Mira el código del reto en mi repositorio de GitHub: carpeta “Reto3-clase5-CollageFotos”
-
Mira la DEMO
-
Resultado:
Reto:)
Como habia areas muy grandes, use ‘grid-column’ nada más
Revisé varios códigos que publicaron los compañeros para practicar y mi resultado del reto es el siguiente 😃
No es mucho, pero es trabajo honesto. (Creo que me compliqué un poco, pero la logré 😊).
Comparto mi solución al ejercicio 😄
<div class="container-ex">
<div class="mini-box mini-box1"></div>
<div class="mini-box mini-box2"></div>
<div class="mini-box mini-box3"></div>
<div class="mini-box mini-box4"></div>
<div class="mini-box mini-box5"></div>
<div class="mini-box mini-box6"></div>
<div class="mini-box mini-box7"></div>
</div>
.container-ex{
background-color: rgba(192, 192, 192, 0.24);
display: grid;
padding: 1rem 0;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
place-content: center;
grid-template-areas:
"box1 box2 box2"
"box3 box3 box4"
"box5 box6 box7";
gap: 5px;
}
.mini-box{
border-radius: .5rem;
-webkit-box-shadow: 10px 10px 25px -1px rgba(0,0,0,0.05);
-moz-box-shadow: 10px 10px 25px -1px rgba(0,0,0,0.05);
box-shadow: 10px 10px 25px -1px rgba(0,0,0,0.05);
}
.mini-box1{
grid-area: box1;
background-image: url("https://images.pexels.com/photos/709552/pexels-photo-709552.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" );
background-size: cover;
}
.mini-box2{
grid-area: box2;
background-image: url("https://images.pexels.com/photos/86703/horseshoe-bend-page-arizona-colorado-river-86703.jpeg?auto=compress&cs=tinysrgb&w=1600" );
background-size: cover;
}
.mini-box3{
grid-area: box3;
background-image: url("https://images.pexels.com/photos/2162651/pexels-photo-2162651.jpeg?auto=compress&cs=tinysrgb&w=1600" );
background-size: cover;
}
.mini-box4{
grid-area: box4;
background-image: url("https://images.pexels.com/photos/158489/yellowstone-national-park-sunset-twilight-dusk-158489.jpeg?auto=compress&cs=tinysrgb&w=1600" );
background-size: cover;
}
.mini-box5{
grid-area: box5;
background-image: url("https://images.pexels.com/photos/355288/pexels-photo-355288.jpeg" );
background-size: cover;
}
.mini-box6{
grid-area: box6;
background-image: url("https://images.pexels.com/photos/325200/pexels-photo-325200.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" );
background-size: cover;
}
.mini-box7{
grid-area: box7;
background-image: url("https://images.pexels.com/photos/733090/pexels-photo-733090.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" );
background-size: cover;
}
Este es el resultado de mi 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">
<title>Document</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.contenedor {
background-image: url('https://img.freepik.com/fotos-premium/textura-papel-viejo-fondo-papel-vintage_262663-426.jpg?w=2000');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: grid;
grid-template-columns: 198px 198px 198px;
grid-template-rows: 198px 198px 198px;
grid-template-areas:
"aang appa appa"
"logo logo katara"
"toph sokka sukko";
place-content: center;
gap: 3px;
}
.aang {
grid-area: aang;
background-image: url('https://pics.filmaffinity.com/Avatar_La_leyenda_de_Aang_Serie_de_TV-414690510-large.jpg');
background-position: start;
background-size: cover;
background-repeat: no-repeat;
}
.katara {
grid-area: katara;
background-image: url('https://i.pinimg.com/550x/79/b3/81/79b381901d72e52a435164024154759e.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.sokka {
grid-area: sokka;
background-image: url('https://i.pinimg.com/originals/3f/a7/20/3fa720a330b2d37a9da475ff64756c4a.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.sukko {
grid-area: sukko;
background-image: url('https://i2.wp.com/www.senpai.com.mx/wp-content/uploads/2020/09/Avatar_-Mira-como-se-realizo-la-animacion-de-la-pelea-entre-Zuko-y-Azula.jpg?fit=1280%2C720&ssl=1');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.logo {
grid-area: logo;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Avatar_The_Last_Airbender_logo.svg/1200px-Avatar_The_Last_Airbender_logo.svg.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.appa{
grid-area: appa;
background-image: url('https://i.pinimg.com/236x/2d/67/be/2d67be4384c5c5f6c4e0fc9fb2495f48.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.toph {
grid-area: toph;
background-image: url('https://i.pinimg.com/736x/45/68/e0/4568e0c3d35375413ff05f0a1b1d7c0a.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="aang">
</div>
<div class="appa">
</div>
<div class="logo">
<img src="" alt="">
</div>
<div class="katara">
</div>
<div class="toph">
</div>
<div class="sokka">
</div>
<div class="sukko">
</div>
</div>
</body>
</html>
Me gusto demasiado ‘grid-template-areas’. Aca mi reto 😃
Si quieren usar los mismos colores que en la imagen, pueden usar el color picker de google
Es una excelente herramienta y ahorra mucho tiempo cuando se están clonando sitios para practicar css.
https://geekflare.com/es/google-chrome-color-picker/
Aquí mi resultado
**Código 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">
<meta name="description" content="Esta página es para realizar un reto de CSS Grid">
<meta name="robots" content="index,follow">
<link rel="stylesheet" href="./style.css">
<title>Tercer Reto</title>
</head>
<body>
<div class="container">
<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>
</div>
</body>
</html>
**Código CSS: **
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
display: flex;
justify-content: center;
padding-top: 200px;
}
.container {
height: 300px;
width: 300px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas:
"item1 item2 item2"
"item3 item3 item4"
"item5 item6 item7"
;
}
.item {
font-size: 4rem;
background-color: aqua;
}
.item1 {
background-color: #cbee39;
grid-area: item1;
}
.item2 {
background-color: #70bc04;
grid-area: item2;
}
.item3 {
background-color: #258300;
grid-area: item3;
}
.item4 {
background-color: #cbee39;
grid-area: item4;
}
.item5 {
background-color: #cbee39;
grid-area: item5;
}
.item6 {
background-color: #70bc04;
grid-area: item6;
}
.item7 {
background-color: #258300;
grid-area: item7;
}
Jajaj me encantó el tutorial, hice una grilla de mi gato!!
Tambien dejo el codigo abajo
<!doctype html>
<html>
<body>
<div class="contenedor">
<div class="item foto1"><img src="C:\Users\Usuario\Downloads\fotito.jpg"></div>
<div class="item foto2"><img src="D:\Mickylin\ladito.jpeg"></div>
<div class="item foto3"><img src="D:\Mickylin\hello.jpeg"></div>
<div class="item foto4"><img src="D:\Mickylin\yaju.jpeg"></div>
<div class="item foto5"><img src="D:\Mickylin\1.jpg"></div>
<div class="item foto6"><img src="D:\Mickylin\2.jpg"></div>
<div class="item foto7"><img src="D:\Mickylin\3.jpg"></div>
</div>
</body>
<style>
.contenedor {
background-color: #262626;
border: 5px darkgrey;
padding: 50px;
display: grid;
place-content: center;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
grid-gap: 15px;
grid-template-areas: "uno dos dos"
"tres tres cuatro"
"cinco seis siete"
}
img {
width: 100%;
height: 100%;
border-radius: 15px!important;
}
.item{
border-radius: 15px!important;
}
.foto1 {
background-color: darkred;
grid-area: uno;
}
.foto2 {
background-color: green;
grid-area: dos;}
.foto3 {
background-color: lightyellow;
grid-area: tres;}
.foto4 {
background-color: lightpink;
grid-area: cuatro;}
.foto5 {
background-color: lightblue;
grid-area: cinco;
}
.foto6 {
background-color: hotpink;
grid-area: seis;
}
.foto7 {
background-color: darkblue;
grid-area: siete;
}
</style>
<code>
Unas imagenes de la ciudad la cual espero residir dentro de poco y poder crecer tanto personal como profesionalmente 🤩
Llegue a este curso buscando fierro y encontre Oro!!1
logrado
Imagen
<!DOCTYPE html>
<html lang="en">
<link>
<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="grid3.css"></link>
<title>GRID 3</title>
</head>
<body>
<section class="general">
<div class="container">
<div class="container--item item1"></div>
<div class="container--item item2"></div>
<div class="container--item item3"></div>
<div class="container--item item4"></div>
<div class="container--item item5"></div>
<div class="container--item item6"></div>
<div class="container--item item7"></div>
<div class="container--item item8"></div>
<div class="container--item item9"></div>
</div>
</section>
</body>
</html>
<code>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* font-family: sans-serif; */
font-size: 36px;
}
.general {
background-color: aliceblue;
display: grid;
place-content: center;
height: 600px;
border-radius: 10px;
border: 5px solid brown;
}
.container {
display: grid;
/* grid-template-columns: 200px 200px 200px;
grid-template-rows: 75px 75px 75px; */
grid-template-columns: repeat(3, 150px);
grid-template-rows: repeat(3, 150px);
gap: 20px;
grid-auto-flow: column;
place-content: center;
grid-template-areas: "one two two"
"three three four"
"five six seven";
}
.container--item {
display: grid;
background: #add901;
justify-content: flex-end;
}
.item1{
background-color: #add901;
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: #add901;
grid-area: seven;
}
avanzando con la explicación de la profe.
Gracias profe, gracias Platzi
aquí mi reto de la clase, he aprendido mucho de grid :’)
que buen curso
¡Hola!
Aquí mi reto, las fotos son mías, pero no estoy segura si no se me deformaron un poco. Escucho opiniones.
Mi resultado del reto:
Reto completado
🔥🔥Les comparto mi resultado:
Una paleta de Colores 🎨
Utilicé > Grid-column
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;
}
**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="./style.css">
<script src="https://kit.fontawesome.com/b2a63b9ce0.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="contenedor">
<div class="item item-one" ><span><i class="fab fa-airbnb"></i></span></div>
<div class="item item-two" ><span><i class="fab fa-android"></i></span></div>
<div class="item item-three" ><span><i class="fas fa-book-medical"></i></span></div>
<div class="item item-four" ><span><i class="fas fa-chess"></i></span></div>
<div class="item item-five" ><span><i class="fas fa-chess-queen "></i></span></div>
<div class="item item-six" ><span><i class="fas fa-crown"></i></span></div>
<div class="item item-seven" ><span><i class="fab fa-discord"></i></span></div>
</div>
</body>
</html>
span{
display: flex;
position: relative;
color: white;
align-items:center;
justify-content: center;
font-size: 40px;
top: 50px;
}
.contenedor {
display: grid;
grid-template-columns: 152px 159px 159px;
grid-template-rows: 131px 140px 144px;
/* grid-template-areas:
"header header header"
"side main main"
"side main main"
; */
place-content: center;
}
.item{
font-size: 20px;
}
.item-one{
border: 5px solid #e1bee7;
background-color: #237afd;
grid-column-start: 1;
grid-column-end: 1;
}
.item-two{
border: 5px solid #e1bee7;
background-color: #173bbb;
grid-column-start: 2;
grid-column-end: 4;
}
.item-three{
border: 5px solid #e1bee7;
background-color: #0e5ed4;
grid-row-start: 2;
grid-column-start: 1;
grid-column-end: 3;
}
.item-four{
border: 5px solid #e1bee7;
background-color: #3a2aef;
grid-column-start: 3;
grid-column-end: 3;
}
.item-five{
border: 5px solid #e1bee7;
background-color: #0c4cf0;
grid-column-start: 1;
grid-column-end: 2;
}
.item-six{
border: 5px solid #e1bee7;
background-color: #2868cd;
grid-column-start: 2;
grid-column-end: 2;
}
.item-seven{
border: 5px solid #e1bee7;
background-color: #2319d2;
grid-column-start: 3;
grid-column-end: 3;
}
Aqui va el mio
Reto Terminado
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?