masonry 반응형 피시하고 모바일의 모양이 차이가 납니다.
본문
masonry로 반응형으로 이미지 불러오는 부분을 작업중입니다.
피시에서는 아래와 같이 좌우를 줄이면 정상적으로 나오는데
모바일에서 보면
위에 처럼 빈 공간이 생깁니다.
해결 방법이 있을지요?
테스트 도메인은 https://gabincompany.cafe24.com/test.php 이고
소스는 아래와 같습니다.
<script src="http://gabincompany.cafe24.com/skin/board/masonry/masonry.pkgd.min.js?ver=220620"></script>
<script src="http://gabincompany.cafe24.com/skin/board/masonry/imagesloaded.pkgd.min.js?ver=220620"></script>
<div class="grid-wrapper">
<div class="img tall" style="border:1px solid red;">
<div>
<div >
<img src="http://gabincompany.cafe24.com/data/file/masonry/thumb-8a03bd533c7e2dda7711f30a73e0b837_UDvp6fJL_868b3bd11a46748949decef9cfd26b1247935d89_283x362.jpg" alt="" />
</div>
<div>
<span class="bo_tit_sub">테스트8</span>
</div>
</div>
</div>
<div class="img wide" style="border:1px solid red;">
<div>
<div >
<img src="http://gabincompany.cafe24.com/data/file/masonry/thumb-8a03bd533c7e2dda7711f30a73e0b837_9Zpxna6f_825c448ceec274565d70071c3e70adcacced4d28_566x362.jpg" alt="" />
</div>
<div>
<span class="bo_tit_sub">테스트7</span>
</div>
</div>
</div>
<div class="img tall" style="border:1px solid red;">
<div>
<div >
<img src="http://gabincompany.cafe24.com/data/file/masonry/thumb-8a03bd533c7e2dda7711f30a73e0b837_Ox6Nlpiz_eed2f6e3bc7db2133f2516f88aa4e83a8a3c4d1f_283x362.jpg" alt="" />
</div>
<div>
<span class="bo_tit_sub">테스트6</span>
</div>
</div>
</div>
<div class="img tall" style="border:1px solid red;">
<div>
<div >
<img src="http://gabincompany.cafe24.com/data/file/masonry/thumb-8a03bd533c7e2dda7711f30a73e0b837_0tpAK27W_ed09568de43d0f9969ef69817fd9a36becf8aef0_283x362.jpg" alt="" />
</div>
<div>
<span class="bo_tit_sub">테스트5</span>
</div>
</div>
</div>
<div class="img tall" style="border:1px solid red;">
<div>
<div >
<img src="http://gabincompany.cafe24.com/data/file/masonry/thumb-8a03bd533c7e2dda7711f30a73e0b837_FWRmr2Cc_05d504f8905cec9680e4d22b083131cf175eae8b_283x362.jpg" alt="" />
</div>
<div>
<span class="bo_tit_sub">테스트4</span>
</div>
</div>
</div>
<div class="img tall" style="border:1px solid red;">
<div>
<div >
<img src="http://gabincompany.cafe24.com/data/file/masonry/thumb-8a03bd533c7e2dda7711f30a73e0b837_do4A1Dzy_eb6f6b6b353ed8abdb3965b30f3910738596762b_283x362.jpg" alt="" />
</div>
<div>
<span class="bo_tit_sub">테스트3</span>
</div>
</div>
</div>
<div class="img wide" style="border:1px solid red;">
<div>
<div >
<img src="http://gabincompany.cafe24.com/data/file/masonry/thumb-8a03bd533c7e2dda7711f30a73e0b837_GM6nB82c_6fa45a5e6fd999fe204bcf84a9279b9c18432746_566x362.jpg" alt="" />
</div>
<div>
<span class="bo_tit_sub">테스트2</span>
</div>
</div>
</div>
<div class="img tall" style="border:1px solid red;">
<div>
<div >
<img src="http://gabincompany.cafe24.com/data/file/masonry/thumb-8a03bd533c7e2dda7711f30a73e0b837_TxQCjUDy_5188710c10cc178231889d4cecdd6e870b3f314b_283x362.jpg" alt="" />
</div>
<div>
<span class="bo_tit_sub">테스트1</span>
</div>
</div>
</div>
</div>
<style>
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
/*background: linear-gradient(45deg, #190f2c, #200b30);*/
padding: 0px;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
display: inline-block;
}
/* Main CSS */
.grid-wrapper > div {
display: flex;
justify-content: center;
align-items: center;
}
.grid-wrapper > div > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
.grid-wrapper {
display: grid;
grid-gap: 10px;
@media all and (max-width: 768px){
grid-template-columns: repeat(auto-fit, minmax(1fr, 1fr));
}
@media all and (min-width: 768px){
grid-template-columns: repeat(auto-fit, minmax(24%, 1fr));
}
/*grid-auto-rows: 400px;*/
grid-auto-flow: dense;
}
.grid-wrapper .wide {
grid-column: span 2;
}
.grid-wrapper .tall {
grid-row: span 1;
}
.grid-wrapper .big {
grid-column: span 2;
grid-row: span 2;
}
</style>
<script>
var page = 1;
$(window).load(function(){
var $grid = $('#grid-wrapper').masonry();
}
</script>
답변을 작성하시기 전에 로그인 해주세요.
