레이아웃 CSS - grid

grid는 웹사이트의 복합적인 레이아웃을 표현할 수 있는 강력하고 쉬운 틀이다. 

 

 

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

레이아웃을 만들기 위한 기본적인 html구조를 div로 만들었다.

부모 요소인 container 컨테이너라고 하고, 자식요소를 item 아이템이라고 한다.

grid-container는 선, item이 모인 하나의 grid이고 item은 선 안의 내용으로 각각의 칸을 의미한다.

컨테이너 안의 아이템들이 어떻게 배치되는지를 정해주어야 하고, 컨테이너에 적용되는 속성/ 아이템에 적용되는 속성을 구분해야 한다.

 

 

.container{
            display: grid;
        }

CSS에서 container의 display를 grid 속성으로 설정한다.

grid를 사용한다고 선언한 것일뿐 나머지 속성을 지정해주지 않으면, 화면에서 표현되는 것은 없다.

grid의 형태를 만들어 주기 위해서는  grid-template-rows / grid-template-columns 속성을 이용한다.

 

 

grid에 columns(열)과 rows(행)을 만들기 위해서는 grid-template-columns과 grid-template-rows 속성을 사용해야한다.

grid-template-rows는 행(row)의 배치를 결정하고, grid-template-columns는 열(column)의 배치를 결정한다.

 

 

grid-template-columns : 열의 배치 결정

grid-template-columns: 1fr 2fr 1fr;  -> 열을 1:2:1의 비율로 지정한다. 

grid-template-columns: 200px 300px 100px;  -> 열을 각각의 길이로 지정한다.

grid-template-columns: 200px 1fr 1fr;  -> 길이 + 비율을 동시에 지정할 수도 있다.

 

 

grid-template-rows : 행의 배치 결정

columns와 동일하게 사용한다.

 

 

repeat(반복횟수, 반복값) : 반복되는 값 처리

grid-template-columns: 1fr 1fr 1fr 1fr 1fr;  -> 반복되는 값은 repeat으로 묶어줄 수 있다.

grid-template-columns: repeat(5,1fr) 으로 위의 문장을 간단하게 표현할 수 있다.

grid-template-columns: repeat(3, 2fr 1fr)은 2:1:2:1:2:1을 의미한다.

 

 

minmax(최소,최대) : 최소값, 최대값 지정

최솟값과 최댓값을 지정할 수 있는 함수입니다.
minmax(100px, auto) -> 최소 100px, 최대는 안의 내용에 따라 자동으로 늘어난다.

grid-template-rows: repeat(3, minmax(100px, auto));  -> minmax(100px,auto)크기의 열 3번 반복해서 지정한다.

 

 

auto-fill / auto-fit

auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 너비의 허용범위 안에서 자동으로 지정되는 것이다.

차이점은, auto-fill은 남은 영역은 비워둔 상태로 두고, auto-fit은 남은 영역까지 모두 채우는 것이다.

        .container1{
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
        }
        .container2{
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
        }

    <div class="container1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>    
    <div class="container2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

위의 container1은 autofit을 지정했고, 아래의 container2는 autofill을 지정한 것이다.

 

 

 

row-gap / column-gap / gap : 그리드 셀 간격 설정

row-gap: 행 간격 / column-gap: 열 간격 / gap: 행, 열 간격 을 지정한다.

 

.container{
row-gap: 10px;
column-gap: 30px;
}

행, 열 간격을 각각 10px, 30px으로 지정했다.

 

 

.container {
	gap: 10px 30px;
}

위 내용을 gap으로 지정할 수도 있다. (행 10px, 열 30px 간격 설정)

 

 

.container {
	gap: 10px;
}

행, 열 모두 10px 같은 간격으로 설정할 때는 위와 같이 gap을 한번만 지정한다. 

 

 

 

grid-column-start / grid-column-end / grid-column 

grid-row-start / grid-row-end / grid-row

: 각 셀의 영역을 지정

 

 

item이 나타날 위치를 지정해주는 것인데, 칸이 아닌 grid-line(선)을 중심으로 계산해야 한다. 

열, 행 번호를 위와 같이 확인할 수 있다.

 

grid-column-start : 특정 item을 나타내기 시작할 열을 지정

grid-column-end: 특정 item을 나타내기를 끝낼 열을 지정

grid-row-start : 특정 item을 나타내기 시작할 행을 지정

grid-row-end: 특정 item을 나타내기를 끝낼 행을 지정

grid-row / grid-column : 특정 아이템 나타날 행, 열의 범위 지정 (/으로 구분한다)

 

grid-row-start : 2; grid-row-end : 4; 으로 나타낸 것을 grid row로 한번에 나타낼 수 있다. -> grid-row : 2/4; 

grid-column-start : 2; grid-column-end : 4; 을 grid-column으로 한번에 나타낸다. ->  grid-column : 2/4;

 

 

 

grid-template-areas : 각 영역의 이름을 이용해서 배치

        .container{
            grid-template-areas: 
            "header header header"
            "nav nav aside"
            "section section aside"
            "footer footer footer"
            ;

위 태그로 영역 이름을 지정해주고 배치하였다. 아래 그림과 같이 영역을 나눌 수 있다.

 

 

 

align-items : 세로 방향 정렬

아이템들을 세로(column축) 방향으로 정렬해서 컨테이너에 적용한다.

stretch

start

center

end

 

justify-items : 가로 방향 정렬

아이템들을 가로(row축) 방향으로 정렬해서 컨테이너에 적용한다.

stretch

start

center

end

 

 

place-items : align-items와 justify-items를 같이 쓸 수 있는 단축 속성
align-items, justify-items의 순서로 공백을 사이에 두고 작성한다. 하나의 값만 쓰면 두가지 속성에 모두 동일하게 적용된다.

 

 

align-content : 아이템 그룹 세로 정렬

Grid 아이템들의 높이를 모두 합한 값이 Grid 컨테이너의 높이보다 작을 때 Grid 아이템들을 전체 통째로 정렬하는 속성

stretch

start

center

end

space-between

space-around

space-evenly

 

 

justify-content : 아이템 그룹 가로 정렬

Grid 아이템들의 너비를 모두 합한 값이 Grid 컨테이너의 너비보다 작을 때 Grid 아이템들을 전체 통째로 정렬하는 속성

stretch

start

center

end

space-between

space-around

space-evenly

 

 

place-content : align-content와 justify-content를 같이 쓸 수 있는 단축 속성
align-content, justify-content의 순서로 공백을 사이에 두고 작성한다. 하나의 값만 쓰면 두가지 속성에 모두 동일하게 적용된다.

 

 

align-self : 개별 아이템 세로 정렬

개별 아이템을 세로(열) 방향으로 정렬해서 아이템에 적용한다.

stretch

start

center

end

 

justify-self : 개별 아이템 가로 정렬

개별 아이템을 가로(행) 방향으로 정렬해서 아이템에 적용한다.

stretch

start

center

end

 

 

place-self : align-self와 justify-self를 같이 쓸 수 있는 단축 속성

 

 

 

order : 시각적 배치 순서

아이템들의 시각적 나열 순서를 결정하는 속성

작은 숫자일 수록 먼저 배치된다.

 

 

z-index : z축 정렬

숫자가 클 수록 위로 올라오고, position의 z-index와 동일하다.