CSS 그리드 입문

CSS 그리드는 요소를 수평과 수직으로 동시에 배치할 수 있는 방법입니다. 플렉스박스보다 더 발전된 방법이지만, 익히기는 더 복잡합니다.

그리드를 만들려면 요소에 display 속성을 grid 값으로 설정해야 합니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
}

그러면 요소는 2차원 그리드로 변환되며, 요소는 수직(열)과 수평(행)으로 배치됩니다. 열과 행이 교차하는 영역을 셀이라고 합니다.

특별한 속성을 사용하면 요소를 행과 열 모두에 배치할 수 있습니다. 이를 통해 예를 들어 다음과 같은 것들을 쉽게 만들 수 있습니다:

다음 강의들에서 먼저 열을 기준으로 요소 배치를 배운 후, 행 배치를 학습하고, 마지막으로 이 모든 것을 종합해 보겠습니다.