Layout System

Grid &
Layout System.

4pxベースグリッド・12カラム・5段階ブレークポイント。プロダクト全体の空間リズムを統一します。

01 — Grid Fundamentals

12-Column Grid

Gutter: 24px · Margin: 32px

Max: 1280px Cols: 12 Gap: var(--eo-space-6)

span 12 Full width

span 8 66.7%

span 4 33.3%

span 6 · 50%

Usage — CSS Classes

/* 12-column grid container */
.eo-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--eo-space-6); }

/* Column spans */
.eo-col-4  { grid-column: span 4; }   /* 33.3% */
.eo-col-6  { grid-column: span 6; }   /* 50%   */
.eo-col-8  { grid-column: span 8; }   /* 66.7% */
.eo-col-12 { grid-column: span 12; }  /* 100%  */
.eo-col-full { grid-column: 1 / -1; } /* Always full */

/* Responsive container */
.eo-container.eo-container-xl { max-width: 1280px; margin-inline: auto; padding-inline: var(--eo-space-8); }

02 — Breakpoints

xs 480

2xl

Name	Min Width	Grid Cols	Gutter	Margin	Usage
xs	480px	4	16px	16px	スマートフォン縦
sm	640px	6	20px	24px	スマートフォン横
md	768px	8	20px	24px	タブレット縦
lg ✦	1024px	12	24px	32px	デスクトップ — メイン
xl	1280px	12	24px	40px	広いデスクトップ
2xl	1536px	12	32px	48px	超ワイド

03 — Layout Templates

App Shell

Sidebar + Main + Header

SaaS

display: grid;
grid-template:
  "nav  nav"  56px
  "side main" 1fr / 220px 1fr;

Content + Aside

8 + 4 column split

Doc

.eo-grid > .eo-col-8  { /* Main  */ }
.eo-grid > .eo-col-4  { /* Aside */ }

Dashboard Grid

Masonry-style card layout

Analytics

grid-template-columns: repeat(3, 1fr);
/* KPI cards: span 1 each */
/* Chart:     span 2       */
/* Table:     span 3 (full) */

Centered Column

Auth / Landing narrow column

Auth

max-width: 480px;
margin-inline: auto;
padding-inline: var(--eo-space-6);

Full-Bleed Sections

Landing page pattern: full width + contained inner

full-bleed

.eo-container.eo-container-xl → max 1280px · centered

04 — Spacing Reference

Base unit: 4px · Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px

Grid & Layout System.

Grid &
Layout System.