# CSS Grid 레퍼런스

## about 그리드 <a href="#about-grid-theory" id="about-grid-theory"></a>

{% embed url="<https://youtu.be/lSKmkTesnkM>" %}
Creating CSS Grid 소개 영상 (한글 자막)
{% endembed %}

{% embed url="<http://alistapart.com/article/the-story-of-css-grid-from-its-creators>" %}
IT 크리에이터가 말하는 CSS Grid 이야기
{% endembed %}

{% embed url="<http://labs.jensimmons.com/>" %}
CSS Grid를 사용한 실험적인 레이아웃 | Jen Simmons
{% endembed %}

{% embed url="<http://slidedeck.io/pixelwhip/layout-design-patterns>" %}
레이아웃 디자인 패턴
{% endembed %}

{% embed url="<https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521>" %}
웹 디자인에서 그리드를 사용하는 포괄적인 방법
{% endembed %}

{% embed url="<https://designshack.net/articles/layouts/asymmetrical-design-creating-beautiful-balanced-layouts/>" %}
불규칙 그리드 레이아웃 디자인
{% endembed %}

## 튜토리얼 <a href="#tutorials" id="tutorials"></a>

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>" %}
CSS Grid 레이아웃 | Mozilla 개발자 문서
{% endembed %}

{% embed url="<https://www.mozilla.org/en-US/developer/css-grid/>" %}
Firefox가 지원하는 CSS Grid 인스펙터
{% endembed %}

{% embed url="<https://css-tricks.com/snippets/css/complete-guide-grid>" %}
CSS Grid 완벽 가이드 | CSS-Tricks
{% endembed %}

{% embed url="<http://sydcss-grid.appspot.com>" %}
CSS3의 아주 멋진 새로운 모듈 CSS Grid 레이아웃 | Google
{% endembed %}

{% embed url="<https://tympanus.net/codrops/css_reference/grid>" %}
CSS Grid 완벽 가이드 | Codrops
{% endembed %}

{% embed url="<https://rachelandrew.co.uk/css/cheatsheets/box-alignment>" %}
박스 정렬 치트시트 | rachelandrew\.co.uk
{% endembed %}

{% embed url="<https://gridbyexample.com>" %}
"CSS Grid를 배울 필요가 있다." - 레이첼 앤드류 | gridbyexample.com
{% endembed %}

{% embed url="<https://cssgrid.io/>" %}
Wes Bos와 함께 공부하는 CSS Grid의 모든 것! | cssgrid.io
{% endembed %}

{% embed url="<https://alistapart.com/article/practical-grid>" %}
Eric Meyer의 실용적인 CSS 그리드: 기존 디자인에 그리드 추가하기 | alistaprt.com
{% endembed %}

{% embed url="<https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/>" %}
\[ Floats ⟹ Flexbox ⟹ Grid ] CSS 레이아웃 단계적 향상 | smashingmagazine.com
{% endembed %}

## 도구 <a href="#tools" id="tools"></a>

{% embed url="<https://www.layoutit.com/grid>" %}
CSS Grid 제작 온라인 도구 | layoutit.com
{% endembed %}

{% embed url="<https://cssgrid.cc>" %}
CSS Grid 레이아웃 제작에 도움을 주는 리소스 / 툴 | cssgrid.cc
{% endembed %}


---

# 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://yamoo9.gitbook.io/css-grid/references.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.