grlf grlg grid-layout-flex grid-layout-grid grid-layout-float

https://mins01.github.io/web_work_doc/UI/cssGridLayout/

——=———- flex 사용시 

1. 왼쪽이 h가 2인 item이 있다면, 오른쪽에 h 가1인 item이 여러개 있어도 한줄만 차이하며, 다음줄이 넘어갈 경우, h 3에서 시작한다. (즉, 빈 줄이 생김
2. item 너비의 가변이 자유롭다.
3. 1개가 row하나를 전부 차지할 수 있다. ([data-w=”only”] 부분 확인)

grid 사용시

1. dense 로 설정하면, 빈공간이 최대한 없게 위치한다.
2. item의 너비는 고정이다, 늘리거나 줄이는건 모든 item을 기준으로 해야한다.
3. 1개가 row하나를 전부 차지할 수 없다!

float 사용시

1. 흐름이 좋다. 앞에 h2가 있고 뒤에 h1이 여러개 있으면 빈칸 채워지면서 위치를 잡는다. (grid 와 같음)
2. 최대 최소 너비 적용 불가.

3. 1개가 row하나를 전부 차지할 수 있다. ([data-w=”only”] 부분 확인)

   flex와 grid 둘 다

4. 외각은 무한정 늘어날 수 있다. (gap 이 좀 남는다.)

5. item의 너비와 높이를 지정할 수 있다
6. 왼쪽 row기준 정렬이다.

---

• https://mins01.github.io/web_work_doc/UI/cssGridLayout/

---

🔗original-link