레이아웃 grid를 알아보자

grid layout이란

SS Grid Layout을 사용하여 웹 디자인에서 사용되는 그리드 시스템입니다. CSS Grid Layout은 웹 페이지의 레이아웃을 더욱 쉽게 조정하고 배치할 수 있도록 해주는 강력한 레이아웃 시스템입니다. Grid 레이아웃은 Flexbox와 함께 사용될 수 있습니다. Flexbox는 아이템들을 수평 또는 수직으로 배치하기 위한 것이고, Grid 레이아웃은 아이템들을 그리드 형태로 배치하기 위한 것입니다. 이러한 두 가지 레이아웃 시스템을 함께 사용하면 웹 페이지 레이아웃을 더욱 정교하고 다양하게 조정할 수 있습니다.

 

grid의 속성

• grid-template-columns / grid-template-rows: 그리드의 열과 행의 크기를 정의합니다. 이 속성은 공백으로 구분된 단위 값들을 받으며, 여러 개의 값을 사용하여 그리드를 구성할 수 있습니다.
• grid-column-gap / grid-row-gap: 그리드의 열과 행 사이의 간격을 정의합니다.
• grid-template-areas: 그리드의 영역을 정의합니다. 이 속성은 문자열 값으로 구성된 그리드 영역 이름을 받으며, 그리드 영역을 나타내는 CSS 셀렉터를 사용하여 지정합니다.
• grid-template: grid-template-columns, grid-template-rows, grid-template-areas를 함께 사용하여 그리드의 열과 행 크기, 영역 등을 한 번에 정의할 수 있습니다.
• grid-column-start / grid-column-end / grid-row-start / grid-row-end: 그리드의 열과 행에서 아이템의 시작과 끝을 지정합니다.
• grid-column / grid-row: grid-column-start, grid-column-end, grid-row-start, grid-row-end를 함께 사용하여 그리드의 열과 행에서 아이템의 위치를 한 번에 지정할 수 있습니다.
• grid-area: grid-row-start, grid-column-start, grid-row-end, grid-column-end를 함께 사용하여 그리드에서 아이템의 위치와 크기를 한 번에 지정할 수 있습니다.

grid를 사용하지 않았을 때의 코드입니다.

레이아웃이 아직 정돈 되지 않았습니다.

 

grid를 사용 후의 코드입니다.

grid-template-areas: 				// 영역을 세로축 기준으로 두 영역으로 나눕니다.
    "header header"
    "nav nav"
    "aside section"					// 그림상에서 aside영역과 section 영역이 나뉩니다.
    "footer footer";   
grid-template-rows: 100px 100px 780px 100px;		// 높이 값을 header부터 차례로 지정합니다.
grid-template-columns: 400px 800px;

grid를 사용후 레이아웃이 예쁘게 정돈된 모습입니다.