이 글은 CSS Grid에 대해서 몰랐던 내용들과 개념을 정리하는 글입니다. 자세한 속성과 사용법에 대해서는 참고 사이트 확인해주세요.

`

Grid를 언제 왜 써야하는지 알아야 사용할 이유가 생기기 때문에 이 부분에 대해서 정리해보겠습니다.

결론부터 말씀드리면 flex는 하나의 행 또는 열 즉, 1차원의 레이아웃을 잡는데 용이하고, Grid는 행과열을 동시에 사용하는 2차원 레이아웃을 잡는데 용이합니다.

flex

기존에 float혹은 table 로 수평 레이아웃을 잡는 어려움을 해결하기 위해 flex가 나왔습니다. 덕분에 flex를 통해서 수평, 혹은 수직에 대해서 구조를 잡을 때 쉽게 잡을 수 있게 되었습니다.

하지만 flex에서도 아래와 같은 상황에서는 문제가 발생합니다.

아래처럼 flex_container가 자식 요소들의 너비보다 클 경우 넘치지 않지만,

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

image

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

.flex_item {
  flex: 1 1 150px;
}

image

4번과 5번이 1,2번과 함께 수직 정렬이 되지 않고 늘어나게 됩니다. 이렇게 되는 이유는 flex는 각각의 행이 기준이 되어 정렬을 하기 때문입니다.

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;
}

image

Grid는 언제 써야할까?

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

하지만 새로운 기술인 만큼 지원하지 않는 브라우저도 많습니다.

image

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

auto-fit 과 auto-fill

Auto-fit과 auto-fill의 차이점은 컨테이너에 콘텐츠들을 채워놓고 남은 공간을 어떻게 사용하는지입니다.

Auto-fill

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

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

image

auto-fit

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

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

image

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

grid 속성의 단위

fr (fractional unit)

grid를 사용하면 fr이라는 단위를 많이 사용합니다. 처음에는 이것의 숫자가 크면 많은 공간을 차지하는 줄로만 알았습니다. 틀린 얘기는 아니지만, 정확히 얘기하면

남는 공간에 대한 비율이라고 얘기할 수 있습니다.

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

image

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

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

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

image

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;}

image

min-content

grid아이템이 최소 너비를 갖게 해주는 단위입니다.

auto값과 동일한 것 아냐? 라고 생각했었지만 auto와 min-content는 아래와 같이 차이가 있습니다.

auto

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

image

min-content

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

image

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

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));
}

image

image

auto

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

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

image

이 속성을 사용하면 가변적인 콘텐츠에서의 대응이 가능할 것 같습니다.