[CSS] display: grid

 

display: grid를 사용하면 가로 세로 방향으로 2차원 적인 레이아웃을 만들 수 있다.

 

※ display: flex는 한 방향으로만 레이아웃이 가능했다.

 

먼저 container 안에 item 요소들을 배치할 것이다.

 

1. container에 display: grid; 추가

이것만 입력하면 아무 일도 일어나지 않을 것이다.

 

2. container에 grid-template-coulmns, grid-template-rows 지정

: grid-template-columns와 grid-template-rows는 그리드의 형태를 정의한다.

.container{
	display: grid;
    grid-template-columns: 10vw 30vw 50vw;
    grid-template-columns: 1fr 2fr 2fr;
    grid-template-columns: repeat(4, 2fr);
    grid-template-columns: 20vw 2fr;
    grid-template-columns: 20vw 30vw auto;
    
    grid-template-rows: 10vh 30vh 50vh;
    grid-template-rows: 1fr 2fr 2fr;
    grid-template-rows: repeat(4, 2fr);
    grid-template-rows: 20vw 2fr;
    grid-template-rows: 20vw 30vw auto;
}

 

grid-template-columns & grid-template-rows

 

: 10vw 30vw 50vw는 columns을 10vw, 30vw, 50vw로 나누겠다는 의미

 

: fr은 fraction으로 숫자 비율대로 트랙의 크기를 나눔.

  (1fr 1fr 1fr은 1:1:1, 1fr 2fr 2fr은 1:2:2)

 

: 고정 크기와 가변 크기 섞어서 사용 가능

  20vw 1fr 2fr이면 첫번째 column이 20vw로 고정되고 나머지가 1:2 비율로 움직임.

 

repeat() 함수

: 반복되는 값을 자동으로 처리

: repeat(반복횟수, 반복값).

: repeat(2, 1fr 3fr)도 가능

 

minmax 함수

: 최솟값과 최댓값을 지정할 수 있는 함수

: minmax(10vw, auto)이면 최소 10vw, 최대는 자동으로 늘어나게 설정하라는 의미이다. 

 최소 10vw는 고정이고 내용이 늘어나 10vw가 넘어가면 자동으로 늘어난다.

 

auto-fill & auto-fit

: repeat() 함수와 함께 사용된다.

grid-template-columns: repeat(auto-fill, minmax(10vw, 1fr);
grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr);

auto-fill

: 설정된 너비에서 가능한 많은 셀들을 만들 때

: 빈 공간이 있어도 셀의 길이가 증가하지 않음

 

auto-fit

: grid 컨테이너 내부에 공간이 남을 경우 그 공간을 각 셀들이 나눠 갖음

: 빈 공간을 셀들이 나누어 가져 딱 맞게 길이가 설정됨

: 셀의 길이가 전체 너비에 맞게 늘어남

 

 

grid-template-areas

: grid- area 속성으로 설정된 그리드 영역의 이름을 참조하여 템플릿 영역 설정

: 그리드 영역의 이름이 반복되면 그리드 셀을 병합함

: 마침표(.)는 비어있는 셀을 의미

.container {
  grid-template-rows: repeat(3, 300px);
  grid-template-columns: repeat(4, 1fr);

  grid-template-areas:
    "header header header header"
    "main main . sidebar"       
    "footer footer footer footer"; 
}

/* 그리드 영역 이름 설정 */
.header  { grid-area: 'header';  }
.main    { grid-area: 'main';    }
.sidebar { grid-area: 'sidebar'; }
.footer  { grid-area: 'footer';  }

 

 

column-gap & row-gap & gap

: 셀 사이 간격을 설정

• column-gap: column 사이 간격
• row-gap: row 사이 간격
• gap: column과 row 간격 모두 설정됨

 

3. item에 각 셀의 영역 지정

.item1 {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

grid-column-start & grid-row-start

: column과 row의 시작 범위를 설정

 

 

grid-column-end & grid-row-end

: column과 row의 끝 범위를 설정

 

 

grid-column & grid-row

.item {
	grid-column: 1 / 4;
    grid-column: 1 / span 3;
	grid-row: 1 / 3;
    grid-row: 1 / span 2;
}

: start와 end의 속성을 한 번에 씀

 

: grid-column: 1 / 4는 1에서 시작해서 4에서 끝내라는 명령

 

: span은 몇 개의 셀을 차지할 것인지 지정하는 방법

  grid-column: 1 / span 3;은 1번 라인에서 3개의 칸 지정

 

 

4. 아이템들을 가로, 세로 방향 정렬

.container {
	align-items: stretch;
	align-items: start; 
	align-items: center;
	align-items: end;
    
        justify-items: stretch;
	justify-items: start; 
	justify-items: center; 
	justify-items: end; 
}

 

align-items: 세로 방향 정렬

align-items: stretch;

align-items: start;

 

justify-items: 가로 방향 정렬

 

justify-items: start;

justify-items: center;

 

place-items

: align-items와 justify-items 같이 쓸 수 있음

: align-items  justify-items 순서로 작성

: 하나면 두 속성 모두 적용

 

 

5. grid 내 모든 아이템들을 정렬

.container {
	align-content: stretch;
	align-content: start;
	align-content: center;
	align-content: end;
	align-content: space-between;
	align-content: space-around;
	align-content: space-evenly;
    
    justify-content: stretch;
	justify-content: start;
	justify-content: center;
	justify-content: end;
	justify-content: space-between;
	justify-content: space-around; 
	justify-content: space-evenly;
}

align-content

: grid 내 모든 아이템 그룹을 세로로 정렬

align-content: end;

align-content: space-between;

 

justify-content

: grid 내 모든 아이템 그룹을 가로로 정렬

justify-content: end;

justify-content: space-between;

 

place-content

: align-content와 justify-content를 같이 쓸 수 있음

 

 

6. 아이템을 개별로 정렬하기

align-self

: 해당 아이템만 개별로 세로 방향으로 정렬할 때 사용

 

justify-self

: 해당 아이템만 개별로 가로 방향으로 정렬할 때 사용

 

place-self

: align-self와 justify-self를 같이 쓸 수 있음