Diferencias

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

--- informatica:diseno_web:css:grid [2024/03/04 13:30] – [Posicionamiento avanzado de los elementos] tempwin
+++ informatica:diseno_web:css:grid [2024/03/04 13:51] (actual) – [Número de pistas dinámico] tempwin
@@ Línea 27: / Línea 27: @@
 }
 </code>
+Para las filas, usaríamos ''grid-template-rows''.
 <WRAP center round info 60%>
@@ Línea 33: / Línea 35: @@
-Para las filas, usaríamos ''grid-template-rows''.
@@ Línea 63: / Línea 65: @@
 }
 </code>
+<WRAP center round info 60%>
+El espacio en blanco indica separación entre columnas. Para describir celdas vacías es convención utilizar el punto (''.'')
+</WRAP>
 Habremos construidos una cuadrícula de 5 columnas y 5 filas. Para indicar qué elemento se colocará dónde, le indicamos el nombre del área que usamos en la plantilla:
@@ Línea 87: / Línea 94: @@
 </code>
+===== Rejillas implícitas =====
+  * ''grid-auto-flow''
+Para definir una rejilla implícita, estableceremos el flujo automático de elementos en filas y permitiremos que rellenen huecos cambiando el orden si es necesario (''dense''):
+<code css>
+main {
+    display: grid;
+    grid-auto-flow: row dense;
+}
+</code>
+===== Número de pistas dinámico =====
+<code css>
+grid-template-columns: repeat(auto-fit, 350px);
+</code>
+Con ''auto-fit'' estamos indicando que se calcule el número de columnas necesario para rellenar los espacios.
+Tamaño de pistas dinámico:
+<code css>
+grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+</code>
+Esto nos definirá cuantas columnas sean necesarias de idéntico ancho de forma que rellenen el contenedor.