Herramientas de usuario
clase:daw:diw:1eval:tema05
Diferencias
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 | ||
|
clase:daw:diw:1eval:tema05 [2024/01/30 08:54] admin [Grid] |
clase:daw:diw:1eval:tema05 [2024/01/30 11:59] (actual) admin [Grid] |
||
|---|---|---|---|
| Línea 347: | Línea 347: | ||
| 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 ==== | ||
| Línea 426: | Línea 395: | ||
| </ | </ | ||
| - | <note tip> | + | ==== span ==== |
| - | {{ : | + | Se puede hacer que un elemento ocupe más de una columna con '' |
| - | Para aprender Grid puede jugar a [[https://cssgridgarden.com/#es|Grid Garden | + | |
| - | </note> | + | <sxh css> |
| + | .l-columns | ||
| + | display: grid; | ||
| + | } | ||
| + | |||
| + | .l-columns--4{ | ||
| + | grid-template-columns: | ||
| + | } | ||
| + | |||
| + | .l-columns__area { | ||
| + | |||
| + | } | ||
| + | .l-columns__area--span-2 { | ||
| + | grid-column: span 2; | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | |||
| + | <sxh html> | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | </ | ||
| + | </sxh> | ||
| + | * Mas información | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| ===== Reglas BEM de Layout ===== | ===== Reglas BEM de Layout ===== | ||
| Para hacer una clase de Layout hay que seguir las siguientes reglas: | Para hacer una clase de Layout hay que seguir las siguientes reglas: | ||
clase/daw/diw/1eval/tema05.1706601266.txt.gz · Última modificación: 2024/01/30 08:54 por admin
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
