CSS - grid

수평선과 수직선으로 이루어진 집합.

 

 

사용방법

.container {
  display: grid;
}

 

기능

1. 격자 나누기
2. 간격
3. 미리 크기 정하기
4. 원하는 위치에 원하는 칸만큼 배치
5. 이름으로 배치

 

 

1. 격자 나누기

• grid-template-rows
• grid-template-columns
• grid-template

grid-template-rows 와 grid-template-columns를 동시에 작성하는 것이 grid-template 이고, 문법은 아래와 같다.

.container{
    grid-template-rows: 100px 100px 100px 100px 100px;
    grid-template-columns: repeat(8, 100px);
}

.container{
    grid-template: repeat(5, 100px) / repeat(8, 100px);
}

rows갯수를 늘리면 칸이 아래로 늘어나고, columns갯수를 늘리면 칸이 오른쪽으로 늘어난다.

 

2. 간격

• gap

 

3. 미리 크기 정하기

• grid-auto-rows
• grid-auto-column

만약 컬럼수는 5개로 이미 결정되어있지만, row수는 아직 정해지지 않았을 때, 아래와같이 사용할 수 있다.

.container{
    grid-template-columns: repeat(5, 150px);
    grid-auto-rows: 70px;
    gap: 10px 10px;
}

4. 원하는 위치에 원하는 칸만큼 배치

• grid-row
• grid-column

해당 위치로의 이동

.purple{
    grid-row: 1;
    grid-column: 2;
}

여러칸에 배치

해당 숫자는 칸이 아니라, 라인이다. grid-column값을 1/5 로 주게되면 세로 1번줄부터 시작해서 세로 5번줄까지 채워진다.

.purple{
    grid-row: 1/4;
    grid-column: 1/5;
}

5. 이름으로 배치

• grid-area
• grid-template-areas

.container{
    display: grid;
    grid-template-areas:
        "r o y g b p"
        "p . g . o .";
}

.red{
    background-color: red;
    grid-area: r;
}
.orange{
    background-color: orange;
    grid-area: o;
}
.yellow{
    background-color: yellow;
    grid-area: y;
}
...

내부 요소들에게 grid-area 로 이름을 붙이고, 그리드에서는 grid-template-areas 에 값을 넣어주면 된다.

'.' 은 칸을 비워두는 것을 의미한다.