[Hweb] CSS grid 기본

1. grid란?

grid란 레이아웃을 설정하는 CSS속성입니다.

grid 속성을 이용하면 웹페이지의 레이아웃을 한번에 잡을 수 있습니다.

물론 모든 웹디자인에 grid를 사용하기 좋은것은 아닙니다.

보통 규칙적인 비율로 디자인된? 웹사이트에 적용하면 편리합니다. 

레이아웃을 잡고자하는 가장 큰 영역에 display: grid를 표기하여 사용하면됩니다. 또, grid안에 grid도 사용 가능합니다. 

Internet Explorer를 제외한 모든 브라우저에서 호환됩니다.

 

2. grid 용어

그리드를 사용하려면 주요 구문의 개념을 잘 이해해야 합니다.

아래에 그리드의 다양항 속성들을 정리해 놓았는데 주요 구문의 개념을 알아야 속성의 뜻도 이해하실 수 있을거에요.

1. 그리드 컨테이너(gird container)

그리드 아이템들의 부모요소, 즉 그리드의 가장 큰 틀입니다. 그리드 컨테이너에 display: grid 표기합니다.

2. 그리드 아이템(grid item)

그리드 컨테이너의 자식요소를 의미합니다.

3. 그리드 라인(grid line)

그리드를 분할하고 있는 선을 의미합니다. 그리드는 열과 행으로 분할되어 있습니다.

아래의 사진에서 실선과 점선으로 표시된 선이 그리드 라인입니다.

 

*MDN이미지 참조

4. 그리드 트랙(grid track)

두개의 그리드 라인 사이의 공간, 즉 그리드의 열과 행을 뜻합니다.

아래의 사진은 그리드 행 라인 1, 2로 구성된 행 트랙입니다.

 

*MDN이미지 참조

5. 그리드 셀(grid cell)

열과 행사이의 한 공간을 의미하며, 그리드를 구성하는 가장 작은 단위입니다.

아래의 셀은 그리드 행 라인 1, 2와 그리드 열 라인 1, 2로 구성된 셀입니다.

 

*MDN이미지 참조

6. 그리드 영역(grid area)

하나 이상의 셀로 구성된 공간을 의미합니다.

그리드 영역 은 본질적으로 직사각형 이어야 합니다 . 예를 들어, T자형 또는 L자형 격자 영역을 생성하는 것은 불가능합니다. 아래의 영역은 행 라인 1, 3 과 열 라인 1, 3 으로 구성된, 4개의 셀이 합쳐진 그리드 영역입니다.

 

*MDN이미지 참조

 

 

3. grid 속성

아래는 gird 속성의 종류와 간단한 정의를 적어보았습니다.

속성의 디테일한 의미와 사용방법은 예제와 함께 따로 정리를 하겠습니다.

1. 컨테이너 속성

 

속성명	정의
grid-template	grid-template-areas, grid-template-rows, grid-template-columns 속성의 축약형 속성
grid-template-areas	그리드 영역의 이름을 할당하여 그리드 템플릿을 정의하는 속성
grid-template-rows	그리드 트랙의 행 크기를 설정하는 속성
grid-template-columns	그리드 트랙의 열 크기를 설정하는 속성
grid-auto-columns	암시적 그리드에서 생성된 트랙의 열 크기를 설정하는 속성
grid-auto-rows	암시적 그리드에서 생선된 트랙의 행 크기를 설정하는 속성
grid-auto-flow	암시적 그리드의 자동 배치 알고리즘을 컨트롤하는 속성
grid	grid-template-*** 와 grid-auto-*** 속성의 축약형 속성
grid-gap	grid-row-gap 과 grid-column-gap 속성의 축약형 속성
grid-row-gap	그리드 행의 간격을 지정하는 속성
grid-column-gap	그리드 열의 간격을 지정하는 속성
align-content	그리드 컨텐츠를 열 기준으로 정렬하는 속성
justify-content	그리드 컨텐츠를 행 기준으로 정렬하는 속성
place-content	align-content 와 justify-content 속성의 축약형 속성
align-items	그리드 아이템을 열 기준으로 정렬하는 속성
justify-items	그리드 아이템을 행 기준으로 정렬하는 속성
place-items	align-self 와 justify-self 속성의 축약형 속성

2. 아이템 속성

 

속성명	정의
grid-row	grid-row-start 와 grid-row-end 속성의 축약형 속성
grid-row-start	그리드 행 내에서 격자 항목의 시작 위치를 지정하는 속성
grid-row-end	그리드 행 내에서 격자 항목의 종료 위치를 지정하는 속성
grid-column	grid-column-start 와 grid-column-end 속성의 축약형 속성
grid-column-start	그리드 컬럼 내에서 그리드 항목의 시작 위치를 지정하는 속성
grid-column-end	그리드 컬럼 내에서 그리드 항목의 종료 위치를 지정하는 속성
grid-area	그리드 항목의 크기와 위치, 또는 영역 의 이름을 설정하는 속성
place-self	align-self 와 justify-self 속성의 축약형 속성
justify-self	단일 그리드 아이템을 행 기준으로 정렬하는 속성
align-self	단일 그리드 아이템을 열 기준으로 정렬하는 속성
order	그리드 아이템의 배치 순서를 지정하는 속성
z-index	그리드 아이템의 쌓이는 순서를 지정하는 속성

 

4. grid 단위

다음은 그리드에서 사용되는 주요 단위입니다.

1. fr

fr은 공간의 비율을 의미합니다.

 

<div class="container">
    <div class="item1"><span>1</span></div>
    <div class="item2"><span>2</span></div>
    <div class="item3"><span>3</span></div>
    <div class="item4"><span>4</span></div>
    <div class="item5"><span>5</span></div>
    <div class="item6"><span>6</span></div>
</div>

.container {
	width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 2fr;
}

2. min-content

그리드 아이템이 포함하는 컨텐츠의 최소 크기를 의미합니다.

 

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: min-content 1fr min-content;
}

3. max-content

그리드 아이템이 포함하는 컨텐츠의 최대 크기를 의미합니다.

 

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
}

4. auto-fill, auto-fit

그리드 컨테이너의 크기에 맞게 트랙의 크기를 자동으로 조정합니다.

auto-fill과 auto-fit은 간단한 차이점을 제외하면 결과가 동일하며, 그리드 아이템의 크기나 개수가 명확할 필요가 없는 경우 유용하게 사용할 수 있습니다.

 

아래의 예제는 컨테이너의 width값이 1800px / 1500px / 900px 일때의 결과입니다.

컨테이너의 크기에 따라 자동으로 행과 열이 조정되는것을 확인할 수 있습니다.

 

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

 

아래의 코드처럼 auto-fill자리에 숫자를 넣어 비교해보세요.

 

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
}

** auto-fill, auto-fit 차이점

auto-fill과 auto-fit은 차이점은 그리드 컨테이너가 하나의 트랙에 모든 아이템을 수용하고도 공간이 남을 때 발생합니다.
auto-fill은 남는 공간을 그대로 유지하고, auto-fit은 남는 공간을 축소합니다.

 

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

 

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

 

 

 

4. grid 함수

다음은 그리드에서 사용하는 주요 함수입니다.

그리드의 속성값을 함수를 사용하여 나타낼 수 있습니다.

1. repeat

repeat() 함수는 트랙의 크기값을 반복합니다.

아래의 문법으로 사용합니다.

 

repeat('반복하고자 하는 횟수', '행 또는 열의 크기');

 

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

 

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr 2fr);
}

2. minmax

minmax() 함수는 트랙의 최소/최대 크기를 지정할 수 있습니다.

 

minmax('최솟값', '최댓값');

 

아래의 예제는 컨테이너의 width값이 1300이상일때와 1300미만일때의 결과입니다.

 

.container {
      height: 100vh;
      display: grid;
      grid-template-columns: minmax(300px, 1fr) minmax(1000px, 1fr);
}

 

위의 예제 코드와 아래의 예제 코드를 직접 비교해보세요.

 

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(300px, auto) minmax(1000px, auto);
}

3. fit-content

fit-content()  함수는 트랙의 크기를 컨텐츠 크기에 맞춥니다.

minmax(auto, max-content)와 비슷한 의미를 가집니다.

 

fit-content('컨텐츠의 최대 크기');

 

.container {
    height: 100vh;
    display: grid;
    grid-template-columns: fit-content(1000px) fit-content(400px);
}

 

지금까지 그리드의 주요 용어, 속성 종류, 속성값에 쓰이는 단위와 함수를 정리해보았습니다.

다음에는 그리드 속성들을 디테일하게 다뤄보도록 하겠습니다.