CSS display: grid 기본적인 가로 정렬 방법

최근 display: grid라는 스타일을 알게 되었습니다. 유심히 살펴보니까 이것으로 레이아웃을 구성할 수 있다고는 하는데 제 생각에는 grid는 셀을 대체하는 표현이 될 수 있을 것 같다는 생각이 들었습니다. HTML의 수많은 요소들 중 <table> 이라는 태그를 써서 우리는 표를 구현합니다. 하지만 HTML5로 넘어오면서 이제 테이블 태그는 거의 사용하지 않는 추세입니다. 사용하는것도 다소 복잡하구요. 차라리 div 태그로 표를 구성하는게 훨씬 깔끔하고 쉽습니다. 하지만 div요소의 쓰임새는 정말 많죠. 그래서 특별히 display: grid라는게 개발된것이 아닐까라는 생각이 들었습니다.

 

grid와 inline-grid

기본적으로 요소의 성격은 크게 세가지죠. 블록요소, 인라인요소, 인라인-블록 요소 이렇게요. 이 부분에 대해서는 이미 과거에 자세히 설명드렸으니 혹시 잘 모르시겠다면 아래의 글을 정독해 주시기 바랍니다. HTML을 이제 막 입문하신 분들이라면 정말 정말 정말 (X10000) 중요한 개념입니다. 반드시 숙지해야합니다. 수학을 배움에 있어서 사칙연산과 같습니다. 덧셈과 뺄셈을 모르면 곱셈 및 나누기를 할 수 없는 것 처럼요.

 

HTML 태그 기본 분류 - 블록요소 인라인요소

HTML 태그 기본 분류 - 블록요소 인라인요소

grid도 블록요소 성격을 가집니다. inline-grid도 인라인-블록 요소 성격을 가집니다. 이 점을 알고 계시면 될 것 같습니다.

 

grid-template-columns

이 스타일 옵션은 가로 정렬에 대한 것입니다. columns는 행이라는 뜻이죠? 엑셀로 비유하자면 행과 열이라고 생각하시면 됩니다. 행은 가로셀, 열은 세로셀을 뜻합니다. 즉 grid-template-columns는 가로(행)에 대한 정렬을 정의합니다. 아래와 같은 HTML 구성을 예시로 들어보겠습니다.

 

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

여기에서 다섯개의 아이템 div 들을 grid를 사용해 모두 가로 정렬해 보겠습니다. 그러면 CSS는 다음과 같이 구성됩니다.

 

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
    background-color: #f54;
}

.item {
    padding: 10px;
    border: 5px solid #000;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    background-color: #ff0;
}

container 클래스명의 div 안에 있는 grid-template-columns를 잘 살펴보시면 다소 처음 본 단위가 보일겁니다. fr이라는 단위죠. fraction의 약자로서 한글로 풀어보자면 「비율」이라는 의미입니다. 즉 1비율씩 다섯 번 들어있음을 알 수 있습니다. 다섯개를 마크업한 결과가 바로 아래에 있습니다.

 

결과 확인

See the Pen CSS - display: grid; by rgy0409 (@rgy0409) on CodePen.

 

보시면 모두 다 1fr씩, 그러니까 1:1:1:1:1 비율로 가로 정렬이 되었음을 알 수 있습니다. item 클래스명의 div 가로 크기가 비율로 계산되기에 반응형으로 적용됩니다. 백그라운드에 색을 넣은 이유는 아이템의 div가 얼마만큼의 영역을 차지하는지를 시각화하기 위해서입니다. 그러면 다섯번 마크업된 이유를 조금 아시겠나요?

 

정답은 마크업의 개수만큼 가로셀이 완성되는것에 있습니다. 만약 1fr을 4개만 넣으면 어떻게 될까요? 그러면 4번까지는 가로 정렬이 되고 마지막 5번이 아래로 내려옵니다. 이때, item 클래스명의 div는 모두 동일한 크기를 갖게 됩니다. 따라서 5번 div는 1, 2, 3, 4번 div와 크기가 같습니다. 또한 반응형으로 적용됩니다.

 

grid-template-columns: 1fr 1fr 1fr 1fr; 결과는 이렇다.

이렇게 말이죠. 브라우저 가로 크기가 변화함에 따라 반응형으로 셀의 가로 크기도 변화함을 알 수 있습니다. 그러면 1fr을 세개만 넣으면 결과는 어떻게될지 예상 되시죠?

 

grid-template-columns: 1fr 1fr 1fr; 결과는 이렇다.

그렇습니다. 3개만 마크업 했으므로 1, 2, 3번 div만 가로 정렬되고 나머지 두개인 4, 5번 div는 아래로 밀려납니다.

 

옵션 종류

grid-template-columns에 사용 가능한건 1fr만 있는것은 아닙니다. px도 사용 가능하고 %도 사용 가능합니다. 다만 %보다는 fr을 사용하는게 훨씬 깔끔합니다. 부모요소인 컨테이너 div의 가로 전체 크기에 비율로 대응하기에 자식 요소의 가로 크기가 더 커져 빠져나갈 일이 없어지기 때문입니다. 즉 다음과 같이 사용할 수 있을겁니다.

 

grid-template-columns: 100px 200px 300px;
grid-template-columns: 100px 2fr 1fr;

첫번째의 경우는 px를 사용했기에 고정 크기로 적용되어 반응형 브라우저에는 다소 맞지 않는 형태가 됩니다. 두번째의 경우는 1번 div만 고정형 크기가 되고 나머지 2번, 3번 div가 100px을 제외한 2:1 비율로 가로를 차지하게 됩니다.

 

줄여쓰기 가능 (repeat)

위에서 grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 라고 마크업을 했었습니다. 근데 만약 가로로 10개를 배치한다고 가정했을 때, 1fr을 10번이나 입력하는건 조금 미련해 보이기도 합니다. 그래서 이것을 아래처럼 줄여서 표현할 수 있습니다.

 

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

repeat는 반복이라는 뜻입니다. 괄호 안에는 두 개의 옵션이 들어가는데 첫번째는 반복 횟수, 두번째는 크기를 정의합니다. 이 방법을 알고 있으면 여러개의 자식 요소들을 매우 쉽고 간편하게 가로 정렬시킬 수 있습니다. 끝.