# 그리드 레이아웃

## 1. 그리드 레이아웃 시스템 소개

**ProgramGarden Dashboard**는 반응형 12열 그리드 레이아웃을 채택하고 있습니다. 각 열의 기본 너비는 `160px`로 설정되어 있으며, 화면 크기나 브라우저 너비에 따라 열 개수가 자동으로 조정됩니다. 너비가 `160px` 이하로 줄어들더라도 오버플로우 없이 대시보드가 깔끔하게 표시되어 다양한 환경에서 최적의 사용자 경험을 제공합니다.

## 2. 컴포넌트 배치 시 참고 사항

`add_*()` 메서드에서 `position` 파라미터를 사용해 직접 위치를 지정할 수 있습니다. 대시보드 우측 상단의 `컬럼` 표시를 참고하면 현재 적용된 열의 개수를 확인할 수 있습니다. 예를 들어, `12컬럼`이면 한 행에 12개의 열이 적용된 상태이고, `8컬럼`이면 8개의 열이 적용된 상태입니다. 본인의 대시보드에 표시된 컬럼 수를 기준으로 위치를 지정하면 컴포넌트가 정확하게 배치됩니다.

## 3. 모바일 및 태블릿 환경 지원

반응형 레이아웃 덕분에 모바일과 태블릿에서도 자동으로 최적화되어 안전하게 사용할 수 있습니다. 다만, 가장 쾌적한 사용 환경을 위해 데스크탑에서의 이용을 권장합니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://programgarden-dashboard.gitbook.io/docs/invest/grid-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.