CSS grid 핵심 4가지 요약 정리

 

CSS grid 핵심 요약 정리를 해보겠습니다.

 

grid는 flex와 함께 모던 웹 디자인에서 많이 쓰이는 기술입니다.

 

table과 같이 행, 열로 레이아웃을 구성하는 것이지만 table보다 자유자재로 설정할 수 있습니다.

그리드의 구조

 

1. 그리드 사용법

 

그리드를 쓰려면 플렉스와 마찬가지로 하나 이상의 자식이 있어야 합니다. 플렉스를 모르신다면 아래 글을 참고해주세요.

 

CSS flex 7가지 속성 요약 정리

 

부모에 display: grid를 하면 자식 요소들(gird-item)에 그리드를 적용할 준비가 된 것이고, 이 부모를 grid-container라고 합니다.

 

그냥 grid라고 쓰면 블록 요소로 되고, display: inline-gird라고 쓰면 그리드 요소들이 인라인으로 되지만 저는 거의 쓰지 않았습니다.

 

 

2. 행, 열

 

그리드는 행과 열로 구성되어 있으며 다음과 같이 부릅니다.

 

• 행 : row
• 열 : column

사용 방법은 아래와 같습니다.

 

div{
	display: grid;
	grid-template-columns: 100px 200px 300px;
	grid-template-rows: 100px 200px 300px;
}

 

위 코드에서는 100, 200, 300 이렇게 3번을 썼습니다. 따라서 열과 행이 각각 3개씩 생성됩니다.

 

크기를 적지 않고 auto로 지정해서 남는 공간을 자동으로 크기 설정할 수도 있습니다.

 

또한 여러번 적지 않고 repeat를 쓰면 좀 더 편합니다.

 

grid-template-rows: repeat(3, 1fr)

 

참고로 fr은 균일하게 나누기 위한 단위 용어입니다.

3. 간격

 

그리고 행과 행 사이, 열과 열 사이, 행과 열 사이의 간격을 gap이라고 합니다.

 

• 행열 간격 : gap
• 행의 간격 : row-gap
• 열의 간격 : column-gap

 

행과 열 모두 균일한 간격을 줄 때 gap을 쓰고, 행과 열이 각각 간격이 다를 때 row-gap이나 column-gap을 씁니다.

 

 

4. 그리드 라인

 

이번에는 조금 헷갈릴 수 있는데, 표를 생각하시면 됩니다.

 

그리드에는 행 라인, 열 라인이 있습니다. 그리고 이 라인을 명시해서 요소를 원하는 위치와 영역으로 배치할 수 있습니다.

 

출처 : W3school

 

cloumn-start, column-end

 

예를 들어, 그리드 컨테이너 안에 item1이라는 div박스가 하나 있고 1~2열까지 배치하려면 아래와 같이 합니다.

 

 

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

 

 

1열 부터 2열까지 배치하려 할 때 gid-column-end를 3으로 한다는 점을 꼭 기억해주세요.

 

 

이는 float에서 더이상 float 흐름에 속하지 않을 요소에 clear:both를 하는 것과 유사한 특징입니다.

 

CSS float, display, visibility, opacity 요약 정리

 

 

다시 본론으로 돌아와서, 위와 같이 코드를 적용하면 이렇게 자유자재로 표같은 레이아웃을 구성할 수 있습니다.

 

출처 : W3school

 

row-start, row-end

 

마찬가지로 아래와 같이 행 라인으로 요소를 배치할 수 있습니다.

 

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

마무리

 

이 밖에도 그리드 템플릿이라고, 한 번 설정한 그리드 레이아웃을 반복해서 쓸 수 있는 기능을 비롯해 다양한 그리드 설정이 있습니다.

 

하지만 이 글에 소개해드린 기능만 잘 사용해도 그리드를 잘 사용하실 수 있을 것이라 생각합니다.

 

 

플렉스보다 헷갈리기 쉬운 개념들이라, 직접 해보시는 것을 추천합니다. 

 

W3school 사이트 그리드 예제 페이지에서 직접 예제를 실행해보세요.

 

 

여기까지 CSS grid 핵심 요약 정리를 마치겠습니다. 읽어주셔서 감사합니다.