DesignSystems.One LogoDesignSystems.One

Layout Foundations

Comprehensive layout guidelines and principles for creating consistent, responsive interfaces.

Grid System

Grid system provides a flexible foundation for creating consistent layouts across different screen sizes.

12-Column Grid
Standard grid uses 12 columns for maximum flexibility
1
2
3
4
5
6
7
8
9
10
11
12
2
2
2
2
2
2
3
3
3
3
4
4
4
Grid Properties
Key properties of a grid system

Column Count

12 columns for maximum flexibility

Gutters

16px (small), 24px (medium), 32px (large)

Margins

16px on mobile, 24px on tablet, 32px on desktop

Implementation

Built with CSS Grid and Flexbox

Using the Grid

Basic Grid Example

<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>

Complex Grid Example

<div className="grid grid-cols-12 gap-4">
  <div className="col-span-12 md:col-span-8">Main Content</div>
  <div className="col-span-12 md:col-span-4">Sidebar</div>
  <div className="col-span-6 md:col-span-4">Feature 1</div>
  <div className="col-span-6 md:col-span-4">Feature 2</div>
  <div className="col-span-12 md:col-span-4">Feature 3</div>
</div>