css 정리(레이아웃 간격 설정)

column-gap

: 칼럼 사이의 좌우 간격 설정

 

row-gap

: 칼럼 사이의 상하 간격 설정

 

grid-template-row

: 행(row)의 배치

 

grid-template-columns

: 열(column)의 배치

 

ex)

grid-template-columns: 200px 200px 500px;

3개의 칼럼을 각각 200px, 200px, 500px로 만들겠다는 의미

grid-template-columns: 1fr 1fr 1fr

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

=> 균일하게 1:1:1 비율인 3개의 칼럼을 만들겠다는 의미

grid-template-columns: 100px 2fr 1fr;

맨 왼쪽 칼럼은 100px로 고정, 나머지 두개의 칼럼은 2:1의 비율로 창을 늘리거나 줄일 때 유연하게 움직이게 됨

 

 

flex-grow

플렉스박스의 유연한 레이아웃을 가능하게 하는 가장 중요한 속성 2가지는 "flex-grow" 와 "flex-shrink" 이다.

두 속성은 "flex-basis" 속성으로 정한 플렉스박스 아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능을 한다.

 

참고자료

https://blogpack.tistory.com/863