Diferencias

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

--- informatica:diseno_web:css:grid [2024/03/04 13:11] – 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 49: / Línea 51: @@
 }
 </code>
+==== Posicionamiento avanzado de los elementos ====
+<code css>
+body {
+    display: grid;
+    grid-template-areas:
+        "title  title .   .    ."
+        ".      date  .   desc desc"
+        "attend .     .   desc desc"
+        ".      img   img .    ."
+        ".      img   img .    footer";
+}
+</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:
+<code css>
+h1 {
+    grid-area: title;
+}
+time {
+    grid-area: date;
+}
+.desc {
+    grid-area: desc;
+}
+.attend {
+    grid-area: attend;
+}
+.img {
+    grid-area: img;
+}
+footer {
+    grid-area: footer;
+}
+</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.