logongas

Herramientas de usuario

Herramientas del sitio

Traza:
clase:daw:diw:1eval:tema05

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión 		Revisión previa
clase:daw:diw:1eval:tema05 [2020/12/11 10:11]
admin [Grid] 		clase:daw:diw:1eval:tema05 [2024/01/30 11:59] (actual)
admin [Grid]
Línea 11: Línea 11:
   * [[https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2|Flexbox — The Animated Tutorial]]   * [[https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2|Flexbox — The Animated Tutorial]]
   * [[https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties|In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?]]   * [[https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties|In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?]]
 +  * [[https://flexboxfroggy.com/#es|Flexbox Froggy - A game for learning CSS flexbox]]
  
 Vamos a explicar flex con el siguiente ejemplo: Vamos a explicar flex con el siguiente ejemplo:
Línea 143: Línea 144:
   * [[https://github.com/ohansemmanuel/Understanding-Flexbox/blob/master/05.%20Auto%20margin%20alignment/auto_margin.md|Understanding Flexbox - auto-margin]]   * [[https://github.com/ohansemmanuel/Understanding-Flexbox/blob/master/05.%20Auto%20margin%20alignment/auto_margin.md|Understanding Flexbox - auto-margin]]
  
 +<note tip>
 +{{ :clase:daw:diw:1eval:flex-frog.png?direct&100 |}}
 +Para aprender flexbox puede jugar a [[https://flexboxfroggy.com/#es|Flexbox Froggy - A game for learning CSS flexbox]]
  
 +</note>
  
 ===== Grid ===== ===== Grid =====
Línea 152: Línea 157:
     * [[https://css-tricks.com/snippets/css/complete-guide-grid|A Complete Guide to Grid]]     * [[https://css-tricks.com/snippets/css/complete-guide-grid|A Complete Guide to Grid]]
     * [[https://tympanus.net/codrops/css_reference/grid/|CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web.]]     * [[https://tympanus.net/codrops/css_reference/grid/|CSS Grid is a two-dimensional layout system created specifically to tackle grid-based user interfaces on the web.]]
 +    * [[https://www.codeinwp.com/blog/css-grid-tutorial-layout/|The Ultimate CSS Grid Tutorial for Beginners (With Interactive Examples)]]
     * {{css_grid_layout_cheatsheet.pdf|}}     * {{css_grid_layout_cheatsheet.pdf|}}
   * Grid vs FlexBox:   * Grid vs FlexBox:
Línea 157: Línea 163:
     * [[https://css-tricks.com/css-grid-replace-flexbox/|Does CSS Grid Replace Flexbox?]]     * [[https://css-tricks.com/css-grid-replace-flexbox/|Does CSS Grid Replace Flexbox?]]
   * Mas información:   * Mas información:
-    * [https://css-tricks.com/almanac/properties/j/justify-items/|justify-items]]+    * [[https://css-tricks.com/almanac/properties/j/justify-items/|justify-items]]
     * [[https://www.youtube.com/watch?v=0Gr1XSyxZy0|Los 9 grandes errores con CSS Grid]]     * [[https://www.youtube.com/watch?v=0Gr1XSyxZy0|Los 9 grandes errores con CSS Grid]]
     * [[https://css-tricks.com/things-ive-learned-css-grid-layout/|Things I’ve Learned About CSS Grid Layout]]      * [[https://css-tricks.com/things-ive-learned-css-grid-layout/|Things I’ve Learned About CSS Grid Layout]] 
Línea 195: Línea 201:
 Ejemplos: Ejemplos:
   * ''grid-template-columns: 1fr 1fr 2fr'' La última columna tendrá el doble de tamaño que las anteriores   * ''grid-template-columns: 1fr 1fr 2fr'' La última columna tendrá el doble de tamaño que las anteriores
-  * ''grid-template-columns: 1fr 1fr 50px'' La segunda columna tendrá el doble de tamaño que la primera. La última siempre 50px+  * ''grid-template-columns: 1fr 1fr 50px'' La segunda columna tendrá el mismo de tamaño que la primera. La última siempre 50px
   * ''grid-template-columns: 1fr 2fr 80px auto'' La última tendrá un tamaño mínimo posible, la tercera tendrá 80px, la segunda el doble que la primera.   * ''grid-template-columns: 1fr 2fr 80px auto'' La última tendrá un tamaño mínimo posible, la tercera tendrá 80px, la segunda el doble que la primera.
  
Línea 249: 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   [[https://timwright.org/blog/2017/08/26/css-grid-layout/|repeat,auto-fit,minmax,1fr]]  y en [[https://www.youtube.com/watch?v=mVQiNpqXov8|MinMax in CSS Grid — 3/3 Flexibility]] 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   [[https://timwright.org/blog/2017/08/26/css-grid-layout/|repeat,auto-fit,minmax,1fr]]  y en [[https://www.youtube.com/watch?v=mVQiNpqXov8|MinMax in CSS Grid — 3/3 Flexibility]]
 +
 +<note tip>
 +La función ''minmax'' es similar a las propiedades css de:
 +  * ''min-width''
 +  * ''min-height''
 +  * ''max-width''
 +  * ''max-height''
 +</note>
 +
 +==== Ejemplo ====
 +Veamos ahora un ejemplo de la diferencia entre ''repeat(4,1fr)'' , ''repeat(auto-fit,100px)'' y ''repeat( auto-fit, minmax( 100px, 1fr ) )''
 +
 +<sxh css>
 +.container {
 +    display:grid;
 +    grid-template-columns: repeat(4,1fr);
 +}
 +.container2 {
 +    display:grid;
 +    grid-template-columns: repeat(auto-fit,100px);
 +}
 +.container3 {
 +    display:grid;
 +    grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
 +}  
 +.item {
 +    border:1px solid red;
 +}
 +.item2 {
 +    border:1px solid green;
 +}
 +.item3 {
 +    border:1px solid blue;
 +}
 +</sxh>
 +
 +<sxh html>
 +  <p>repeat(4,1fr)</p>
 +<div class="container">
 +  <div class="item">Item1</div>
 +  <div class="item">Item2</div>
 +  <div class="item">Item3</div>  
 +  <div class="item">Item4</div> 
 +  <div class="item">Item5</div> 
 +  <div class="item">Item6</div> 
 +  <div class="item">Item7</div>
 +  <div class="item">Item8</div>  
 +</div>
 +<br>
 +<p>repeat(auto-fit,100px)</p>
 +<div class="container2">
 +  <div class="item2">Item1</div>
 +  <div class="item2">Item2</div>
 +  <div class="item2">Item3</div>  
 +  <div class="item2">Item4</div> 
 +  <div class="item2">Item5</div> 
 +  <div class="item2">Item6</div> 
 +  <div class="item2">Item7</div>
 +  <div class="item2">Item8</div>  
 +</div>
 +<br>
 +<p>repeat( auto-fit, minmax( 100px, 1fr ) )</p>
 +<div class="container3">
 +  <div class="item3">Item1</div>
 +  <div class="item3">Item2</div>
 +  <div class="item3">Item3</div>  
 +  <div class="item3">Item4</div> 
 +  <div class="item3">Item5</div> 
 +  <div class="item3">Item6</div> 
 +  <div class="item3">Item7</div>
 +  <div class="item3">Item8</div>  
 +</div>
 +</sxh>
  
 ==== grid-template-rows ==== ==== grid-template-rows ====
Línea 263: Línea 342:
  
 {{:clase:daw:diw:1eval:grid-gap.png|}} {{:clase:daw:diw:1eval:grid-gap.png|}}
 +
 +
 +<note important>
 +La propiedad ''gap'' también funciona con **flex**</note>
 +
  
  
Línea 311: Línea 395:
 </sxh> </sxh>
  
 +==== span ====
 +Se puede hacer que un elemento ocupe más de una columna con ''grid-column: span x;'' siendo ''x'' el número de columnas que quieres que se expanda.
 +
 +<sxh css>
 +.l-columns {
 +  display: grid;
 +}
 +
 +.l-columns--4{
 +  grid-template-columns: repeat(4, 1fr);
 +}  
 +
 +.l-columns__area {
 +
 +}
 +.l-columns__area--span-2 {
 +  grid-column: span 2;
 +}
 +</sxh>
 +
 +
 +<sxh html>
 +  <div class="l-columns l-columns--4">
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area"></div>
 +    <div class="l-columns__area l-columns__area--span-2"></div>
 +    <div class="l-columns__area"></div>                    
 +  </div>
 +</sxh>
 +
 +  * Mas información
 +    * [[https://webdesign.tutsplus.com/how-to-build-web-form-layouts-with-css-grid--cms-28776t|How to Build Web Form Layouts With CSS Grid]]
 +    * [[https://www.scale.at/blog/responsive-form-layout-css-grid|Tutorial: A Responsive Form Layout with CSS Grid]]
 ===== 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.1607677880.txt.gz · Última modificación: 2020/12/11 10:11 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
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki