justify-content & align-content
- 바깥쪽 컨테이너가 안쪽 컨테이너보다 커서 남는 여백이 존재해야 적용됩니다.
- flex 레이아웃에서는 각자 주축/교차축 에 대한 정렬방법을 지정했습니다.
- grid 레이아웃에서는 행 / 열에 대한 item들의 배치방법을 결정합니다.
justify-content
- columns의 배치 방법을 설정합니다.
- start, end, center, space-between, space-around 등 flexbox에서 쓰는 값을 대부분 사용할 수 있습니다.
align-items
- rows의 배치 방법을 결정합니다.
- start, end, center, space-between, space-around 등 flexbox에서 쓰는 값을 대부분 사용할 수 있습니다.
justify-items & align-items
- 틀 내부에 존재하는 items의 정렬 방법을 결정합니다.
- grid 틀의 크기보다 item의 크기가 작아 여백이 존재할 때 작동합니다.
- 기본값은 stretch로, 차지할 수 있는 전체 값만큼 확장됩니다.
- justify-items를 설정 시 grid 내부 items의 값만큼 재정의됩니다.
'웹 프론트 엔드' 카테고리의 다른 글
CSS Grid - 단위 (0) | 2024.03.21 |
---|---|
CSS Grid - 단일 아이템 속성 (0) | 2024.03.21 |
CSS Grid (0) | 2024.03.20 |
CSS Animation (0) | 2024.03.18 |
CSS transition (0) | 2024.03.18 |