CSS Grid 이해하고 사용하기

이 글은 CSS Grid에 대한 이해를 돕는 글입니다. 자세한 속성과 사용법에 대해서는 참고 사이트 확인해주세요.

Grid 가 나오는 이유는 무엇일까?

Grid를 도대체 왜 사용해야하는지 알아야 어떤 상황에 어떻게 사용할지 정해지기 때문에 알아보겠습니다.

결론부터 말씀드리면 기존에 float를 이용해서 레이아웃을 만들 때는 수직 즉, 세로 방향에 대해서 만들기 어려움이 있었습니다.

이런 어려움을 해소시키기 위해서 나온 것이 *flex *입니다.

Flexbox를 이용해서 레이아웃을 작성하게 되면 수평 혹은 수직 구조를 작성할 때 보다 쉽게 작성할 수 있었습니다.

하지만 수평과 수직 구조를 동시에 작성하기에는 Flexbox를 이용하는데에도 한계가 있었습니다.

 .flex_container {
   width: 500px;
   height: 100px;
   display: flex;
   flex-wrap: wrap;
}
.flex_item {
  flex: 1 1 100px;
}

아래처럼 아이템의 크기를 늘리게 될 경우 넘치게 됩니다.

.flex_item {
  flex: 1 1 150px;
}

4번과 5번이 1,2번과 함께 수직 정렬이 되지 않고 늘어나게 됩니다. 이렇게 되는 이유는 flex는 각각의 행이 기준이 되어 정렬을 하기 때문입니다.
이렇게 2차원레이아웃을 잡는데 어려움이 있었던 flexbox를 개선하기 위해 나온 것이 Grid인 것 입니다.

"Grid는 수평, 수직 레이아웃을 한번에 잡을 수 있는 속성"

Grid로 해결하는 방법에 대해서 알아보도록 하겠습니다.

.grid_container {
  width: 500px;
  border: 1px solid #333;
  height: 100px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, auto));
  margin: 50px auto 0;
}

Grid는 언제 사용하기 좋을까?

이 내용에 해답이 있지는 않지만, 2차원 구조를 쉽게 잡을 수 있다는 점이 있기 때문에 세부적인 콘텐츠를 배치할 때 사용하기 보다 전체적인 페이지 레이아웃을 작성할 때 사용하면 좋습니다. 따라서 전체 레이아웃을 grid를 통해서 잡은 후에 세부 사항들을 flex 로 배치하는 방식으로 많이 사용하고 있습니다.

Grid의 브라우저 지원 범위

IE에서는 11에서도 -ms- prefix를 붙혔을 때 일부 기능만 제공 합니다. 대부분의 속성들이 지원하지 않기 때문에 실제 서비스를 하고 있는 기업에서는 사용하기 어려울 것 같습니다.

Grid가 뭔지 언제 사용해야하는지는 알았고 이제 Grid를 잘 사용하는 방법에 대해서 알아보려고 합니다.
처음에도 말씀드렸듯이 Grid에 대한 기본적인 속성을 정리하는 글이 아니기 때문에 중요한 내용만 알아보도록 하겠습니다.

auto-fill , auto-fit

auto-fill은 아래와 같이 콘텐츠들을 채우고 남는 공간을 그대로 놔둡니다.

.grid_container {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

auto-fit

auto-fit은 아래와 같이 콘텐츠들을 채우고 남는 공간을 콘텐츠들이 나눠가져 남는 공간이 없게 합니다.

.grid_container {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

auto-fit과 minmax를 이용한다면 브라우저의 크기에 따라 부드럽게 변하는 반응형 레이아웃을 쉽게 제작할 수 있습니다.

grid 속성의 단위

Grid와 Flex를 사용하다보면 단위가 헷갈리는 경우가 있는데 그 단위에 대해서도 정리해보도록 하겠습니다.
grid를 사용하면 fr이라는 단위를 많이 사용합니다. 처음에는 이것의 숫자가 크면 많은 공간을 차지하는 줄로만 알았습니다. 틀린 얘기는 아니지만, 정확히 얘기하면 남는 공간에 대한 비율이라고 얘기할 수 있습니다.

.grid_container {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 50px 25% 1fr 1fr 1fr;
}

첫번째 상자는 50px, 두번 째 상자는 25%인 250px의 너비를 갖게됩니다. 나머지 아이템들은 각각 1fr씩 갖게 되는데 위에서 말했던 것 처럼 남는공간 즉, 700px에 대한 공간을 1/3씩 가져가게 됩니다.

fr은 비율이라서 상대적으로 적용되기 때문에 아래와 같은 상황에서는 fr 값에 1말고도 다른 어떤 값을 넣어도 같은 결과가 나옵니다. 나눠가질 값을 비교할 상대가 없기 때문입니다.

.grid_container {
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(4, 100px) 1fr;
}

grid에서의 fr은 flex에서의 단위와 동일합니다. 아래 예시를 보시면 쉽게 이해될 것이라 생각합니다.

.flex_container {
  display: flex;
}
.flex_item:nth-child(1) {flex: 1;}
.flex_item:nth-child(2) {flex: 2;}
.flex_item:nth-child(3) {flex: 2;}
.flex_item:nth-child(4) {flex: 2;}
.flex_item:nth-child(5) {flex: 1;}

min-content

아무래도 Grid를 사용하는 큰 이유 중 하나가 반응형을 위해서 이기도 한데요. 그러기 위해선 사이즈에 따라 가변적으로 변해야하는데요. 컨텐츠의 최소 사이즈에 대한 속성인 min-content에 대해서 정리해보겠습니다.

.grid_container {
  display: grid;
  grid-template-columns: min-content repeat(4, 1fr);
}

한글의 경우 한글자 단위가 최소 콘텐츠라고 계산하여 한글자 단위로 자르게 됩니다. 영어는 단어를 최소 단위로 계산합니다.

word-break속성을 통해서 원하는 기준으로 바꾸면 됩니다. 개행없는 최소 길이를 원한다면break-all 한글 단어 단위로 자르고 싶다면 keep-all을 하게 되면 콘텐츠의 내용에 따라서 길이를 조절할 수 있습니다.

max-content

min-content 와는 반대로 최대 콘텐츠 길이를 뜻하는데 이 것과 minmax속성을 이용하면 아래와 같이 콘텐츠 영역보다 작아졌을 때는 줄어들지 않도록 작성할 수 있습니다. auto 와 비교하면 아래와 같습니다.

max-content

 .grid_container {
   display: grid;
   grid-template-columns: repeat(5, minmax(max-content, 1fr));
}

auto

auto로 하게 될 경우 단어 단위로 쪼갤 수 있기 때문에 콘텐츠의 최소 너비가 더 줄어든 것을 확인할 수 있습니다.

.grid_container {
  display: grid;
  grid-template-columns: repeat(5, minmax(auto, 1fr));
}

오늘 정리한 내용을 토대로 grid를 사용해서 레이아웃을 작성한다면 보다 Grid를 잘 활용할 수 있을 것이라 생각합니다.
혹시 잘못된 내용이 있다면 댓글로 말씀해주시면 감사하겠습니다.