Diferencias

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

--- clase:daw:diw:1eval:tema05 [2023/11/21 08:55]
admin [Grid]
+++ clase:daw:diw:1eval:tema05 [2024/01/30 08:54]
admin [Grid]
@@ Línea 346: / Línea 346: @@
 <note important>
 La propiedad ''gap'' también funciona con **flex**</note>
+==== 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>
 ==== Bloque de Layout por columnas ====

logongas