들어가며
목록화면을 퍼블리싱 작업할 때, 종종 display: grid를 사용한다. 여백을 잡을 때, 특히 gap을 사용해 열과 행 사이의 간격을 컨트롤하기 쉬웠기 때문이다. 근데 display: flex에서도 가능한 줄 몰랐어서 찾아보고 기록 남기려한다.
사용 방법
1. 사용 조건
인접한 요소가 있을 때, gap 스타일 속성으로 갭을 만든다.
적용대상 : multi-column elements, flex containers, grid containers❓multi-column (다중 칼럼)
column-count 속성을 사용해 몇개의 단으로 레이아웃을 나눌 경우,
그 사이의 간격을 column-gap 뿐만아니라 gap 속성으로도 조정할수있다.
column-count: 3;
gap: 20px;
2. 사용 형식
gap: 4em 10px
/* gap = <'줄간격'> <'열 간격'> */
브라우저 호환성
현재 muluti-column에 대한 gap 스타일 속성이 일부만 지원하는 것 외에 flex-box와 grid은 모든 브라우저에서 지원된다. 자세한 내용은 아래 참고사이트 목록 중 첫 번째 클릭!
참고사이트
주니어 프론트엔드개발자