Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa Próxima revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:1eval:tema05 [2023/01/17 06:54] admin [Grid] |
clase:daw:diw:1eval:tema05 [2024/01/30 08:54] admin [Grid] |
||
---|---|---|---|
Línea 263: | Línea 263: | ||
* '' | * '' | ||
</ | </ | ||
+ | |||
+ | ==== Ejemplo ==== | ||
+ | Veamos ahora un ejemplo de la diferencia entre '' | ||
+ | |||
+ | <sxh css> | ||
+ | .container { | ||
+ | display: | ||
+ | grid-template-columns: | ||
+ | } | ||
+ | .container2 { | ||
+ | display: | ||
+ | grid-template-columns: | ||
+ | } | ||
+ | .container3 { | ||
+ | display: | ||
+ | grid-template-columns: | ||
+ | } | ||
+ | .item { | ||
+ | border:1px solid red; | ||
+ | } | ||
+ | .item2 { | ||
+ | border:1px solid green; | ||
+ | } | ||
+ | .item3 { | ||
+ | border:1px solid blue; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <sxh html> | ||
+ | < | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | <br> | ||
+ | < | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | <br> | ||
+ | < | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | </ | ||
==== grid-template-rows ==== | ==== grid-template-rows ==== | ||
Línea 281: | Línea 346: | ||
<note important> | <note important> | ||
La propiedad '' | La propiedad '' | ||
+ | |||
+ | ==== span ==== | ||
+ | Se puede hacer que un elemento ocupe más de una columna con '' | ||
+ | |||
+ | <sxh css> | ||
+ | .l-columns { | ||
+ | display: grid; | ||
+ | } | ||
+ | |||
+ | .l-columns--4{ | ||
+ | grid-template-columns: | ||
+ | } | ||
+ | |||
+ | .l-columns__area { | ||
+ | |||
+ | } | ||
+ | .l-columns__area--span-2 { | ||
+ | grid-column: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | <sxh html> | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | </ | ||
==== Bloque de Layout por columnas ==== | ==== Bloque de Layout por columnas ==== |