그리드 시스템 및 모듈성

1) 왜 메쉬

그리드는 내용과 화면이 커짐에 따라 예측 가능한 인터페이스 동

디자인과 개발을 가속화합니다 (공통 언어: "12 열, 거터 24"),

인지 부하 (리듬, 안정적인 라인) 를 줄입니다

페이지 간 구성 요소의 이식성 향상

"마이크로 레이" 없이 모듈 식 라이브러리를 만들 수 있습니다.

2) 기본 메시 요소

컨테이너-최대 컨텐츠 폭, 중심 영역.
열 - 모듈을 배치하기위한 수직 영역.
거터-열 사이의 수평 공간.
여백-컨테이너의 왼쪽/오른쪽에있는 외부 필드.
행/트랙-수평 가이드 (CSS 그리드-라인/트랙).
기준 - 수직 타이포그래피 그리드.

권장되는 수직 리듬: 8-pt (뉘앙스의 경우 4-pt), 크기 및 들여 쓰기 단위는 4/8의 배수입니다.

3) 중단 점 및 컨테이너

• 래스터 컨테이너 (수정. 최대 폭) 큰 화면, 유체-모바일에서.
• 거터는 큰 중단 점으로 부드럽게 증가 할 수 있습니다.
• 열 - "핵심 세트" 로 4/6/8/12.

4) 모듈성 및 밀도

모듈 - 1.N 열과 기준 높이의 배수를 차지하는 내용 블록.

• 편안함 (대시 보드, 읽기): 더 큰 글꼴, 들여 쓰기 16-24.
• 컴팩트 (테이블, 프로 모드): 글꼴 + 0/-1 px, 세로 들여 쓰기 -4/-8, 행 높이가 고정됩니다 (8 배수).

구성 요소에는 최소 밀도의 두 가지 사전 설정이 있어야합니

5) 타이포그래피 및 기준 그리드

기본 라인 높이 (예: 24 px) 를 선택하고 요소의 높이를 동기화하십시오 (버튼 40/48/56 px는 기준선의 배수 임).
헤딩 앵커 수직 리듬: 들여 쓰기 위/아래는 8의 배수입니다.
아이콘을 텍스트 높이로 정렬하십시오.

6) 레이아웃 템플릿

6. 카드 1 개

격자: 모자이크 (수정. 카드 너비) 또는 열 (카드 = N 열).
로딩 할 때 "점프" 를 피하기위한 최소 컨텐츠 높이; 카드 내 골격.
내부 패딩: 중단 점에 따라 16/20/24.

6. 테이블 2 개

전폭 용기; 가로로 스크롤 할 때 첫 번째 열/캡을 동결하십시오.
세포는 기준선 접힘입니다. 숫자 열은 숫자/10 진수로 정렬됩니다.
열이 너무 많으면 XS - 수평 스크롤 대신 "쌓인 레이아웃".

6. 3 가지 양식

XS/SM의 단일 열, MD + 의 2 열 또는 3 열 (탭/섹션의 논리를 고려하여).
필드 + 라벨 + 는 텍스트가 공통 모듈에 맞도록 도와줍니다 (높이는 8의 배수 임).

6. 대시 보드 4 개

안정성을 위해 고정 된 트랙과 구름 (영역) 이있는 그리드.
위젯은 열의 최소 및 최대 너비를 갖습니다. 높이는 기준선의 배수입니다.
다시 말할 때-열 수가 변경되면 위젯을 임의로 나누지 마십시오.

7) 적응성, 자동 레이아웃 및 동작

그리드 앞의 내용: 그리드는 내용을 깨뜨리지 않고 내용에 맞게 조정됩니다.

• 카드/목록에 제약 조건 (왼쪽/오른쪽/중앙) 과 자동 레이아웃을 사용하십시오.
• XS/SM/MD/LG (패딩 변경, 슬롯 순서) 에 대한 구성 요소 옵션을 지원합니다.

• 섹션 레벨 - CSS 그리드 (영역, 열, 행).
• 구성 요소 내부-Flex (축, 공간 균형).

8) CSS 그리드/플렉스-워크샵

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) 들여 쓰기 및 토큰

설계 시스템에서 스케일을 캡처합니다

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• 구성 요소의 내부 들여 쓰기는 '공간' 에서 비롯됩니다.
• 컨테이너의 외부 필드는 '거터 '/' 마진' 입니다.
• 요소 높이는 8의 배수입니다 (40/48/56).

10) 모듈 식 구성 요소

구성 요소는 다음을 수행

각 중단 점에 얼마나 많은 열이 있는지 알고 있습니다.
최소/최대 치수를 갖습니다.

"매직" 픽셀에만 의존하지 마십시오. 토큰 만;

내부 그리드 (제목, 내용, 바닥 글씨) 를 기준선에 유지하십시오.

11) 이미지 및 미디어 부분

종횡비 수정 (예: 미리보기 및 카드의 경우 16/9, 4/3, 1/1).

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

XS에서는 프로모션에만 풀 블리드 (가장자리 주위 그림) 를 사용하고 나머지 내용은 컨테이너를 따릅니다.
이미지 텍스트-슬립/오버레이 만 대비 AA.

12) RTL 및 현지화

그리드 방향은 'dir = "rtl"' 및 ': dir (rtl)' 규칙입니다.
테이블의 열 순서 및 냉동 열-미러링을 고려하십시오.
회선 및 전송 길이는 모듈의 높이를 변경할 수 있습니다.

13) iGaming의 세부 사항

프로모션 영역 및 배너: 큰 모듈이있는 별도의 그리드; 텍스트는 항상 플레이트에 있으며 중요한 알림 (18 +, 한계, 위험) 에 대한 AAA 대비입니다.
리더/등급: 고정 된 첫 번째 열과 끈적 끈적한 헤더, 표 숫자 (표 숫자), 행 높이는 8의 배수입니다.
플레이어/운영의 대시 보드: 위젯 (세션, 예금, RTP, 순 예금) 은 12 그리드에서 3-6 열을 차지합니다. MD/SM에서 캐스케이드 재구성.
토너먼트 카드: 카드 그리드 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); 영구적 인 위치에있는 CTA.

14) 접근성과 초점

포커스 링은 리듬을 깨뜨리지 않아야합니다. 개요 오프셋 또는 내부 의사 요소를 추가하십시오.
최소 클릭 크기: 44 × 44 (모바일 )/32 × 32 (데스크탑).
배치만으로 의미를 인코딩하지 마십시오. 텍스트 레이블과 aria 속성을 저장하십시오.

15) 성능

중첩 그리드의 깊이를 줄입니다: 1 개의 메인 그리드 섹션 + flexes 내부.

수백 장의 카드에 무거운 그림자/마스크를 피하십시오. 평평한 스타일을 목록에 사용하십

미디어 컨텐츠의 게으른로드; 고정 비율은 CLS를 방지합니다.

16) 안티 패턴

"맛을내는 그리드" 일관성 → 각 페이지에서 무너집니다.
Gutter는 섹션에 따라 임의로 다릅니다.
일관되지 않은 밀도 (한 화면에서 컴팩트하고 편안함).
매직 폭 종속 구성 요소 (열/토큰 없음).
대체 레이아웃없이 모바일에서 수평 스크롤이있는 테이블.
다이와 대비 제어없이 이미지의 텍스트.

17) QA 체크리스트

구조

• 열/컨테이너/마진은 중단 점에 해당합니다.
• Gutter는 페이지 내에서 안정적입니다.
• 높이와 들여 쓰기는 8의 배수입니다.

구성 요소

• 열 너비 (XS.. XL) 및 min/max가 정의됩니다.
• 내부 그리드는 기준선과 정렬됩니다.

테이블/양식

• 끈적 끈적한 모자/첫 번째 열; XS에 쌓인 모드.
• 양식 필드는 기준선의 배수입니다. 라벨/도움말 텍스트는 "점프" 하지 않습니다.

A11y

• 포커스 스타일은 리듬을 깨뜨리지 않습니다. 도당 영역은 최소 수준입니다.

성능

• 미디어 블록으로 인한 CLS 없음; 게으른 하중이 활성화됩니다

18) 설계 시스템의 토큰 및 문서

• 값은 '컨테이너', '열', '거터', '공간', 기준선;
• 레이아웃의 예 (카드/테이블/양식/대시 보드);
• 밀도 사전 설정 (Comfort/Compact) 및 구성 요소에 미치는 영향;
• CSS Grid/Flex 및 Figma 스타일/레이아웃 용 코드 스 니펫.

간략한 요약

그리드는 설계와 개발 간의 계약입니다. 브레이크 포인트, 컨테이너, 스피커 및 8pt 리듬 캡처, 디자인 토큰 및 레이아웃 템플릿은 밀도 옵션, 적응성 및 가용성을 제공합니다. 그런 다음 페이지가 예측 가능하게 확장되고 구성 요소가 재사용되며 명령이 더 빠르고 안정적입니다.