CSS Flex vs Grid

기존 레이아웃 속성과 다른점

inline-block, float, absolute : 요소 자체에 속성을 부여
Flexbox, Grid : 부모요소에서 레이아웃을 제어(자식도 가능)

Flexbox

특징

1차원 레이아웃(2차원도 가능)
컴포넌트용
용도에 맞게 사용

소개

display를 flex로 바꾸면 "flex 서식 컨텍스트"가 생성
즉, 기본적으로 모든 자식 항목은 플렉스박스 레이아웃
알고리즘에 따라 배치

Flex 부모 속성들

.container { display: flex; }

flex-direction
flex-wrap
justify-content
align-items
align-content

Flex direction

주축: 자식 항목은 컨테이너의 시작점에 묶여 있습니다.
교차축: 자식이 컨테이너 전체를 채우도록 늘어납니다.
- 기본이 stretch인 이유?

Main Axis vs. Cross Axis

용어

justify — 주축을 따라 무언가를 정렬
align — 교차축을 따라 무언가를 정렬
content — 분산시킬 수 있는 "항목"의 그룹.
items — 개별적으로 정렬할 수 있는 단일 항목.

옵션 비교

Flex 자식 속성들

flex grow

남아있는 공간을 사용하여 항목을 성장
기본값 0
남는 공간이 있을 경우에 해당

flex grow의 예시 그림

flex grow에 대한 작동 방식 예제

flex shrink

아이템이 축소되는 능력을 정의
기본값 1
비례적으로 축소되는 것을 원하지 않는 경우
부모 요소의 너비보다
자식요소들을 합친 너비가 클 경우에 해당

flex shrink의 예시 그림

flex shrink에 대한 작동 방식 예제

flex-basis

아이템의 기본 크기를 설정(기본값은 auto)
Flex row에서 flex-basis는 width와 동일한 작업을 수행
Flex column에서 축이 바뀌기 때문에 flex-basis는 height와 같은 역할
justify-content는 주축을 따라 하위 항목을 배포하며
주축이 가로로 실행되든 세로로 실행되든 정확히 동일한 방식으로 작동

최소 크기 문제

컨테이너가 특정 지점 아래로 줄어들면 콘텐츠가 넘칩니다!
하지만 왜 그럴까요? 검색 입력은 필요한 만큼 축소될 수 있어야 합니다! 왜 축소를 거부하나요?
그 이유는 바로 최소 크기입니다.
Flexbox 알고리즘은 최소 크기 이하로 자식을 축소하는 것을 거부합니다. flex-shrink를 아무리 높게 설정해도 콘텐츠가 더 이상 줄어들지 않고 넘칩니다!

min-width 속성을 사용하여 최소 크기를 재정의

주의사항

justify-content: space-between

퍼블리싱과 실제 서비스의 차이
콘텐츠의 개수가 정해진 경우에만 사용
동적으로 아이템이 변경되는 경우에는 미사

실제로 2개만 있다면?

order 속성

order 속성을 이용해서 시각적인 위치를 바꿀 수 있지만 접근성을 위해서 주의

flexbox 예제

텍스트 줄수에 상관없이 가운데로 오는 방법

Swiper에서 최대 높이를 기준으로 채우는 방법

버튼 영역을 하단에 위치시키는 방법

z-index

position 속성이 요소에 적용된 경우에만 'z-index'를 추가
예외적으로 flex 항목(flex 컨테이너 내부의 요소들)에
'z-index'를 적용할 수 있다

Grid

특징

2차원 레이아웃(1차원도 가능)
복잡한 레이아웃

Grid 부모 속성들

.container { 
  display: grid; 
}

grid-template
justify-items
align-items
grid-auto-flow
justify-content
align-content
grid-auto-rows

grid-auto-flow

자동 배치 알고리즘이 작동하는 방식을 제어하여
자동 배치된 항목이 그리드에 흐르는 방식을 정확하게
지정합니다.

grid-auto-rows

암시적으로 생성된 그리드 행 트랙 또는 트랙 패턴의
크기를 지정합니다.

Grid 자식 속성들

justify-self
align-self
grid-column
grid-row

Grid 레이아웃 방법

그리드 영역 이름을 지정하는 레이아웃
라인 기반 배치를 사용한 그리드 레이아웃
명명된 그리드 선을 사용하는 그리드 레이아웃

그리드 영역 이름을 지정하는 레이아웃

.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "content sidebar"
    "footer footer";
}
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}
.content {
  grid-area: content;
}
.sidebar {
  grid-area: sidebar;
}

라인 기반 배치를 사용한 그리드 레이아웃

.container {
  display: grid;
}
.header {
  grid-area: 1 / 1 / 2 / 3;
  /* 
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 3;
  */
}
.footer {
  grid-area: 3 / 1 / 4 / 3;
}
.content {
  grid-area: 2 / 1 / 3 / 2;
}
.sidebar {
  grid-area: 2 / 2 / 3 / 3;
}

명명된 그리드 선을 사용하는 그리드 레이아웃

.container {
  display: grid;
  grid-template-columns: 
    [full-start] 1fr
    [popout-start] 220px
    [content-start] 1400px [content-end]
    220px [popout-end]
    1fr [full-end];
}
> * {
  grid-column: content;
}
.popout {
  grid-column: popout;
}
.full {
  grid-column: full;
}

CSS 그리드 동일 열!

1fr 1fr 1fr은 작동하지만 몇 가지 문제가 있습니다!

그리드에서의 absolute 작동 방식

절대 위치를 가진 그리드 자식이 있는 경우
그리드를 사용하여 위치를 지정할 수 있습니다.

참고 사이트 https://dev.to/nicm42/using-position-absolute-in-a-grid-1apg

Grid를 완성시키는 속성의 탄생

Subgrid

Subgrid는?

CSS Grid는 매우 강력한 레이아웃 엔진이지만 상위 그리드에 만들어진 행 및 열 트랙은 그리드 컨테이너의 직접 하위 요소를 배치하는 데만 사용할 수 있습니다.
작성자가 정의한 이름이 지정된 그리드 영역 및 선은 직계 하위 요소 이외의 다른 요소에서 손실되었습니다.
subgrid를 사용하면 트랙 크기, 템플릿 및 이름을 중첩된 그리드와 공유할 수 있습니다.