그리드 레이아웃은 이미지 갤러리나 상품 목록 등에 사용되는 매우 자주 볼 수 있는 레이아웃이다. 보통 화면 크기에 따라 다단의 갯수가 변하고 다단의 너비는 사이의 간격은 고정 값을 가지게 된다. 구현이 CSS 만으로는 까다롭기 때문에 자바스크립트를 사용해서 많이 구현한다.

마이크로소프트에서 그리드 레이아웃을 제안한 이후로 시간도 많이 지났고 이제는 대부분의 브라우저에서 구현을 했기 때문에 까다로운 그리드 레이아웃을 CSS 그리드를 이용해서 쉽게 구현할 수 있게 되었다. 구문도 매우 간단하다.

ul.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-column-gap: 8px;
	grid-row-gap: 8px;
}

그리드 항목 상단 요소에 적용하면 화면 크기에 따라 다단의 갯수가 자동으로 선택되는 반응형 그리드 레이아웃을 만들 수 있다. 참고했던 글이 있었는데 아무리 검색을 해도 다시 찾을 수가 없어서 그나마 가장 비슷한 글을 대신 출처로 링크한다. repeat()나 minmax()와 같은 새로운 함수들에 대한 설명도 잘 되어 있다. auto-fill이나 auto-fit에 대한 글도 참고해보면 좋다.

이 방법의 가장 큰 단점은 인터넷 익스플로러에서 동작하지 않는다는 점이다. IE10이 나올 때 그리드 레이아웃을 지원했지만 지금 사용하는 표준화 된 구문과는 상당한 차이가 있어서 IE10까지 지원하는 그리드 레이아웃은 현재의 방법으로 만들기는 어렵다. 그리드 자동 배치도 안되고 일일이 들어갈 그리드 위치를 지정해 줘야 한다. 'Should I try to use the IE implementation of CSS Grid Layout?'에 이에 대해 자세히 설명이 되어 있다. 이 글보다 최근에 쓰여진 'IE에서 CSS 그리드 사용하기: CSS 그리드와 Autoprefixer'를 보면 뭔가 더 할 수 있는 여지가 있지만 내 개인적인 생각은 간단한 문제를 지나치게 복잡하게 해결하는 것 같다.

그래서 calc를 이용해서 동일하게 구현해 봤다. 기능은 동일하지만 해상도별로 다단의 크기를 얼마로 할지를 일일이 계산해서 지정해 줘야 한다. IE를 지원해야 한다면 이 방법을, 그럴 필요가 없다면 그리드 레이아웃을 사용하면 된다.

ul.calc {
	margin: -8px 0 0 -8px;
	overflow: hidden;
}
ul.calc li {
	margin: 8px 0 0 8px;
	width: calc(100.00% - 8px);
	float: left;
}
@media (min-width: 324px) {	/* 158 * n + 8 */
	ul.calc li {
		width: calc(50.00% - 8px);
	}
}
@media (min-width: 482px) {
	ul.calc li {
		width: calc(33.33% - 8px);
	}
}
...
@media (min-width: 1588px) {
	ul.calc li {
		width: calc(10.00% - 8px);
	}
}

작동하는 전체 코드는 예제 코드를 참고하면 된다.