Displays

Esta es una colección de clases que nos facilitará el diseño de muchos de los componentes o módulos. Normalmente se aplicará el cambio visual para el propio elemento, aunque también veremos algunos casos que aplicará a elementos internos.

.d-grid

Aparte de las conocidas columnas de Bootstrap, también tenemos a nuestra disposición este estilo de hacer columnas personalizadas con el grid nativo de CSS. Esta clase nos hará un display grid y sus elementos hijos deberán llevar clases correspondientes a lo que queramos ocupar a nivel de espacios de columnas siguiendo un poco la práctica de Bootsrapt. Los espacios de columnas serán de un total de doce.

También, si se requiere, tenemos a nuestra disposición en qué punto de ruptura queremos que tenga efecto, coincidiendo estos con los definidos de Bootstrapt.

.grid-item-#{$n}

Estas clases determinarán el tamaño de las columnas del grid y deberán estar envueltas con la clase anterior mencionada ".d-grid".

Su suma deberá ser de un máximo de 12 por línea.

grid-item-4
grid-item-4
grid-item-4