DESY

Sistema de Diseño del Gobierno de Aragón.

Índice de apartados de esta página

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

Breakpoints y retícula

Tamaño 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

Columnas

Usamos un sistema basado en 4 columnas, con un espacio de gap-xl - 2.5rem - 40px / 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

100%
50%
50%
75%
25%
25%
75%
25%
25%
25%
25%

Pantallas pequeñas - mobile

100%
50%
50%

En móviles utilizamos solo 2 combinaciones:

  • una columna (100%)
  • dos columnas (50% + 50%)
Mostrar códigodel ejemplo: layout

Contenido

HTML

<div class="grid grid-cols-2 lg:grid-cols-4 gap-xl mt-base">
    <div class="col-span-2 lg:col-span-4 bg-neutral-light h-12 flex items-center justify-center">100%</div>
    <div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
    <div class="col-span-2 lg:col-span-2 bg-neutral-light h-12 flex items-center justify-center">50%</div>
    <div class="col-span-2 lg:col-span-3 bg-primary-light h-12 flex items-center justify-center">75%</div>
    <div class="col-span-2 lg:col-span-1 bg-primary-light h-12 flex items-center justify-center">25%</div>
    <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
    <div class="col-span-2 lg:col-span-3 bg-neutral-light h-12 flex items-center justify-center">75%</div>
    <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
    <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
    <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
    <div class="col-span-2 lg:col-span-1 bg-neutral-light h-12 flex items-center justify-center">25%</div>
</div>

<div class="grid grid-cols-2 gap-xl col-span-1 mt-base">
    <div class="col-span-2 bg-neutral-light h-12 flex items-center justify-center">100%</div>
    <div class="col-span-1 bg-neutral-light h-12 flex items-center justify-center">50%</div>
    <div class="col-span-1 bg-neutral-light h-12 flex items-center justify-center">50%</div>
</div>