CSS 레이아웃 배치: flex, grid, gap

 

 

---

 

개요

• UX 레이아웃을 배치할 때 사용하는 스타일 종류를 알아보자.
• 반응형 웹에서 위, 아래, 좌, 우 여백을 주는 방법에 대하여 알아보자

 

flex

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

display: flex;
flex-wrap: nowrap;

 

grid

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(4, 1fr);

grid 스타일 문법

grid-template-rows: {row1의 높이} {row2의 높이} {...} ...
grid-template-columns: {column1의 너비} {column2의 너비} {...} ...
--> grid-template: {-rows ~} / {-columns ~}

--> 1fr: 전체 길이의 한 부분; fraction
--> minmax({min}, {max}) 값
--> min-content/max-content 값

min-content: 요소의 item에 대한 min 길이
max-content: 요소의 item에 대한 max 길이
--> repeat(n, 값) 값으로 반복표현 가능
--> repeat(auto-fit/auto-fill, 값)

auto-fit: 유동적인 사이즈로, 전체 길이에 맞게 설정됨
auto-fill: 정확한 사이즈로, 빈공간을 두도록 설정됨

grid-auto-rows: 요소가 지정 개수보다 많아질 때의 row의 높이
grid-auto-flow: row(기본값), column, ... 요소가 지정 개수보다 많아질 때의 늘어나는 방향
grid-auto-columns: (flow가 column일 때) 요소가 지정 개수보다 많아질 때의 column의 너비

column-gap: ... 열끼리의 gap
row-gap: ... 행끼리의 gap
--> gap: 행, 열끼리의 gap

 

flex와 grid 비교

브라우저 호환성

• flex 자체가 브자우저 호환성이 더 좋지만
• gap을 사용시 grid+gap이 호환성이 더 좋음