[CSS] Grid, Flex, Position

Flex

1차원 요소 구성에 용이
수평, 수직 구조

Grid

2차원 요소 구성에 용이

<div class ="container">
  </div>

.container {
  display:grid;
}

grid영역안에 있는 모든컨텐츠는 gird cell로 분류됨

grid-template-columns: 100px 100px 100px
grid-template-rows: 100px 100px 100px
grid-template-rows: repeat(3,1fr)

행열 합치기

열번호 1,2
행번호 1,2,3

grid-column:1/2;
grid-row:1/3;

---

Position

position은 아무값도 정해주지않으면 static

relative

현재 위치에서 상하좌우 이동 (본인기준)

absolute

2번에 absolute를 부여하면 다른아이템들이 해당아이템의 크기를 무시한체 배치됨 (본인 relative로 선언된 부모기준)

body기준으로 top 30px 영향
->absolute는 해당아이템을 다른 레이아웃으로 보내버림 따라서 1,3은 2번을 무시하고 기존 레이아웃으르 따름

fixed

사용자의 화면을 기준으로 고정