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 [2020/10/26 15:00] admin [Layout] |
clase:daw:diw:1eval:tema05 [2024/01/30 11:59] (actual) admin [Grid] |
||
---|---|---|---|
Línea 10: | Línea 10: | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
Vamos a explicar flex con el siguiente ejemplo: | Vamos a explicar flex con el siguiente ejemplo: | ||
Línea 114: | Línea 116: | ||
Mas información en: | Mas información en: | ||
+ | * [[https:// | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
- | * [[https:// | + | |
==== margin | ==== margin | ||
Línea 141: | Línea 144: | ||
* [[https:// | * [[https:// | ||
+ | <note tip> | ||
+ | {{ : | ||
+ | Para aprender flexbox puede jugar a [[https:// | ||
+ | </ | ||
===== Grid ===== | ===== Grid ===== | ||
Línea 150: | Línea 157: | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | * [[https:// | ||
* {{css_grid_layout_cheatsheet.pdf|}} | * {{css_grid_layout_cheatsheet.pdf|}} | ||
- | * Grid vs FlexBox | + | * Grid vs FlexBox: |
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
- | * Avanzado | + | * Mas información: |
+ | * [[https:// | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
Línea 192: | Línea 201: | ||
Ejemplos: | Ejemplos: | ||
* '' | * '' | ||
- | * '' | + | * '' |
* '' | * '' | ||
Línea 246: | Línea 255: | ||
Que hará que cada columna ocupe como mínimo 100px y si hay mas espacio crecerá hasta ocupar todo. Pero se crearán tantas filas como sea necesario. Mas información en | Que hará que cada columna ocupe como mínimo 100px y si hay mas espacio crecerá hasta ocupar todo. Pero se crearán tantas filas como sea necesario. Mas información en | ||
+ | |||
+ | <note tip> | ||
+ | La función '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | </ | ||
+ | |||
+ | ==== 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 260: | Línea 342: | ||
{{: | {{: | ||
+ | |||
+ | |||
+ | <note important> | ||
+ | La propiedad '' | ||
+ | |||
Línea 305: | Línea 392: | ||
< | < | ||
</ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== 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=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * Mas información | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | ===== Reglas BEM de Layout ===== | ||
+ | Para hacer una clase de Layout hay que seguir las siguientes reglas: | ||
+ | * Siempre con dos elementos. | ||
+ | * El '' | ||
+ | * Los '' | ||
+ | * El CSS solo debe tener cosas para modificar la posición (y a veces tamaño) de las Áreas pero no cambiar ni sus colores, fuentes, etc. | ||
+ | |||
+ | * Puede ser optativo poner en las areas la clase del elemento si no tiene utilidad. | ||
+ | * Las clases CSS de los elementos que son area se llamará ''< | ||
+ | |||
+ | |||
+ | <sxh css> | ||
+ | .l-extremo { | ||
+ | display: | ||
+ | | ||
+ | & | ||
+ | margin-right: | ||
+ | } | ||
+ | & | ||
+ | margin-left: | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .l-columns { | ||
+ | display: grid; | ||
+ | grid-template-columns: | ||
+ | |||
+ | @for $i from 1 to 12 { | ||
+ | & | ||
+ | grid-template-columns: | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | &__area { | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | | ||
+ | </ | ||
+ | |||
+ | <sxh html> | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * En un área se podría poner un componente ya que sus propiedades CSS no van a //chocar//. | ||
+ | |||
+ | <sxh html> | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
</ | </ | ||
</ | </ | ||
- | ===== Layout ===== | ||
Artículos en general sobre Layout | Artículos en general sobre Layout | ||
* [[http:// | * [[http:// |