diff --git "a/src/articles/gu\303\255as_de_estilos/grillas.mdx" "b/src/articles/gu\303\255as_de_estilos/grillas.mdx"
index 9e17ce962..27b681d5d 100644
--- "a/src/articles/gu\303\255as_de_estilos/grillas.mdx"
+++ "b/src/articles/gu\303\255as_de_estilos/grillas.mdx"
@@ -1,116 +1,226 @@
---
menu: Grillas
title: Grillas
-description: La grilla es la base para colocar elementos en la pantalla. Diseñar con una grilla ayuda a crear interfaces organizadas y fáciles de usar.
+description: La grilla es una estructura base que organiza elementos en una interfaz. Sirve para definir las secciones de un producto digital y distribuir los elementos internos asegurando la legibilidad, la usabilidad y la accesibilidad del contenido.
position: 3
---
-## Unidad mínima
+## ¿Por qué usar una grilla?
-### 4 x 4 píxeles
+
+dashboard
+
-Se toma como punto de partida el número 4, (4 px) para generar una cuadrícula, un espacio de trabajo divisible por este número.
+###### Coherencia visual
-Columnas, espaciados, grillas, son reglamentados por este número.
+Estandariza la disposición y alineación de los elementos de una interfaz.
-Este numero 4, nos da como resultado múltiples usos, a la hora de separar y armar composiciones dentro del diseño.
+
-Se toma como variable 2 rem, 32 px, entre columnas.
+
+devices
+
-
+###### Escalabilidad
-
+Facilita la adaptación de la interfaz en diferentes dispositivos y resoluciones.
-## Composición
-
-
+
-1. Unidad mínima: Medida mínima para generar la cuadrícula.
-2. Ancho medianil: Distancia entre cada columna que compone la grilla.
+
+ads_click
+
-## Área de trabajo
+###### Familiaridad
-Los datos proporcionados para web son máximos, a partir de proporciones web más grandes, anchos, se agrandan los márgenes, de izquierda y derecha, manteniendo proporciones dentro del espacio de trabajo.
+Proporciona caminos claros e intuitivos a la persona usuaria al interactuar con el producto.
-
+
-
+
+visibility
+
-
+###### Legibilidad
-
+Genera jerarquías para la percepción de los contenidos en grupos o módulos.
-## Glosario
+## Fundamentos constructivos
+
+Creamos una grilla que sigue [principios de diseño centrados en el usuario](https://gcba.github.io/estandares/creamos_experiencias/dise%C3%B1o/), utilizando patrones conocidos y validados que aseguren que la información sea comprensible. Al idear nuestros estilos, nos apoyamos en [leyes UX](https://lawsofux.com/es/) y en [principios de la Gestalt](https://gcba.github.io/estandares/creamos_experiencias/dise%C3%B1o/gestalt/).
-
+###### Ley de Fitts
-**Columnas**
+
-Es la estructura que sostiene el sistema. Disponemos de 12 columnas fijas.
+Refuerza la disposición de los elementos interactivos, optimizando su colocación para que sean más fáciles y rápidos de alcanzar.
-
+###### Ley de Miller
-**Medianiles**
+
-Son los espacios entre columnas, tienen un valor fijo de 32 px.
+Favorece la agrupación y estructura del contenido de forma modular, permitiendo que la persona usuaria procese la información en bloques más manejables.
-
+###### Ley de Hick
-**Márgenes**
+
-Es el área exterior de la cuadricula.
+Permite organizar los contenidos de forma más clara, lo que reduce la complejidad visual y facilita las decisiones de la persona usuaria.
-
+###### Ley de Proximidad
-**Áreas de diseño**
+
-Es la zona de diseño, que contiene a los componentes y los cuerpos de texto.
+Facilita el control del espaciado entre elementos de manera coherente, reforzando las relaciones visuales y jerárquicas entre los componentes de la interfaz.
-## Área de diseño
+## Anatomía
-Las áreas de diseño o layout del sistema permite cuatro formas posibles a la hora de disponer los elementos.
+Obelisco utiliza una grilla de columnas para las interfaces de sus productos digitales. La grilla se compone de:
-
+- **Columnas:** es la unidad vertical de la grilla donde se colocan y organizan los contenidos.
+- **Calles (_Gutters_ en Inglés):** es el espacio que sirve para separar las columnas entre sí, y por lo tanto, modulan el contenido de forma horizontal. En Obelisco, el ancho de las calles está definido según cada _breakpoint_.
+- **Márgenes:** mantienen centrado el contenedor visible y evitan que elementos clave estén demasiado cerca del borde de una ventana.
-1. (8 : 4) columnas
-2. (4 : 8) columnas
-3. (3 : 3 : 3 : 3) columnas
-4. (4 : 4 : 4) columnas
+
-## Mesa de trabajo
+### Usos
-### Web - Large (1366x768)
+La mayoría de los componentes están construidos en función de la grilla y se deben colocar sobre las columnas.
-
+
+
+
+
+[[si | Colocar los componentes sobre las columnas.]]
+
+
+
+
+
+[[no | No colocar componentes sobre las calles.]]
+
+
-### Tableta Android (768x1024)
+
-
+[[si | Ubicar los componentes dentro del área de columnas.]]
-### Móvil Android (360x640)
+
-
+[[no | No colocar componentes sobre los márgenes.]]
+
+## Breakpoints
+
+Un *breakpoint* es un punto específico en el que el diseño de una página cambia para adaptarse a diferentes tamaños de pantalla (*viewports*). Esto permite que el contenido se ajuste de manera adecuada a dispositivos grandes y pequeños, asegurando que la experiencia del usuario sea siempre óptima.
+
+
+
+### Dispositivos
+
+Si bien la grilla se adapta a cualquier tamaño de pantalla, contamos con medidas estándar que facilitan proceso de diseño e implementación.
+
+- **Desktop (1366 x 1024 px)**: 12 columnas
+- **Tablet (768 x 1194 px)**: 6 columnas
+- **Mobile (360 x 640 px)**: 2 columnas
+
+
+
+## Comportamiento
+
+La grilla de Obelisco tiene un comportamiento responsivo basado en porcentajes, donde existen secciones definidas que ocupan siempre el mismo espacio, y otras secciones que van cambiando según el tamaño de la ventana, asegurando la distribución del contenido.
+
+### Páginas de ancho completo
+
+En esta distribución, el contenido de una página utilizando la grilla de Obelisco ocupa el 100 % del ancho del contenedor.
+
+
+
+### Páginas con una sección lateral
+
+En esta distribución, el contenido de una página utilizando la grilla de Obelisco está dividido en 2 secciones: una columna lateral que ocupa un tercio ⅓ de la página, y el cuerpo de la página que ocupa dos tercios ⅔.
+
+
+
+
+
+
+
+
+
+
+
+### Páginas en dispositivos móviles
+
+En dispositivos móviles, el contenido de una página se organiza con otra estructura para asegurar el entendimiento de la información. En pantallas de tamaños tablet o mobile, las secciones se colocan una debajo de la otra y no existen secciones laterales.
+
+
+
+## Accesibilidad
+
+De acuerdo al [Criterio de Éxito 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html), es requisito que las grillas responsivas respondan al tamaño de la ventana del navegador sin perder información o funcionalidad.
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ba61e98bf..a3fe539d7 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -505,4 +505,15 @@ main {
.pointer-none {
pointer-events: none;
+}
+
+.custon-container-table {
+ .table {
+ margin: 0 !important;
+ }
+}
+
+.hr-custom {
+ border-top: 2px solid rgba(0, 0, 0, 0.1);
+ margin: 0.5rem 0;
}
\ No newline at end of file