Explorando los poderes implícitos de Grid y CSS Grid Autolayout | trucos CSS

Cuando trabaje con CSS Grid, lo primero que debe hacer es configurar display: grid en el elemento que queremos que se convierta en el contenedor de la cuadrícula. Luego definimos explícitamente la red usando una combinación de grid-template-columns, grid-template-rowsy grid-template-areasY a partir de ahí, el siguiente paso es colocar elementos en la cuadrícula.

Este es el enfoque clásico de uso y también lo recomiendo, pero hay otro enfoque para la creación de redes. sin definición explícitallamamos a eso red implícita.

 

¿Qué está pasando aquí?

Términos extraños, ¿verdad? Manuel Matuzovic ya tiene una buena explicación de lo que podemos usar como "implícito" y "explícito" en CSS Grid, pero vayamos directo a qué en conespecificación dice:

los grid-template-rows, grid-template-columnsy grid-template-areas las propiedades especifican un número fijo de pistas que se formarán la red explicitaCuando los elementos de malla se colocan fuera de estos límites, el contenedor de malla genera rutas de malla implícitas al agregar líneas de malla implícitas a la malla. Estas líneas junto con la forma explícita de la cuadrícula la red implícita.

Entonces, en lenguaje sencillo, el navegador genera automáticamente filas y columnas adicionales en caso de que algunos elementos se coloquen fuera de la cuadrícula definida.

¿Qué pasa con la colocación automática?

Similar al concepto de red implícita, colocación automática es la capacidad del navegador para colocar automáticamente elementos en la cuadrícula. No siempre es necesario dar la posición de cada elemento.

A través de varios casos de uso, veremos cómo dichas funciones pueden ayudarnos a crear una red compleja y dinámica con unas pocas líneas de código.

Aquí tenemos tres diseños diferentes, pero solo tenemos una configuración de cuadrícula que funciona para todos ellos.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Solo una columna ocupa todo el espacio libre. Esta es nuestra grilla "explícita". Está configurado para encajar un elemento de cuadrícula en main contenedor de red. Eso es todo. Una columna y una fila:

Pero, ¿y si decidimos colocar otro elemento allí, digamos un aside (nuestra barra lateral dinámica). Como se define actualmente (y explícitamente), nuestra cuadrícula deberá ajustarse automáticamente para acomodar este elemento. Y si no hacemos nada más con nuestro CSS, esto es lo que DevTools nos dice que está sucediendo.

podemos mover <aside> a la columna a <section>:

aside {
  grid-column-start: 2;
}

Y esto es lo que DevTools nos dice ahora:

Ponemos nuestro elemento en la segunda columna, pero... no tenemos una segunda columna. ¿Extraño verdad? Nunca declaramos una segunda columna de <main> contenedor de red, ¡pero el navegador creó uno para nosotros! Esta es la parte clave de la especificación que vimos:

Cuando los elementos de la cuadrícula se encuentran fuera de estos límites, el contenedor de la cuadrícula genera trazados de cuadrícula implícitos agregando líneas de cuadrícula implícitas a la cuadrícula.

Esta poderosa característica nos permite tener diseños dinámicos. si solo tenemos <section> elemento, todo lo que obtenemos es una columna. pero si sumamos <aside> elemento a la mezcla, se crea una columna adicional para contenerlo.

podemos poner <aside> antes de <section> en cambio así:

aside {
  grid-column-end: -2;
} 

Esto crea la columna implícita al principio de la cuadrícula, a diferencia del código anterior, que coloca la columna implícita al final.

Podemos hacer lo mismo más fácilmente usando grid-auto-flow propiedad para establecer todos y cada uno de los rastros implícitos para fluir en un column dirección:

No hay necesidad de elaborar ahora grid-column-start para poner en <aside> elemento a la derecha de <section>!De hecho, cualquier otro elemento de cuadrícula que decidamos agregar allí en cualquier momento ahora fluirá en la dirección de una columna, cada uno colocado en sus propios caminos de cuadrícula implícitos. ¡Perfecto para situaciones en las que no se conoce de antemano el número de elementos de la cuadrícula!

Sin embargo, todavía lo necesitamos. grid-column-end si queremos ponerlo en una columna a la izquierda de ella, porque de lo contrario, <aside> ocupará la columna explícita que a su vez empuja <section> fuera de la cuadrícula explícita y lo obliga a tomar la columna implícita.

Sé que sé. Esto es un poco complicado. Aquí hay otro ejemplo que podemos usar para comprender mejor esta pequeña peculiaridad:

En el primer ejemplo, no especificamos una ubicación. En este caso, el navegador colocará primero <aside> elemento en la columna explícita porque es el primero en el DOM <section>mientras tanto se coloca automáticamente en la columna de cuadrícula que el navegador crea automáticamente (o implícitamente) para nosotros.

En el segundo ejemplo, establecemos <aside> elemento fuera de la red express:

aside {
  grid-column-end: -2;
}

no importa ahora <aside> es el primero en HTML. por reasignación <aside> en otro lugar hemos hecho <section> elemento disponible para aceptar la columna explícita.

Cuadrícula de imagen

Probemos algo diferente con una cuadrícula de imágenes, donde tenemos una imagen grande y varias miniaturas al lado (o debajo).

Tenemos dos configuraciones de red. ¿Pero adivina que? ¡No defino ninguna red en absoluto! Todo lo que hago es esto:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Es sorprendente que solo necesitemos una línea de código para hacer algo así, así que analicemos qué está pasando y verás que es más fácil de lo que piensas. Primero, grid-area es una propiedad abreviada que combina las siguientes propiedades en una sola declaración:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Espera, no es grid-area la propiedad que usamos para definir áreas con nombre en lugar de dónde comienzan y terminan los elementos en la cuadrícula?

Sí, pero también hace más. Podemos escribir mucho más sobre esto. grid-areapero en este caso particular:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Podemos ver lo mismo cuando desglosamos DevTools para expandir la versión simplificada:

Esto significa que el primer elemento de la imagen en la cuadrícula debe abarcar tres columnas y tres lineasPero como no hemos definido columnas ni filas, el navegador lo hace por nosotros.

Esencialmente, hemos colocado la primera imagen en el HTML para que ocupe una cuadrícula de 3⨉3. Esto significa que todas las demás imágenes se colocarán automáticamente en estas mismas tres columnas sin necesidad de especificar nada nuevo.

Para resumir, le dijimos al navegador que la primera imagen debería ocupar el espacio de tres columnas y tres filas, que nunca definimos explícitamente al configurar el contenedor de red. El navegador configura estas columnas y filas para nosotros. Como resultado el resto de las imágenes HTML fluyen directamente en su lugar, usando las mismas tres columnas y filasY dado que la primera imagen ocupa las tres columnas de la primera fila, las imágenes restantes fluyen hacia filas adicionales, cada una de las cuales contiene tres columnas, donde cada imagen ocupa una columna.

¡Todo esto desde una línea de CSS! Este es el poder de la "cuadrícula implícita" y la colocación automática.

Para la segunda configuración de red en esta demostración, todo lo que hice fue cambiar la dirección del flujo automático usando el grid-auto-flow: column de la misma manera que hicimos antes al colocar el <aside> elemento a un <section>Esto obliga al navegador a crear un cuatro columna que puede usar para colocar el resto de imágenes, y como tenemos tres filas, el resto de imágenes se colocan en la misma columna vertical.

Necesitamos agregar algunas propiedades a las imágenes para asegurarnos de que encajen bien en la cuadrícula sin desbordamiento:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Y, por supuesto, podemos actualizar fácilmente la malla para tener en cuenta más imágenes ajustando un valor 3 en los estilos para la imagen grande. Tenemos esto:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Pero podemos agregar una cuarta columna simplemente cambiándola a 4 en cambio:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Aún mejor: configurémoslo como una propiedad personalizada para que las cosas sean aún más fáciles de actualizar.

Diseños dinámicos

El primer caso de uso de la barra lateral fue nuestro primer diseño dinámico. Ahora abordaremos diseños más complejos donde la cantidad de elementos dictará la configuración de la cuadrícula.

En este ejemplo, podemos tener de uno a cuatro elementos, donde la cuadrícula se ajusta de una manera que se ajusta bien a la cantidad de elementos sin dejar huecos incómodos o espacios faltantes.

Cuando tenemos un elemento, no hacemos nada. El elemento se estirará para llenar la única fila y columna creadas automáticamente por la cuadrícula.

Cuando agregamos el segundo elemento, creamos otra columna (implícita) usando el grid-column-start: 2.

Cuando agregamos un tercer elemento, debe ocupar el ancho de dos columnas, por eso usamos grid-column-start: span 2pero solo si es :last-child porque si (y cuando) añadimos un cuarto elemento, debería ocupar solo una columna.

Sumando esto, tenemos cuatro configuraciones de red solo con dos declaraciones y la magia del networking implícito:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Probemos con otro:

No hacemos nada para el primer y segundo caso donde solo tenemos uno o dos elementos. Sin embargo, cuando agregamos un tercer elemento, le decimos al navegador que, siempre que sea :last-child — debe abarcar dos columnas. Cuando agregamos un cuarto elemento, le decimos al navegador que este elemento debe colocarse en la segunda columna.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

¿Estás empezando a entender el truco? Le damos al navegador instrucciones específicas basadas en la cantidad de elementos (usando :nth-child) y, a veces, una instrucción puede cambiar completamente el diseño.

Cabe señalar que el dimensionamiento no será el mismo al trabajar con diferentes contenidos:

Como no hemos definido ninguna tamaños para nuestros artículos, el navegador los dimensiona automáticamente según su contenido, y puede terminar siendo de un tamaño diferente al que acabamos de ver. Para superar esto, debemos expresamente especifique que todas las columnas y filas tienen el mismo tamaño:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

¡Oye, aún no hemos jugado con estas propiedades! grid-auto-rows y grid-auto-columns establecer el tamaño de filas y columnas implícitas, respectivamente, en un contenedor de cuadrícula O, como la especificación lo explica:

los grid-auto-columns y grid-auto-rows Las propiedades especifican el tamaño de las pistas que no están establecidas en un tamaño de grid-template-rows o grid-template-columns.

Aquí hay otro ejemplo donde podemos llegar a seis elementos. Esta vez te dejaré analizar el código. No se preocupe, los selectores pueden parecer complicados, pero la lógica es bastante sencilla.

Incluso con seis elementos, solo necesitábamos dos declaraciones. ¡Imagine todos los diseños complejos y dinámicos que podríamos lograr con solo unas pocas líneas de código!

Que pasa con eso grid-auto-rows y ¿por qué toma tres valores? ¿Estamos definiendo tres líneas?

No, no definimos tres filas, pero sí son definiendo tres valores como modelo para nuestras filas implícitas La lógica es la siguiente:

• Si tenemos una fila, se dimensionará según el primer valor.
• Si tenemos dos filas, la primera obtiene el primer valor y la segunda obtiene el segundo valor.
• Si tenemos tres filas, se utilizarán los tres valores.
• Si tenemos cuatro filas (y aquí viene lo interesante), usamos los tres valores para las tres primeras filas y reutilizamos el primer valor nuevamente para la cuarta fila. Por tanto, es una especie de patrón que repetimos para dimensionar todas las filas implícitas.
• Si tenemos 100 filas, se dimensionarán de tres en tres para tener 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fretc.

A diferencia de grid-template-rows que define el número de filas y sus tamaños, grid-auto-rows solo una fila de dimensión que se puede crear en el camino.

Volviendo a nuestro ejemplo, la lógica es tener el mismo tamaño cuando se crean dos filas (usaremos 2fr 2fr), pero si se crea una tercera fila, la hacemos un poco más pequeña.

Modelos de red

Para este último, vamos a hablar sobre patrones. Probablemente haya visto estos dos diseños de columnas donde una columna es más ancha que la otra y cada fila alterna la ubicación de esas columnas.

Esta clasificación de diseño puede ser difícil de hacer sin saber exactamente cuánto contenido estamos tratando, pero los poderes de diseño automático predeterminados de CSS Grid lo hacen relativamente fácil.

Echa un vistazo al código. Puede parecer complicado, pero analicémoslo porque resulta bastante sencillo.

Lo primero que debe hacer es identificar el patrón. Pregúntese: "¿Después de cuántos elementos debe repetirse el patrón?" En este caso, es cada cuatro elementos. Entonces, veamos el uso de solo cuatro elementos por ahora:

Ahora definamos la red y configuremos el modelo general usando :nth-child Selector para alternar entre elementos:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Dijimos que nuestro patrón se repite cada cuatro elementos, así que lógicamente usaremos 4n + x dónde x varía de 1 a 4. Es un poco más fácil explicar el patrón así:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Perfecto, ¿verdad? Tenemos cuatro elementos y repetimos el patrón del quinto elemento, el noveno elemento y así sucesivamente.

Estas :nth-child ¡los selectores pueden ser complicados! Chris tiene una explicación muy útil de cómo funciona todo, incluidas recetas para hacer diferentes modelos.

Ahora configuramos cada elemento para que:

1. El primer elemento debe ocupar dos columnas y comenzar en la columna uno (grid-column: 1/span 2).
2. El segundo elemento se coloca en la tercera columna (grid-column-start: 3).
3. El tercer elemento se coloca en la primera columna: (grid-column-start: 1).
4. El cuarto elemento ocupa dos columnas y parte de la segunda columna: (grid-column: 2/span 2).

Aquí está en CSS:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Podemos detenernos allí y terminar... ¡pero podemos hacerlo mejor! Específicamente, podemos eliminar algunas declaraciones y confiar en los poderes de la red de colocación automática para que haga el trabajo por nosotros. Esta es la parte más difícil de gruñir y se necesita mucha práctica para poder identificar qué se puede eliminar.

Lo primero que podemos hacer es actualizar grid-column: 1 /span 2 y usar solo grid-column: span 2 porque por defecto el navegador pondrá el primer elemento en la primera columna. También podemos eliminar esto:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Al colocar los elementos primero, segundo y cuarto, la cuadrícula coloca automáticamente el tercer elemento en la ubicación correcta. Eso significa que nos quedamos con:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

¡Pero vamos, que podemos caminar mejor! También podemos eliminar esto:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

¿Por qué? Si colocamos el cuarto elemento en la segunda columna y permitimos que ocupe dos columnas completas, obligamos a la cuadrícula a crear una tercera columna implícita, lo que nos da un total de tres columnas sin decirlo explícitamente. elemento no puede ir a la primera fila porque el primer elemento también ocupa dos columnas, por lo que se mueve a la siguiente fila. Esta configuración nos deja con una columna vacía en la primera fila y una columna vacía en la segunda fila.

Creo que conoces el final de la historia. El navegador establecerá automáticamente el segundo y el tercero. elemento en estos espacios vacíos. Entonces nuestro código se vuelve aún más simple:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Solo se necesitan cinco declaraciones para crear un modelo genial y muy flexible. La parte de optimización puede ser complicada, pero te acostumbras y aprendes algunos trucos con la práctica.

porque no usas grid-template-columns definir columnas explícitas ya que sabemos el número de columnas?

¡Podemos hacerlo! Aquí está el código para eso:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Como puede ver, el código es definitivamente más intuitivo. Definimos tres columnas de cuadrícula explícitas y le decimos al navegador que los elementos primero y cuarto deben ocupar dos columnas. ¡Recomiendo encarecidamente este enfoque! Pero el propósito de este artículo es explorar nuevas ideas y trucos que obtenemos de los poderes implícitos y posicionados automáticamente de CSS Grid.

El enfoque explícito es más simple, mientras que la cuadrícula implícita requiere que, disculpe el juego de palabras, complete los espacios donde CSS hace el trabajo adicional detrás de escena. En última instancia, creo que tener una comprensión sólida de las cuadrículas implícitas lo ayudará a comprender mejor el algoritmo CSS Grid. Después de todo, no estamos aquí para estudiar lo obvio, ¡estamos aquí para explorar territorio salvaje!

Probemos con otro patrón, un poco más rápido esta vez:

Nuestro patrón se repite cada seis elementos. Los elementos tercero y cuarto deben ocupar dos líneas completas. Si colocamos el tercer y cuarto elemento, parece que no necesitamos tocar los demás, así que intentemos lo siguiente:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

Mmmm, no es bueno. Necesitamos poner el segundo elemento en la primera columna. De lo contrario, la cuadrícula lo colocará automáticamente en la segunda columna.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Mejor, pero aún queda trabajo por hacer. Necesitamos mover el tercer elemento hacia arriba. Es tentador tratar de ponerlo en primera línea así:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Pero eso no funciona porque obliga a todos 6n + 3 elementos que se colocarán en la misma área, haciendo un diseño desordenado. La solución real es mantener la definición original del tercer elemento y agregar grid-auto-flow: dense para llenar los huecos. Desde MDN:

[The] un algoritmo de empaquetamiento "denso" intenta llenar en agujeros anteriores en la rejillasi los objetos más pequeños aparecen más tarde. Esto puede hacer que los artículos se vean fuera de servicio cuando llenará los huecos dejados por artículos más grandes. Si se omite, se usa un algoritmo "disperso", donde el algoritmo de ubicación siempre se mueve "hacia adelante" en la cuadrícula cuando se colocan elementos, nunca retrocede para llenar los huecos. Esto garantiza que todos los elementos colocados automáticamente se muestren "en orden", incluso si esto deja huecos que podrían llenarse con elementos posteriores.

Sé que esta propiedad no es muy intuitiva, pero nunca la olvides cuando te enfrentes a un problema de ubicación. Antes de probar diferentes configuraciones en vano, agréguelo porque puede ajustar su diseño sin ningún esfuerzo adicional.

¿Por qué no siempre agrega esta propiedad por defecto?

No lo recomiendo porque en algunos casos no queremos este comportamiento. Tenga en cuenta cómo la explicación de MDN menciona que hace que los elementos atraviesen "fuera de servicio" para llenar los agujeros dejados por elementos más grandes. El orden visual suele ser tan importante como el orden de las fuentes, especialmente cuando se trata de interfaces accesibles, y grid-auto-flow: dense a veces puede causar una falta de coincidencia entre las líneas visuales y de salida.

Entonces nuestro código final es:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

¿Otro? ¡Vamos!

No hablaré demasiado sobre este y, en su lugar, les mostraré una ilustración del código que usé. Intenta ver si entiendes cómo llegué a este código:

Los elementos en negro se colocan implícitamente en la cuadrícula. Cabe señalar que podemos obtener el mismo diseño de muchas maneras que yo obtuve allí. ¿Puedes resolver esto también? ¿Qué hay de usar grid-template-columnsComparte tus creaciones en la sección de comentarios.

Os dejo con un modelo final:

lo hago hay una solucion para este, pero es tu turno de practicar. Tome todo lo que hemos aprendido e intente codificarlo usted mismo y luego compárelo con mi solución. No se preocupe si termina con algo prolijo; lo más importante es encontrar una solución viable.

¿Quiero más?

Antes de terminar, quiero compartir algunas preguntas de desbordamiento de pila relacionadas con CSS Grid donde intervine con respuestas que usan muchas de las técnicas que hemos cubierto aquí juntos. Esta es una buena lista que muestra cuántos casos de uso reales y situaciones del mundo real surgen donde estas cosas son útiles:

resumiendo

CSS Grid ha existido durante años, pero todavía hay muchos trucos poco conocidos y utilizados que no se discuten ampliamente. ¡Las funciones de red implícita y ubicación automática son dos de ellas!

Y sí, ¡puede convertirse en un desafío! Me tomó mucho tiempo descubrir la lógica detrás de las mallas implícitas y todavía estoy luchando con la ubicación automática. Si quieres pasar más tiempo navegando redes explícitas e implícitas, aquí hay algunas explicaciones adicionales y ejemplos que vale la pena mirar:

Del mismo modo, es posible que desee leer sobre grid-auto-columns en el almanaque CSS-Tricks, ya que Mojtaba Seyedi entra en gran detalle e incluye imágenes increíblemente útiles para ayudar a explicar el comportamiento.

Como dije cuando comenzamos, los métodos que hemos cubierto aquí no pretenden reemplazar las formas habituales que ya conoce sobre la creación de redes. Solo estoy investigando diferentes formas que podrían ser útiles en algunos casos.