[새싹 프론트엔드] 그리드 레이아웃

Ryu·2022년 10월 28일

새싹

목록 보기

10/36

그리드 레이아웃

그리드(grid)

격자, 바둑판을 의미

그리드 레이아웃

웹 사이트를 여러 개의 칼럼(column)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 의미
특징
- 시각적으로 안정된 레이아웃 유지
- 업데이트가 편리
- 자유로운 요소 배치

그리드 레이아웃 속성

display 속성

그리드를 적용한 요소의 바깥 부분을 그리드 컨테이너로 생성

값	설명
grid	컨테이너 안의 항목을 블록 레벨 요소로 배치
inline-grid	컨테이너 안의 항목을 인라인 레벨 요소로 배치

칼럼 줄 지정 속성

값	설명
grid-template-columns	컨테이너 안에 배치할 칼럼의 크기와 개수 지정
grid-template-rows	컨테이너 안에 배치할 줄의 크기와 개수 지정

예시

grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px;

repeat() 함수

값이 반복될 때 줄여서 표현할 수 있는 함수
repeat(반복횟수, 너비)
예시

grid-template-columns: 200px 200px 200px;
grid-template-columns: repeat(3, 200px);

fr(fraction) 단위

그리드 레이아웃에서 상대적인 크기를 지정하는 단위(비율)

예시

너비가 같은 칼럼 2개 배치
```
grid-template-columns: 1fr 1fr;
```
2:1:2로 줄 배치
```
grid-template-rows: 2fr 1fr 2fr;
```

minmax() 함수

최소값 최대값을 지정하여 줄 높이를 유연하게 지정하는 함수
- 영역에 데이터가 많으면 자동으로 칸을 늘려줌
minmax(최소값, 최대값)
예시
- 줄의 최소 높이 100px, 최대 높이 auto
```
grid-template-rows: minmax(100px, auto);
```

auto-fill, auto-fit 값

칼럼 개수를 자동으로 조절해주는 값
auto-fit
- 화면의 남는 공간 없이 꽉 채워서 칼럼을 표시
auto-fill
- 칼럼의 최소 너비만 표시하고 남는 공간은 그대로 둠

그리드 항목의 간격을 지정하는 속성

값	설명
grid-column-gap	칼럼과 칼럼 사이의 간격을 지정
grid-row-gap	줄과 줄 사이의 간격을 지정
grid-gap	칼럼과 줄 사이의 간격을 한번에 지정

그리드 라인을 이용한 배치 속성

종류	설명
grid-column-start	칼럼 시작 라인 번호 지정
grid-column-end	칼럼 마지막 라인 번호 지정
grid-column	칼럼 시작 번호와 끝 번호 사이에 /를 넣어 지정
grid-row-start	줄 시작 라인 번호 지정
grid-row-end	줄 마지막 라인 번호 지정
grid-row	줄 시작 번호와 끝 번호 사이에 /를 넣어 지정

grid-area 속성

각 영역에 템플릿 이름을 지정

.box1 {
    background-color: pink;
    grid-area: box1;
}
.box2 {
    background-color: orange;
    grid-area: box2;
}
.box3 {
    background-color: skyblue;
    grid-area: box3;
}
.box4 {
    background-color: yellow;
    grid-area: box4;
}
.box5 {
    background-color: greenyellow;
    grid-area: box5;
}
.box6 {
    background-color: plum;
    grid-area: box6;
}

컨테이너 영역의 grid-template-areas 속성
- 각 영역을 어떻게 배치할지 지정

#parent {
		...
    grid-template-areas: 
    /* 한 줄에 들어갈 영역을 따옴표로 묶고 빈칸은 . 찍음 */
    'box1 box1 box1'
    'box2 box3 box3'
    'box2 . box4'
    '. box5 .'
    'box6 . .'
}