Grid

Grid tokens provided by @hashicorp/mktg-global-styles:


https://github.com/hashicorp/mktg-global-styles/blob/main/components/g-grid.css

Usage

.wrapper {
  composes: g-grid-container from global;
  composes: g-grid from global;
}

/* Place items within grid columns */
.item {
  grid-column: 1 / -1;

  @media (--medium-up) {
    grid-column: span 6;
  }
}
.wrapper {
  composes: g-grid-container from global;
  composes: g-grid from global;
}
 
/* Place items within grid columns */
.item {
  grid-column: 1 / -1;
 
  @media (--medium-up) {
    grid-column: span 6;
  }
}

Grid system

BreakpointColumnsGap
Small416px
Medium1224px
Large1232px

Grid container

BreakpointMax widthPadding X
Small616px24px
Medium944px40px
Large1312px48px