Diferencias

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

--- clase:daw:diw:1eval:tema05 [2022/11/14 15:10]
admin [Grid]
+++ clase:daw:diw:1eval:tema05 [2024/01/30 11:59] (actual)
admin [Grid]
@@ Línea 163: / Línea 163: @@
     * [[https://css-tricks.com/css-grid-replace-flexbox/|Does CSS Grid Replace Flexbox?]]
   * 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://css-tricks.com/things-ive-learned-css-grid-layout/|Things I’ve Learned About CSS Grid Layout]]
@@ Línea 263: / Línea 263: @@
   * ''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 ====
@@ Línea 277: / Línea 342: @@
 {{:clase:daw:diw:1eval:grid-gap.png|}}
+<note important>
+La propiedad ''gap'' también funciona con **flex**</note>
@@ Línea 325: / Línea 395: @@
 </sxh>
-<note tip>
+==== span ====
-{{ :clase:daw:diw:1eval:grid-garden.png?direct&100 |}}
+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.
-Para aprender Grid puede jugar a [[https://cssgridgarden.com/#es|Grid Garden - A game for learning CSS grid layout]]
-</note>
+<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 =====
 Para hacer una clase de Layout hay que seguir las siguientes reglas:

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página