[004] HTML, CSS - Grid 적용

안녕하세요~ totally 개발자입니다.

 

오늘은 HTML과 CSS를 활용해서 Grid를 적용해보는 방법에 대해 살펴보도록 하겠습니다. 먼저 기본적으로 grid를 형성하는 방법에 대해 살펴보겠습니다. 여기에서는 쉬운 예제를 위해 inline CSS로 진행했습니다. 아래 코드처럼 container 클래스의 div 태그와 그 안에 product 클래스의 제품 6개 div 태그들을 넣어주었고 9번째부터 19번째 줄까지 CSS 코드를 작성해주었습니다.

여기에서 중요하게 적용해야 하는 CSS는 아래 표로 정리했습니다.

 

display	flex, grid, inline, block 등 속성을 가지고 있으며 flex와 grid의 차이는 flex는 1차원, grid는 2차원으로 flex는 세로 또는 가로 방향 한 방향만 지원하며 grid는 양 방향을 지원합니다.
align-items	flexbox나 grid container의 정렬하기 위해 사용됩니다.
justify-content	주로 flex와 같이 쓰이며 여유 공간이 있을 때 가로축을 기준으로 정렬하는데 사용됩니다.
grid-template-columns	Grid의 column 레이아웃(길이, 수)를 표시하기 위해 사용됩니다.

 

결과는 아래와 같습니다.

 

또한 Table처럼 주로 colspan이나 rowspan을 활용해야 할 때가 있는데 그 경우에는 grid-column, grid-row 속성이 사용됩니다.

아래처럼 코드를 추가했고 제품6 div 태그는 삭제했습니다.

 

결과는 아래와 같고 제품3이 column 3번째, 그리고 row가 첫 번째 줄에서 시작하여 row 2줄을 span할 수 있도록 하는 것입니다.

 

 

grid-column, grid-row에서는 start값과 end값이 나오는데 / 슬래시 기호로 구분하며 이것으로 몇 개를 병합해줄 것인지 정해줄 수 있습니다. 3 / 3은 3번째 column에서 시작해서 3번째 column으로 마치겠다는 의미이며 grid-row의 1 / span 2는 첫째 줄(row)에서 시작하여 2줄을 병합하겠다는 의미입니다. grid-row: 1 / 3으로 적어주셔도 됩니다. 이 grid는 저도 실제로 개발을 해보면서 굉장히 중요하게 여기는 부분 중 하나로서, 여러 가지 방법이 있습니다. bootstrap을 사용해보면서 row, column를 적용할 수도 있고, 테이블을 활용할 수도 있지만 이렇게 grid, flex를 직접 css로 적용해서 사용하는 방법 특히 요즘은 반응형으로 구축이 많이 되기 때문에 아주 강력하다고 생각합니다.

 

[전체 소스 코드]