[CSS] grid 속성 총정리(grid container,grid item)
flex에 이어 오늘은 grid에 대해 알아볼 차례다
먼저 flex와 grid의 차이점을 설명하자면,
flex는 한 컨테이너 안에서 한 가지 방향(1차원)만 설정할 수 있었다면
grid는 한 컨테이너 안에서 가로,세로 즉 두 가지 방향(2차원)을 설정할 수 있다는 점이다
1. grid는 부모요소인 grid container와 자식요소인 grid item으로 구성되어 있다
flex와 마찬가지로 grid도 container와 item이 존재하고 각각 적용 가능한 속성이 다르다
부모요소인 grid container에 display: grid;를 주면 그 아래 자식요소는 grid item이 된다
display: grid; 는 기본적으로 block의 속성을 가지고 있고(수직 쌓임)
inline속성을 가진 container를 만들고 싶으면 display: inline-grid; 를 주면 된다(수평 쌓임)
*위 내용은 container에 관한 설정이므로 item에는 영향을 주지 않는다
2. grid container에 적용 가능한 속성
grid-template-rows
grid-template-columns
grid track(행, 열)의 크기를 설정하는 속성
각종 단위 사용 가능
.container{
display: grid;
grid-template-rows: 100px 50% auto;
grid-template-columns: 100px 50% 1fr;
}container의 row를 100px, 50%, auto로, columns를 100px, 50%, 1fr로 만들겠다는 뜻이다
- fraction(fr)
fr은 숫자의 비율대로 트랙의 크기를 나누어 각각의 row, columns에 적용하는 단위
아래처럼 설정하면 container의 columns은 각각 1:2:1 비율을 가지게 된다
.container{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
- repeat함수
repeat(반복횟수, 반복값)
container{
display: grid;
grid-template-row: 200px 100px 200px 100px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}repeat을 사용하게 되면 반복되는 값을 불필요하게 기술하지 않아도 된다
container{
display: grid;
grid-template-row: repeat(2, 200px 100px);
grid-template-columns: repeat(7, 1fr);
}
- minmax함수
minmax(최소값, 최대값)
아래처럼 설정하면 container안의 column은 item의 내용이 작더라도 최소한 200px을 유지하고, 그 이상이라면 자동으로 늘어나도록 설정된다
.container{
display: grid;
grid-template-columns: minmax(200px, auto);
}
- auto-fill, auto-fit
auto-fill
범위 안에서 최대한 많은 column을 생성(item이 모자라면 비워둠)
auto-fit
현재 가지고 있는 범위 안에서 item을 늘려 영역을 가득 채움
.container{
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
grid-template-columns: repeat(auto-fit, 20%);
}
grid-auto-row
grid-auto-columns
row와 column의 개수를 미리 알 수 없는 경우 사용하는 속성
아래처럼 설정하면 몇개인지 모를 row를 최소한 200px 그 이상은 자동으로 늘어나게 설정된다
.container{
display: grid;
grid-auto-row: minmax(200px, auto);
}
grid-auto-flow
배치하지 않은 아이템이 자동 배치되는 흐름을 결정하는 속성
grid-auto-flow: row;
- 각 행 축을 따라 차례대로 배치
grid-auto-flow: column;
- 각 열 축을 따라 차례대로 배치
grid-auto-flow: row dense; (dense)
- 빈영역을 메우며 각 행 축을 따라 차례대로 배치
grid-auto-flow: column dense;
- 빈영역을 메우며 각 열 축을 따라 차례대로 배치
row-gap
column-gap
gap
셀 사이의 간격을 설정하는 속성
.container{
display: grid;
row-gap: 10px;
column-gap: 20px;
gap: 20px;
}순서대로 row의 간격 10px, column의 간격 20px
row, column 두 간격 모두 20px
초기엔 속성 앞에 grid가 붙었으므로 호환성을 위해 아래처럼 쓰기도 한다
.container{
display: grid;
grid-gap: 20px;
gap: 20px;
}
grid-template-areas
각 영역에 이름을 지정하고 그 이름을 이용하여 배치할 수 있게하는 속성
.container{
display: grid;
grid-template-areas:
"header header header"
"main main a"
". . none"
"footer footer footer";
}위처럼 container에 설정한 뒤
(*빈영역은 마침표 또는 none을 적어주면 됨)
해당 아이템 요소에 grid-area 속성으로 같은 이름을 지정하여 매칭할 수 있게 해준다
.header { grid-area: header; }
.main-content { grid-area: main; }
.side { grid-area: a; }
.footer { grid-area: footer; }
grid-template
grid-template-rows, grid-template-columns, grid-template-areas
세 가지 속성을 한 줄에 설정할 수 있는 속성
- 기본문법
grid-template: <grid-template-rows> / <grid-template-columns>;
grid-template: <grid-template-areas>;
아래처럼 사용도 가능하다
.container {
display: grid;
grid-template:
"header header header" 80px
"main main a" 350px
". . ." 50px
"footer footer footer" 130px
/ 2fr 100px 1fr;
}
.header { grid-area: header; }
.main { grid-area: main; }
.side { grid-area: a; }
.footer { grid-area: footer; }위 내용은 아래와 같이 해석할 수 있다
.container {
display: grid;
grid-template-rows: 80px 350px 130px;
grid-template-columns: 2fr 100px 1fr;
grid-template-areas:
"header header header"
"main main a"
". . ."
"footer footer footer";
}
justify-content
아이템 컨텐츠의 수평축 정렬 방법을 설정하는 속성
align-content
place-content
justify-items
align-items
place-items
*바빠서 다음에 이어서 작성하겠습니ㄷ...ㅏ............*