Skip to content
Gallery
plural
Plural DS
Plural DS
Share
Explore
Opciones

Grid

La definición de una rejilla o retícula consistente es vital para garantizar una correcta visualización de la información en diferentes resoluciones y plataformas.

⁠
⁠
⁠
Plural DS utiliza una serie de tokens para definir y componer el grid en función de la resolución de pantalla. No tokenizamos los media-queries ya que estos no pueden ser consumidos como variables, pero sí que generamos variables aplicables en diferentes media-queries.

Media-queries

xs-max 40rem (640px)
Token
Valor (rem)
Valor (px)
1
–size-column-gap
1
16
2
–size-spacing-inset
1
16
There are no rows in this table
⁠
sm-max 64rem (1024px)
Token
Valor (rem)
Valor (px)
1
–size-column-gap
1
16
2
–size-spacing-inset
1
16
There are no rows in this table
⁠

md-max 90rem (1440px)
Token
Valor (rem)
Valor (px)
1
–size-column-gap
1
16
2
–size-spacing-inset
2
32
There are no rows in this table
⁠
lg-max 120rem (1920px)
Token
Valor (rem)
Valor (px)
1
–size-column-gap
1
16
2
–size-spacing-inset
2
32
There are no rows in this table
⁠

Media-queries
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.