Muestra las diferencias entre dos versiones de la página.
Ambos lados, revisión anterior Revisión previa | Última revisión Ambos lados, revisión siguiente | ||
clase:daw:diw:1eval:tema05 [2024/01/30 08:54] admin [Grid] |
clase:daw:diw:1eval:tema05 [2024/01/30 08:56] 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: |