css gird에 대해 알아보자!!

Grid란?

CSS에서 제공하는 레이아웃 모듈 중 하나로, 복잡한 레이아웃을 구현할 수 있는 강력한 기능을 제공합니다. CSS Grid를 사용하면 여러 열과 행을 사용하여 레이아웃을 만들 수 있으며, CSS Grid를 사용하려면 먼저 그리드 컨테이너를 정의해야 합니다. display: grid 속성을 사용하여 그리드 컨테이너를 만들고, grid-template-columns 및 grid-template-rows 속성을 사용하여 그리드의 열과 행을 정의합니다. 각각의 열과 행은 크기를 지정할 수 있으며, fr, auto, minmax(), repeat() 등의 값으로 지정할 수 있습니다.이를 통해 유연하고 반응형인 웹 페이지를 만들 수 있습니다.

 

아래는 CSS Grid의 주요 속성들입니다.

• display: grid : CSS Grid를 사용하기 위해 그리드 컨테이너를 정의합니다.
• grid-template-columns : 그리드의 열을 정의합니다. repeat(), fr, auto, minmax() 등의 값을 사용할 수 있습니다.
• grid-template-rows : 그리드의 행을 정의합니다. repeat(), fr, auto, minmax() 등의 값을 사용할 수 있습니다.
• grid-column : 그리드 아이템의 열 위치를 지정합니다.
• grid-row : 그리드 아이템의 행 위치를 지정합니다.
• grid-area : 그리드 아이템의 위치와 크기를 동시에 지정합니다.

CSS Grid는 강력한 레이아웃 모듈로, 복잡한 레이아웃을 구현할 수 있습니다. Grid와 Flexbox를 함께 사용하면, 다양한 레이아웃을 쉽고 효과적으로 구현할 수 있습니다.

 

다음 그림은 그리드를 쉽게 용어로 정리 한 것입니다.

그리드 용어 정리

다음은 그리드 예시입니다.

 

See the Pen Untitled by ture403 (@ture403) on CodePen.