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

1
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 둘 다
1. 외각은 무한정 늘어날 수 있다. (gap 이 좀 남는다.)
2. item의 너비와 높이를 지정할 수 있다
3. 왼쪽 row기준 정렬이다.
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
3.31
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.18
4.19
4.20
4.21
4.22
4.23
4.24
4.25
4.26
4.27
4.28
4.29
4.30
5.1
5.2
5.3
5.4