# Retícula - Valores. DESY. Sistema de diseño del Gobierno de Aragón.

## Estilos Índice de páginas

Estilos

# Retícula

Combinaciones basadas en una retícula de 4 columnas para escritorio y 2 para móviles.

## Índice de apartados de esta página

-   [Tamaño de pantalla](#tamao-de-pantalla)
-   [Columnas](#columnas)

### Tamaño de pantalla [Enlace al apartado: Tamaño de pantalla#](#tamao-de-pantalla)

Diseñamos para un tamaño de pantalla mínimo de `1024px` correspondiente a nuestro breakpoint `lg` con un contenedor centrado y de anchura máxima `1280px`, correspondiente a nuestras clases `container mx-auto px-base`.

Comienza diseñando para dispositivos móviles o pantallas pequeñas, resuelve su navegación con las opciones que te da el componente header y luego reposiciona los elementos para anchuras mayores. Tenemos configurados varios saltos de breakpoint, pero recomendamos usar sólo el breakpoint por defecto y el `lg`.

Breakpoints:

-   (Sin prefijo): de `0px` para arriba (Recomendado)
-   `sm`: `640px`
-   `md`: `768px`
-   `lg`: `1024px` (Recomendado)
-   `xl`: `1280px`

Puedes añadir breakpoints extra para aprovechar más la anchura del viewport. Esto es útil para aplicaciones web basadas en tablas donde se necesite más anchura para que quepan más columnas en las tablas. Basta con añadir al archivo tailwind.config.js de tu proyecto alguna de estas líneas de código:

-   `2xl: '1536px',`
-   `3xl: '1900px',`

### Columnas [Enlace al apartado: Columnas#](#columnas)

Usamos un sistema basado en 4 columnas, con un espacio de `gap-lg` - `1.75rem` - `28px / 16px`. Utiliza las combinaciones reflejadas a continuación. Evita utilizar el layout a una columna (100%) para textos en pantallas de gran tamaño, afectaría negativamente a la legibilidad.

### Pantallas grandes. Escritorio

Zona de contenido (75% en escritorio, 100% en móvil)

Barra lateral (25% en escritorio, 100% en móvil)

Mostrar código del ejemplo: ds/\_ds.example.layout-sidebar.njk

#### Contenido

HTML del ejemplo: ds/\_ds.example.layout-sidebar.njk

##### HTML del ejemplo: ds/\_ds.example.layout-sidebar.njk

```html
<div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible">
  <!-- copiar a a partir de aqui -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
    <div class="col-span-2 lg:col-span-3">
      Zona de contenido (75% en escritorio, 100% en móvil)
    </div>
    <div class="col-span-2 lg:col-span-1">
      Barra lateral (25% en escritorio, 100% en móvil)
    </div>
  </div>
  <!-- copiar hasta aqui -->
</div>
```

100%

50%

50%

75%

25%

25%

75%

25%

25%

25%

25%

Mostrar código del ejemplo: ds/\_ds.example.layout-escritorio.njk

#### Contenido

HTML del ejemplo: ds/\_ds.example.layout-escritorio.njk

##### HTML del ejemplo: ds/\_ds.example.layout-escritorio.njk

```html
<div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible en escritorio: hay una de 100%, dos de 50% una al lado de la otra y dos ejemplos de zona de contenido con zona de sidebar en el lateral y, por último, un ejemplo de 4 columnas contigual con misma anchura de un cuarto del espacio disponible.">
  <!-- copiar a a partir de aqui -->
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
    <div class="col-span-2 lg:col-span-4">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
    </div>
    <div class="col-span-2 lg:col-span-2">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
    </div>
    <div class="col-span-2 lg:col-span-2">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
    </div>
    <div class="col-span-2 lg:col-span-3">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
    </div>
    <div class="col-span-2 lg:col-span-1">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
    </div>
    <div class="col-span-2 lg:col-span-1">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
    </div>
    <div class="col-span-2 lg:col-span-3">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
    </div>
    <div class="col-span-2 lg:col-span-1">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
    </div>
    <div class="col-span-2 lg:col-span-1">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
    </div>
    <div class="col-span-2 lg:col-span-1">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
    </div>
    <div class="col-span-2 lg:col-span-1">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
    </div>
  </div>
  <!-- copiar hasta aqui -->
</div>
```

### Pantallas pequeñas. Móvil

100%

50%

50%

En móviles utilizamos solo 2 combinaciones:

-   una columna (100%)
-   dos columnas (50% + 50%)

Mostrar código del ejemplo: ds/\_ds.example.layout-movil.njk

#### Contenido

HTML del ejemplo: ds/\_ds.example.layout-movil.njk

##### HTML del ejemplo: ds/\_ds.example.layout-movil.njk

```html
<div role="img" aria-label="Imagen de retícula y 3 columnas, una que ocupa 100% de la anchura disponible, y otras dos que ocupan la mitad una al lado de la otra">
  <!-- copiar a a partir de aqui -->
  <div class="grid grid-cols-2 gap-lg col-span-1">
    <div class="col-span-2">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
    </div>
    <div class="col-span-1">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
    </div>
    <div class="col-span-1">
      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
    </div>
  </div>
  <!-- copiar hasta aqui -->
</div>
```