> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/css-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/css-grid/references.md).

# 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 %}