Richard Fernando Jiménez
PreguntaNo se por que razón no me reconoce el grid-template-areas como pueden ver todo esta bien, pero en el navegador me dice que tiene valor de propiedad no valida.
.container{
display: grid;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
grid-template-areas:
‘one two two’
‘tree tree one’
‘one two tree’;
}
.item1{
grid-area: one;
background-color: greenyellow;
}
.item2{
grid-area: two;
background-color: rgb(144, 218, 32);
}
.item3{
grid-area: tree;
background-color: rgb(106, 157, 30);
}
- Primero, la definición para los "grid-items" es , con comillas, ya sean simples o dobles.
grid-area: 'nombre-del-area'; - Segundo, las comillas que utilizaste en , mi editor no las toma como el carácter de comillas (
grid-template-areaso')." - Y por ultimo al definir el , es como si fuese que quieres multiplicar los ítems, ya que el ítem
grid-template-areas, salta de celda 1 a la 6 y 7, de igual manera con los ítemsoneytwo. De esa manera no estas siguiendo el concepto de área, por eso el navegador no sabe que hacer.three
Héctor Eduardo López Carballo
Hola!
Podrías compartir una captura de cómo te sale en la consola, por favor?
Richard Fernando Jiménez
SALE "VALOR DE PROPIEDAD NO VALIDA" SIN EMBARGO ESTA TODO CORRECTO, YA VALIDE EN OTRO NAVEGADOR Y DA EL MISMO RESULTADO, ES RARO POR QUE TODOS HAN HECHO LO MISMO Y LES TRABAJA SIN PROBLEMA LAS AREAS.
Héctor Eduardo López Carballo
Qué navegador estás usando?
Richard Fernando Jiménez
Google Chrome amigo.
Héctor Eduardo López Carballo
Ábrelo con Firefox dev, me parece que da más información con errores de CSS.
Yo tampoco veo por qué puede estar fallando, luce bien para mí. Intenta usar comillas dobles en lugar de comillas simples.
Richard Fernando Jiménez
Lo he abierto con todos los navegadores y nada, y si lo tenia con comillas dobles y da el mismo resultado, sin embargo no parare hasta encontrar ese error.
Micaías Esteban Garro
me paso lo mismo, es por que al escribir los nombres del template, como "a b b" "c c a", estas formando figuras no rectangulares con el mismo nombre de área y eso no se puede hacer con grid. Se resuelve agregando otro nombre como "a b b" "c c d" y ahí ya no te saldría el error de valor de propiedad.
Adrian Bautista Orozco
recuerda los conceptos de track que son conjunto de filas o columnas y de area que es el conjunto de filas y columnas; en este caso estas intentando usar "one" en areas(espacios) separados
Richard Fernando Jiménez
Gracias por sus aportes pero lamento decirles que si tome en cuenta cada uno de sus conceptos y nada, probare en otra laptop haber como me va, tengo que resolver esto.
Piky Ramos
Hola richard, encontré unos errores en tu código.
Para resolver el ejercicio deberías intentar algo como lo siguiente:
grid-template-areas: "1 2 2" "3 3 4" "5 6 7" ;
Para ello vas a necesitar de 7 ítems en tu contenedor con
display: grid;
