Masonry layout(핀터레스트 레이아웃)(2) - 핀터레스트처럼 items의 너비는 고정되어있고 화면 해상도에 따라 단의 갯수가 늘어나려면?

화면 크기가 짱 넓을 때

어느정도 화면 비율을 줄일 때 

 

이전 포스팅 참조

https://aosceno.tistory.com/354

Masonry layout(핀터레스트 레이아웃)

 

엄청 간단하다. 컨테이너(부모)에서 column-width 값만 설정하면 된다 (column-count를 설정하지 않으면 되는 것이다..)
아이템(자식)의 너비는 걍 100%로 하고! ㅇㅇ

https://www.w3schools.com/css/css3_multiple_columns.asp

CSS Multiple Columns

그치만 내가 남이라고 가정했을 때 이런 지만 알아듣는 빡추 포스팅을 보면 분탱이가 터질 것이다...
저는 아직..티스토리에서 프론트엔드를 어케 갖고놀아야하는지 잘 모르므로 걍 쿨하게 파일을 남깁니다.

티스토리업로드용(2)_핀터레스트처럼items고정_단수유동.zip

0.00MB

 

안 그런게 어딨겠냐만 진짜 요즘엔 검색을 잘함 < 곧 실력이 되는 것 같다 -ㅠ-;;
하루 죙일 "different height grid layout css" "dynamic height grid layout css"로 검색했으나 원하는 답을 찾지 못했음
어떻게 검색을 하다가 생활코딩의 masnory layout (감사합니다 생활코딩)까지 겨우 닿아서...

쨌든 내 포스팅은 별로지만 훌륭한 사이트들을 링크하였으니 나처럼 방황하는 영혼이 없길 바라며 검색 키워드 남김

벽돌식 레이아웃, 핀터레스트 레이아웃, pinterest layout

 

----------------

 

그리고 columns와 상관은 없지만 ^_^ 진짜! 그리드 레이아웃에 관한 좋은 사이트

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout

Basic concepts of grid layout

 

그러나 개구린 익스플로러를 사랑하는 ㄷ ㅐ한민국에선 그리드레이아웃이 너무나도...동작하지 않기에 ^.^ 걍...
display:table; // display:table-cell; 을 쓰고 있었음
float:left보단 display:table이 훨씬 발암도가 낮지만 (자동으로 컨텐츠의 내용에 따라 높이가 가변적으로 변함) (반면 float얘네는 부모의 높이값이 휑 날아가버리니 css에서 고정값을 줘야하므로 안의 내용이 유동적일땐 쓰지 않는것이 좋다 ㅇㅇ)

https://colintoh.com/blog/display-table-anti-hero

The Anti-hero of CSS Layout -

여기는 display:table;을 사용한... 모든 브라우저에서 지원되는 그리드레이아웃 대체 방법

하여간 display:table을 쓰다보면 아무래도 table처럼 반응하다보니 아무리~ display:table-cell의 너비를 지정해줘도 지 멋대로 굴 때가 꽤 있어서 상단에 colgroup과 col이 되어줄 더미들을 ㅎ...써주곤 했는데...이렇게 하면 결국 걍 table해서 tr td에 넣어줄껄 뭐하고 있는거지 ㅋㅋㅋ 란 생각이 자주 들어서...

 빡추는 앗 그럼 columns로 홈페이지 레이아웃을? ㅎㅎ 생각했다가 애초에 신문칼럼처럼 일정한 간격으로 기둥을 세우는것 외엔 안된다는걸 한 30초 뒤에 깨달음