그리드는 수직선과 수평선이 교차하는 집합으로 정의할 수 있습니다. CSS 그리드 레이아웃은 페이지를 주요 섹션으로 구분합니다. 그리드 속성은 행과 열을 갖는 그리드 기반 레이아웃 시스템을 제공합니다. 위치를 지정하거나 플로팅하지 않고도 웹페이지를 쉽게 디자인할 수 있습니다. 그리드 레이아웃은 HTML이 아닌 CSS로 표현된 그리드 구조를 생성하는 방법을 제공합니다.

표와 마찬가지로 사용자는 요소를 행과 열로 정렬할 수 있습니다. 하지만 테이블에 비해 CSS 그리드를 사용하면 레이아웃을 디자인하기가 쉽습니다. 다음을 사용하여 그리드의 열과 행을 정의할 수 있습니다. 그리드 템플릿 행 그리고 그리드 템플릿 열 속성.

그리드 컨테이너는 다음을 선언하여 생성할 수 있습니다. 디스플레이: 그리드 또는 디스플레이: 인라인 그리드 요소에. 그리드 컨테이너에는 행과 열 내부에 배치되는 그리드 항목이 포함됩니다.

그리드 대 Flexbox

일반적으로 그리드가 가변상자와 어떻게 다른지에 대한 일반적인 질문이 발생합니다. 그리드는 2차원 레이아웃(동시에 행과 열)에 사용되는 반면, Flexbox는 1차원 레이아웃(행 또는 열)에 사용됩니다. Flexbox는 모든 것이 직선이어야 할 때 사용됩니다.

Flexbox는 단일 열 또는 단일 행에 요소를 배열하는 데 사용됩니다. 반면에 그리드는 여러 열과 행에 요소를 배열하는 것이 가장 좋습니다.

예제를 사용하여 CSS의 그리드를 이해해 보겠습니다.

예

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

산출