MSQ Design System Grid

The MSQ grid system provides a responsive layout structure using a 12-column grid with consistent breakpoints and spacing.

Grid System

The MSQ grid system uses a responsive container with consistent padding and max-widths at different breakpoints. The system is built on a 12-column grid layout.

/* MSQ Grid System */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

Breakpoints

The grid system uses standard breakpoints that align with Tailwind CSS defaults.

/* Breakpoints */
sm: 640px   /* Small devices */
md: 768px   /* Medium devices */
lg: 1024px  /* Large devices */
xl: 1280px  /* Extra large devices */
2xl: 1536px /* 2X Extra large devices */

Usage with Tailwind CSS

When using Tailwind CSS, you can leverage the built-in grid utilities.

/* Using Tailwind CSS Grid Utilities */
<div className="container mx-auto px-4">
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
  </div>
</div>

Grid Examples

12-Column Grid

Responsive Grid (1 column on mobile, 2 on tablet, 3 on desktop)

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

Asymmetric Grid (2/3 + 1/3 split)

2/3 Width

1/3 Width