📏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)
--size-column-gap	1	16
--size-spacing-inset	1	16

sm-max 64rem (1024px)

Token	Valor (rem)	Valor (px)
--size-column-gap	1	16
--size-spacing-inset	1	16

md-max 90rem (1440px)

Token	Valor (rem)	Valor (px)
--size-column-gap	1	16
--size-spacing-inset	2	32

lg-max 120rem (1920px)

Token	Valor (rem)	Valor (px)
--size-column-gap	1	16
--size-spacing-inset	2	32