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

less than 1 minute read

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기준 정렬이다.


🔗original-link

Updated: