Spacing and Grid

Usage

See design usage guidelines

Dynamic Layout

Dynamic layout allows you to easily define and apply layout configurations directly within your HTML. The layout settings are automatically converted to CSS and injected into the page, creating responsive and flexible layouts without additional stylesheets.

How to Use Dynamic Layouts

1. Setting Up Basic Layout
   Add the data-layout attribute to your element with a value of col: *; row: *. Replace * with a valid value for each:

   • col: Defines grid-template-columns.
   • row: Defines grid-template-rows.

2. Responsive Layouts
   For different screen sizes, use the following viewport-specific attributes:

   • data-layout-sm: Small screens
   • data-layout-md: Medium screens
   • data-layout-lg: Large screens
   • data-layout-xlg: Extra-large screens

   Each attribute lets you specify a unique layout configuration for the given viewport, enabling a responsive design across devices.

3. Styling Child Elements
   To control the layout of child elements within a dynamic layout, use additional attributes on the child elements, specifying the style as you would in a style tag.

3 Column Grid

A1

A2

A3

<div class="gap-3" data-layout="col: 1fr 1fr;" data-layout-sm="col: 100%" data-layout-xlg="col: 1fr 1fr 1fr">
    <div class="box">A1</div>
    <div class="box">A2</div>
    <div class="box" data-layout-lg="grid-column: 1/3;" data-layout-md="grid-column: 1/3;">A3</div>
</div>

2 Column Grid

B1

B2

<div class="gap-3" data-layout="col: 1fr 1fr;" data-layout-sm="col: 100%">
    <div class="box">B1</div>
    <div class="box">B2</div>
</div>

Usage Guidelines