Grid

Podcast de CSS - 011: Cuadrícula

Un diseño muy común en el diseño web es un diseño de encabezado, barra lateral, cuerpo y pie de página.

A lo largo de los años, ha habido muchos métodos para resolver este diseño, pero con la cuadrícula de CSS, no solo es relativamente sencillo, pero tienes muchas opciones. Grid es excepcionalmente útil para combinar los controles que el tamaño extrínseco proporciona la flexibilidad del tamaño intrínseco, lo que lo hace ideal para este tipo de diseño. Esto se debe a que la cuadrícula es un método de diseño diseñado para contenido bidimensional. Es decir, coloca los elementos en filas y columnas al mismo tiempo.

Cuando creas un diseño de cuadrícula, debes definir una cuadrícula con filas y columnas. Luego, colocas los elementos en esa cuadrícula, o permite que el navegador los coloque automáticamente en las celdas que creaste. Hay mucho para hacer cuadrículas, pero con una descripción general de lo que hay disponible crearás diseños de cuadrícula en muy poco tiempo.

Descripción general

Entonces, ¿qué puedes hacer con la cuadrícula? Los diseños de cuadrícula tienen las siguientes características. Aprenderás sobre todas ellas en esta guía.

1. Una cuadrícula se puede definir con filas y columnas. Puedes elegir cómo ajustar el tamaño de estos segmentos de filas y columnas o pueden reaccionar al tamaño del contenido.
2. Los elementos secundarios directos del contenedor de la cuadrícula se colocarán automáticamente en esta cuadrícula.
3. También puedes colocar los elementos en la ubicación precisa que desees.
4. Se puede asignar un nombre a las líneas y áreas de la cuadrícula para que sea más fácil colocarlas.
5. El espacio libre en el contenedor de la cuadrícula se puede distribuir entre las pistas.
6. Los elementos de la cuadrícula se pueden alinear dentro de su área.

Terminología de la cuadrícula

La cuadrícula incluye un montón de terminología nueva, ya que es la primera vez que CSS tiene un sistema de diseño real.

Líneas de cuadrícula

Una cuadrícula se compone de líneas, que se ejecutan horizontal y verticalmente. Si tu cuadrícula tiene cuatro columnas, tendrá cinco líneas de columnas, incluida la que está después de la última columna.

Las líneas están numeradas a partir del 1, La numeración sigue el modo de escritura y la dirección de la secuencia de comandos del componente. Esto significa que la línea de columna 1 estará a la izquierda en un idioma de izquierda a derecha, como inglés, y a la derecha, en un idioma que se escribe de derecha a izquierda, como el árabe.

Pistas de cuadrícula

Un seguimiento es el espacio entre dos líneas de la cuadrícula. Un seguimiento de fila se encuentra entre dos líneas de fila y un seguimiento de columna entre dos líneas de columnas. Cuando creamos la cuadrícula, creamos los recorridos asignándoles un tamaño.

Celda de cuadrícula

Una celda de cuadrícula es el espacio más pequeño en una cuadrícula, definido por la intersección de los seguimientos de filas y columnas. Es como una celda de una tabla o una celda en una hoja de cálculo. Si defines una cuadrícula y no colocas ninguno de los elementos se distribuirán automáticamente un elemento en cada celda de cuadrícula definida.

Área de la cuadrícula

Varias celdas de cuadrícula juntas. Las áreas de la cuadrícula se crean al hacer que un elemento se extienda en varios recorridos.

Brechas

Un medianil o un callejón entre las pistas. Para ajustar el tamaño, funcionan como una pista normal. No puedes colocar contenido en un espacio, pero puedes abarcar elementos de la cuadrícula a lo largo de él.

Contenedor de cuadrícula

El elemento HTML al que se aplicó display: grid y, por lo tanto, crea un nuevo contexto de formato de cuadrícula para los elementos secundarios directos.

.container {
  display: grid;
}

Elemento de cuadrícula

Un elemento de cuadrícula es un elemento que es un elemento secundario directo del contenedor de la cuadrícula.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Filas y columnas

Para crear una cuadrícula básica, puedes definir una cuadrícula con tres seguimientos de columnas, dos pistas de fila y un espacio de 10 píxeles entre ellas, como se muestra a continuación.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

En esta cuadrícula, se muestran muchos de los conceptos descritos en la sección de terminología. Tiene tres recorridos de columnas. Cada pista usa una unidad de duración diferente. Tiene dos vías de fila, uno con una unidad de longitud y el otro con auto. Cuando se utiliza como redimensionamiento automático de pistas, podemos decir que son tan grandes como el contenido. El tamaño de las pistas se ajusta automáticamente de forma predeterminada.

Si el elemento con una clase de .container tiene elementos secundarios, se ubicarán de inmediato en esta cuadrícula. Puedes ver esto en acción en la siguiente demostración.

La superposición de la cuadrícula en las Herramientas para desarrolladores de Chrome puede ayudarte a comprender las diferentes partes de la cuadrícula.

Abre la demostración en Chrome. Inspecciona el elemento con el fondo gris, que tiene un ID de container. Destaca la cuadrícula seleccionando la insignia de cuadrícula en el DOM, junto al elemento .container. Dentro de la pestaña Diseño, Selecciona Display Line Numbers en el menú desplegable para ver los números de línea en tu cuadrícula.

Palabras clave de tamaño intrínseco

Además de las dimensiones de longitud y porcentaje, como se describe en la sección sobre unidades de tamaño los seguimientos de cuadrícula pueden usar palabras clave de ajuste de tamaño intrínsecas. Estas palabras clave se definen en la especificación de tamaño de caja y agregar métodos adicionales para ajustar el tamaño de los cuadros en CSS no solo seguimientos de cuadrícula.

• min-content
• max-content
• fit-content()

La min-content hará que la pista sea tan pequeña como sea posible sin que se desborde su contenido. Se cambiará el diseño de cuadrícula de ejemplo para que tenga tres seguimientos de columnas con un tamaño de min-content significa que se hacen tan estrechos como la palabra más larga de la pista.

La max-content tiene el efecto opuesto. La pista será lo suficientemente ancha como para que todo el contenido aparezca en una sola cadena larga e ininterrumpida. Esto podría provocar un desbordamiento, ya que la cadena no se unirá.

La fit-content() actúa como max-content al principio. Sin embargo, una vez que la pista alcance el tamaño que pasas a la función, el contenido comienza a ajustarse. Por lo tanto, fit-content(10em) creará una pista de menos de 10 em. si el tamaño de max-content es menor que 10 em, pero nunca más de 10 cm.

En la próxima demostración, pruebe las diferentes palabras clave de ajuste de tamaño intrínseco cambiando el tamaño de los seguimientos de la cuadrícula.

La unidad fr

Tenemos dimensiones de longitud, porcentajes y también estas palabras clave nuevas. También hay un método de ajuste de tamaño especial que solo funciona en el diseño de cuadrícula. Esta es la unidad fr, una longitud flexible que describe una parte del espacio disponible en el contenedor de la cuadrícula.

La unidad fr funciona de manera similar al uso de flex: auto en flexbox. Distribuye el espacio después de que se han distribuido los elementos. Por lo tanto, hay tres columnas con la misma cuota de espacio disponible:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

A medida que la unidad compartida comparte el espacio disponible, se puede combinar con una brecha de tamaño fijo o pistas de tamaño fijo. Para tener un componente con un elemento de tamaño fijo y la segunda pista que ocupe el espacio restante, puedes usar como lista de pistas de grid-template-columns: 200px 1fr.

Si usas valores diferentes para la unidad fr, el espacio se compartirá de forma proporcional. Los valores más altos obtienen más espacio libre. En la siguiente demostración, cambia el valor de la tercera pista.

La función minmax()

Esta función te permite definir un tamaño mínimo y uno máximo para un segmento. Esto puede ser muy útil. Si tomamos el ejemplo de la unidad fr anterior, que distribuye el espacio restante, se puede escribir con minmax() como minmax(auto, 1fr) Grid observa el tamaño intrínseco del contenido, y, luego, distribuye el espacio disponible después de darle suficiente espacio al contenido. Esto significa que es posible que no recibas pistas con una cuota equitativa de todo el espacio disponible en el contenedor de la cuadrícula.

Para forzar que un seguimiento ocupe la misma proporción del espacio en el contenedor de la cuadrícula menos los espacios, utiliza el campo mínimo. Reemplaza 1fr como tamaño de pista por minmax(0, 1fr). Esto hace que el tamaño mínimo de la pista sea 0 y no el tamaño mínimo de contenido. La cuadrícula tomará todo el tamaño disponible en el contenedor deducir el tamaño necesario para cualquier brecha, y comparte el resto según tus unidades Frecuentes.

Notación repeat()

Si deseas crear una cuadrícula de seguimiento de 12 columnas con columnas iguales, podrías usar el siguiente CSS.

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

También puedes escribirlo usando repeat():

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

La función repeat() se puede usar para repetir cualquier sección de la ficha de pistas. Por ejemplo, puedes repetir un patrón de pistas. También puedes tener algunas pistas normales y una sección recurrente.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill y auto-fit

Puedes combinar todo lo que aprendiste sobre el tamaño de las pistas, minmax() y repite, para crear un patrón útil con un diseño de cuadrícula. Tal vez no quieras especificar el número de seguimientos de columna, sino crear todas las que quepan en el contenedor.

Puedes lograr esto con repeat() y las palabras clave auto-fill o auto-fit. En la cuadrícula de demostración de abajo, se crearán tantas pistas de 200 píxeles como quepan en el contenedor. Abre la demostración en una ventana nueva y observa cómo cambia la cuadrícula a medida que modificas el tamaño del viewport.

En la demostración, obtenemos todas las pistas que caben. Sin embargo, los segmentos no son flexibles. Habrá un espacio al final hasta que haya espacio suficiente para otra pista de 200 píxeles. Si agregas la función minmax(), puedes solicitar tantas pistas como quepan, con un tamaño mínimo de 200 píxeles y un máximo de 1 fr. Luego, Grid dispone los recorridos de 200 píxeles y el espacio restante se distribuye de forma equitativa entre ellos.

De esta manera, se crea un diseño responsivo bidimensional sin necesidad de realizar consultas de medios.

Hay una diferencia sutil entre auto-fill y auto-fit. En la siguiente demostración, juega con un diseño de cuadrícula mediante la sintaxis que se explicó anteriormente, pero con solo dos elementos de la cuadrícula en el contenedor de la cuadrícula. Puedes ver que se crearon segmentos vacíos si usas la palabra clave auto-fill. Si cambias la palabra clave a auto-fit, las pistas se contraerán a un tamaño igual a 0. Esto significa que las vías flexibles ahora crecen para consumir el espacio.

De lo contrario, las palabras clave auto-fill y auto-fit actúan de la misma manera. No hay diferencia entre ellos una vez que se completa la primera pista.

Colocación automática

Hasta ahora, en las demostraciones ya viste la colocación automática de cuadrículas en acción. Los elementos se colocan en la cuadrícula, uno por celda, en el orden en que aparecen en la fuente. Para muchos diseños, esto podría ser todo lo que necesitas. Si necesitas más control, hay algunas cosas que te gustaría hacer. La primera es ajustar el diseño de posición automática.

Cómo colocar elementos en columnas

El comportamiento predeterminado del diseño de cuadrícula es colocar los elementos a lo largo de las filas. En su lugar, puedes hacer que los elementos se coloquen en columnas con grid-auto-flow: column. Debes definir seguimientos de fila; de lo contrario, los elementos crearán seguimientos de columnas intrínsecos, y distribuirlo todo en una sola fila larga.

Estos valores se relacionan con el modo de escritura del documento. Una fila siempre se ejecuta en el sentido de una oración, en el modo de escritura del documento o componente. En la siguiente demostración, puedes cambiar el modo del valor de grid-auto-flow y la propiedad writing-mode.

Abarca las pistas

Puedes hacer que algunos o todos los elementos de un diseño de ubicación automática abarquen más de un segmento. Usa la palabra clave span más la cantidad de líneas que se deben abarcar como un valor de grid-column-end o grid-row-end.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

Como no especificaste un grid-column-start, Usa el valor inicial de auto y se coloca de acuerdo con las reglas de posición automática. También puedes especificar lo mismo con la abreviatura grid-column:

.item {
    grid-column: auto / span 2;
}

Completar brechas

Un diseño de colocación automática con algunos elementos que abarcan varias pistas puede generar una cuadrícula con algunas celdas vacías. Comportamiento predeterminado del diseño de cuadrícula con un diseño de posicionamiento automático es avanzar siempre hacia adelante. Los artículos se colocarán según el orden en el que se encuentren en la fuente. o cualquier modificación de la propiedad order. Si no hay espacio suficiente para un elemento, dejará un déficit y pasará a la siguiente pista.

En la siguiente demostración, se muestra este comportamiento. La casilla de verificación aplicará el modo de empaquetado denso. Para habilitar esta función, se asigna a grid-auto-flow un valor de dense. Con este valor en su lugar, cuadrícula tomará los elementos más adelante en el diseño y los utilizará para completar los espacios. Esto puede significar que la pantalla se desconecta del orden lógico.

Colocación de elementos

Ya tienes muchas funcionalidades de la cuadrícula de CSS. Ahora, veamos cómo posicionamos los elementos en la cuadrícula que creamos.

Lo primero que hay que recordar es que el diseño de cuadrícula de CSS se basa en una cuadrícula de líneas numeradas. La forma más sencilla de colocar elementos en la cuadrícula es colocarlos de una línea a otra. En esta guía, descubrirás otras formas de colocar elementos, pero siempre tendrás acceso a esas líneas numeradas.

Estas son las propiedades que puedes usar para colocar elementos por número de línea:

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

Incluyen abreviaturas para definir las líneas de inicio y finalización al mismo tiempo:

• grid-column
• grid-row

Para colocar el elemento, establece las líneas de inicio y fin del área de la cuadrícula en la que debe colocarse.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Las Herramientas para desarrolladores de Chrome pueden brindarte una guía visual de las líneas para verificar dónde está colocado el elemento.

La numeración de las líneas sigue el modo de escritura y la dirección del componente. En la próxima demostración, cambie la dirección o el modo de escritura. para ver cómo la ubicación de los elementos se mantiene coherente con la forma en que fluye el texto.

Apila elementos

Con el posicionamiento basado en líneas, puedes colocar elementos en la misma celda de la cuadrícula. Esto significa que puedes apilar elementos, o hacer que un elemento se superponga parcialmente con otro. Los elementos que se encuentren más adelante en la fuente se mostrarán sobre los que vienen antes. Puedes cambiar este orden de apilado usando z-index, al igual que con los artículos posicionados.

Números de línea negativos

Cuando creas una cuadrícula con grid-template-rows y grid-template-columns crearás lo que se conoce como cuadrícula explícita. Esta es una cuadrícula que has definido y has dado tamaño a los recorridos.

A veces tendrás elementos que se muestran fuera de esta cuadrícula explícita. Por ejemplo: puedes definir seguimientos de columnas y, luego, agregar varias filas de elementos de cuadrícula sin definir seguimientos de filas. El tamaño de las pistas se ajustará automáticamente de forma predeterminada. También puedes colocar un elemento con grid-column-end que esté fuera de la cuadrícula explícita definida. En ambos casos, la cuadrícula creará seguimientos para que funcione el diseño, y estos seguimientos se conocen como la cuadrícula implícita.

La mayoría de las veces, no hará ninguna diferencia si trabajas con una cuadrícula implícita o explícita. Sin embargo, con las posiciones basadas en líneas, es posible que encuentres la principal diferencia entre ambas.

Con números de línea negativos, puedes colocar elementos de la línea final de la cuadrícula explícita. Esto puede ser útil si deseas que un elemento se extienda desde la primera hasta la última línea de las columnas. En ese caso, puedes usar grid-column: 1 / -1. El elemento se estirará a través de la cuadrícula explícita.

Sin embargo, esto solo funciona para la cuadrícula explícita. Toma un diseño de tres filas de elementos de ubicación automática donde te gustaría que el primer elemento se extienda hasta la línea final de la cuadrícula.

Tal vez pienses que puedes asignar grid-row: 1 / -1 a ese elemento. En la siguiente demostración, verás que esto no funciona. Los recorridos se crean en la cuadrícula implícita, No hay forma de llegar al final de la cuadrícula con -1.

Cómo determinar el tamaño de las pistas implícitas

De forma predeterminada, el tamaño de los recorridos creados en la cuadrícula implícita se ajusta automáticamente. Sin embargo, si deseas controlar el tamaño de las filas, usa el propiedad grid-auto-rows, y para las columnas grid-auto-columns

Para crear todas las filas implícitas con un tamaño mínimo de 10em y un tamaño máximo de auto, haz lo siguiente:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

Para crear columnas implícitas con un patrón de 100px y 200px de ancho, En este caso, la primera columna implícita será de 100 px, el segundo (200px), el tercer 100px, y así sucesivamente.

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

Líneas de cuadrícula con nombre

Puede facilitar la colocación de elementos en un diseño si las líneas tienen un nombre en lugar de un número. Puedes nombrar cualquier línea de la cuadrícula agregando el nombre que elijas entre corchetes. Se pueden agregar varios nombres, separadas por un espacio dentro de los mismos corchetes. Una vez que hayas nombrado líneas, se podrán usar en lugar de números.

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

Áreas de la plantilla de la cuadrícula

También puedes asignar nombres a áreas de la cuadrícula y colocar elementos en ellas. Esta es una técnica atractiva, ya que te permite ver cómo se ve el componente en las CSS.

Para comenzar, asigna un nombre a los elementos secundarios directos del contenedor de la cuadrícula mediante el Propiedad grid-area:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

El nombre puede ser el que desees, excepto las palabras clave auto y span. Una vez que hayas asignado un nombre a todos los elementos, usa el grid-template-areas para definir a qué celdas de la cuadrícula abarcará cada elemento. Cada fila se define entre comillas.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Existen algunas reglas cuando se usa grid-template-areas.

• El valor debe ser una cuadrícula completa sin celdas vacías.
• Para incluir segmentos, repite el nombre.
• Las áreas creadas mediante la repetición del nombre deben ser rectangulares y no se pueden desconectar.

Si infringes alguna de las reglas anteriores, el valor se considera no válido y se descarta.

Para dejar espacios en blanco en la cuadrícula, usa uno o varios . sin espacios en blanco entre ellos. Por ejemplo, para dejar la primera celda vacía de la cuadrícula, puedo agregar una serie de caracteres .:

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Como todo el diseño se define en un solo lugar, facilita la redefinir el diseño mediante consultas de medios. En el siguiente ejemplo, creé un diseño de dos columnas que se mueve a tres columnas redefine el valor de grid-template-columns y grid-template-areas. Abre el ejemplo en una ventana nueva para jugar con el tamaño del viewport y ver el cambio de diseño.

También puedes ver cómo se relaciona la propiedad grid-template-areas con writing-mode y la dirección. al igual que con otros métodos de cuadrícula.

Propiedades de atajos

Hay dos propiedades abreviadas que te permiten establecer muchas de las propiedades de cuadrícula a la vez. Pueden parecer un poco confusas hasta que dividas exactamente cómo funcionan en conjunto. Tú decides si quieres usarlas o si prefieres usar manchas largas.

grid-template

La grid-template propiedad es una abreviatura de grid-template-rows, grid-template-columns y grid-template-areas. Las filas se definen primero, junto con el valor de grid-template-areas. El tamaño de la columna se agrega después de una /.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid propiedad

La grid La abreviatura se puede usar exactamente de la misma manera que la abreviatura grid-template. Cuando se usa de esta manera, se restablecerán los valores iniciales de las demás propiedades de cuadrícula aceptadas. El conjunto completo es el siguiente:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

También puedes usar esta abreviatura para definir cómo se comporta la cuadrícula implícita por ejemplo:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

Alineación

El diseño de cuadrícula utiliza las mismas propiedades de alineación que aprendiste en la guía para flexbox En la cuadrícula, las propiedades que comienzan con justify- siempre se usan en el eje intercalado. la dirección en la que se ejecutan las oraciones en el modo de escritura.

Las propiedades que comienzan con align- se usan en el eje de bloque. la dirección en la que se disponen los bloques en tu modo de escritura.

• justify-content y align-content: para distribuir espacio adicional en el contenedor de la cuadrícula alrededor de las pistas o entre ellas.
• justify-self y align-self: se aplican a un elemento de la cuadrícula para moverlo dentro del área de la cuadrícula en la que se encuentra.
• justify-items y align-items: se aplican al contenedor de cuadrícula para establecer todas las propiedades justify-self de los elementos.

Cómo distribuir espacio adicional

En esta demostración, la cuadrícula es más grande que el espacio necesario para distribuir las pistas de ancho fijo. Esto significa que tenemos espacio en las dimensiones intercaladas y de bloque de la cuadrícula. Prueba diferentes valores de align-content y justify-content para ver cómo se comportan los segmentos.

Observa cómo se hacen más grandes las brechas cuando se usan valores como space-between, y cualquier elemento de cuadrícula que abarque dos pistas también crece para absorber el espacio adicional agregado al espacio.

Cómo mover el contenido

Los elementos con un color de fondo parecen llenar el área de la cuadrícula en la que se colocan, porque el valor inicial para justify-self y align-self es stretch.

En la demostración, cambia los valores de justify-items y align-items para ver cómo cambia el diseño. El área de la cuadrícula no cambiará de tamaño, sino que los elementos se mueven dentro del área definida.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre cuadrícula

main {
  display: grid;
}

Recursos

Esta guía te brindó una descripción general de las diferentes partes de la especificación de diseño de cuadrícula. Para obtener más información, consulta los siguientes recursos.

• Diseño de cuadrícula de CSS de MDN
• Una guía completa para usar la cuadrícula
• Cómo crear un contenedor de cuadrícula
• Cómo inspeccionar la cuadrícula de CSS en las Herramientas para desarrolladores de Chrome
• Una colección integral de material de aprendizaje basado en cuadrículas