[TIL]Day 28. CSS grid를 정리해보자!

오늘의 포스팅은 css 끝판왕 기능이라고 할 수 있는 gird에 대해서 알아보도록 하겠습니다!

 

CSS grid가 뭔가요?

 

css grid는 기존의 display:flex를 대체할 수 있는 새로운 display property라고 생각하시면 됩니다.

flex와 grid의 가장 큰 차이점은 flex는 1차원 레이아웃인 반면, grid는 2차원 레이아웃이라는 점입니다.

 

출처: 1분 코딩

2차원 레이아웃을 지원하기 때문에 grid는 flex에 비해 더 다양하고 고차원적인 레이아웃이 가능해진다는 장점이 있습니다. 

 

 

기본 용어 정리

 

• 그리드 컨테이너 (Grid Container)
  display: grid가 적용되는, grid의 전체 영역입니다. grid 컨테이너 안의 요소들은 display:grid의 영향을 받아 정렬됩니다.
• 그리드 아이템 (Grid Item)
  grid 컨테이너의 자식 요소들입니다. 바로 우리가 정렬하고자 하는 개별 아이템들을 의미합니다.
• 그리드 트랙 (Grid Track)
  grid의 행(Row) 또는 열(Column)을 말합니다
• 그리드 셀 (Grid Cell)
  grid의 한 칸을 가리키는 말입니다. 엑셀에서의 셀과 같은 개념이라고 생각하시면 됩니다.
• 그리드 라인(Grid Line)
  grid 셀을 구분하는 선입니다. 앞서 말한 그리드 트랙을 통칭하는 개념이라고도 할 수 있습니다. 
• 그리드 번호(Grid Number)
  grid 라인의 각 번호입니다.
• 그리드 갭(Grid Gap)
  grid 셀 사이의 간격입니다.
• 그리드 영역(Grid Area)
  grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합이에요. 그리드 컨테이너의 전체가 될 수도 있고 부분이 될 수도 있는 영역입니다. 

 

grid poperty 종류

 

grid의 property 종류는 엄청나게 많습니다. 그래서 이 포스팅에서 그 전부를 다루기보다는 일부분만 다루고 나머지 필요한 부분은 독자분들께서 검색해보시는 것을 추천드리겠습니다.

 

• grid-template-rows: 그리드의 rows크기(가로)를 조절하는 속성입니다. 
  grid-template-columns

 

.container {
	grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
    /* 1분 코딩 예시 */
}

위의 예시를 보면 repeat 안에 두 인자를 받아 1fr의 비율로 화면을 5분할 하고 있음을 컴퓨터에 이야기하고 있습니다. repeat(3, 1fr 4fr 2fr); 이런 식의 패턴도 가능합니다.

 

• minmax: 최솟값과 최댓값을 지정할 수 있는 함수입니다. 예를 들어 minmax(100px, auto)라고 작성하면 그리드의 최소 크기는 100px, 최대는 자동으로(auto) 늘어나게 해준다는 것입니다. 즉 아무리 내용의 양이 적더라도 최소한 높이 100px은 확보하고, 내용이 많아 100px이 넘어가면 알아서 늘어나도록 처리해 준 예시입니다.

 

• auto-fill과 auto-fit: auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채우는 property입니다.

 

이외에도 다양한 property가 있으니 검색해보셔서 다양한 속성을 적용해보시면 보다 멋지고 화려한 화면을 구현하실 수 있으실 겁니다.

 

마무리

 

요즘 프로젝트를 진행하면서 예전에는 쉽다고 생각했던 CSS의 세계가 이렇게나 방대하고 거대한 것임을 새롭게 깨닫고 있습니다. 이번 프로젝트를 계기로 CSS에 대해서도 더 열심히 공부할 수 있도록 노력해야겠습니다.