CSS - 그리드 레이아웃

그리드 레이아웃으로 2차원 레이아웃 설계하기

display: grid;

 

grid-template-rows: 100px 200px; → 두개의 행, 각각의 높이 100px, 200px

grid-template-colums: 1fr 2fr; → 두개의 열, 첫번째 열은 1fr, 두번째 열은 2fr (1:2)

fr : 비율

1fr 1fr은 repeat(2, 1fr);과 같은 방식으로도 표기 가능 

최소수치를 정해주고싶으면 minmax(100px, 1fr) minmax(100px, 1fr);과 같은 방식으로도 가능

= repeat(2, minmax(100px, 1fr))

 

row-gap: 10px; → 행 사이의 갭

column-gap: 10px; → 열 사이의 갭 

 

align-items: stretch; → 세로 방향 정렬 속성 (default : stretch)

center, start, end등이 있음

align-self: stretch; → 특정 부분만 세로 방향에서 정렬

 

justify-items: center; → 가로 방향에서 정렬

justify-self: stretch; → 특정 부분만 가로방향 정렬

 

place-items: end start; → align-items, justify-items를 함께 사용

place-self: end start; → 특정 부분만 가로, 세로방향 정렬 

 

grid-template-areas:

'A C'

'D B';

grid-area: A; grid-area: B; grid-area: C; grid-area: D; 와 같은 방식으로도 배치가능

 

개발자도구의 grid속성의 번호를 활용하여 

grid-column-start: 1;

grid-column-end: 3;

grid-row-start: 1;

grid-column-end: 3; 과 같은 방식으로도 배치가 가능

+ grid-column: 1/3; grid-row: 1/3;과 같이 단축속성도 존재.