넓이와 높이를 체크, position을 absolute로 변경하여

레이아웃을 벽돌 쌓듯 변경해주는 라이브러리 입니다.

인라인 형태로 입력된 css는 masonry 라이브러리가 동작한 것이 맞습니다.

2열로 변경하고자 하시면 css를 아래와 같이 하시면 될 듯 합니다.

#kboard-koalaa-news-feed-origin-list4 .kboard-list .kboard-first-news-feed-item { width: 50% }

추가로 남겨주신 링크에 접속하여 표시되는 html만 봤을 때는

list.php 파일을 수정하시다 div를 닫지 않으시거나 어떤 태그를 닫지 않으신 듯 합니다.

list-item 안에 list-item이 또 표시되고 있습니다.

의도하신 것이 아니라면 확인해보시는 것을 권장드립니다.

고맙습니다.

그런데 현재 알려주신 상태로 적용을 해봤습니다.

그런데 하나의 게시물만 보이고 다른 게시물은 보이지가 않네요.

https://imgur.com/a/czUezp9

css 상의 

.kboard-list{
 
 position: relative;

 height: 2491.91px;

 }

.kboard-first-news-feed-item kboard-list-item{

  position: absolute;

  left:0px;

  top:0px;
}

의 상태입니다. position 이나  height: 2491.91px; 의 경우 제가 설정한게 아닌데 masonry 에서 자동 설정된 값인가요?

2열로 바꾸기 위해 css 싸이즈 값을

.kboard-list 의 경우 width: 50%; .kboard-list-item 의 경우 width: 100%;로 설정하려고 합니다.

혹시 css 도움을 주실 수 있을까요?? ㅠㅠ

아래 공식 홈페이지에서 masonry.pkgd.min.js 파일을 내려받으신 후 

ftp로 접속하셔서 사용하시는 스킨 폴더에 masonry.pkgd.min.js 파일을 추가하시고

사용하시는 스킨 list.php 파일에 아래코드를 참고하셔서 작성해 보시겠어요?

<?php wp_enqueue_script('kboard-modern-gallery-btf-masonry-script', "{$skin_path}/masonry.pkgd.min.js", array(), KBOARD_VERSION, true)?>


<script>
	jQuery(document).ready(function(){
		jQuery('.kboard-list').masonry({
			itemSelector: '.kboard-list-item',
			gutter: 10,
			// columnWidth: 290,
			// horizontalOrder: true
		});
	});
</script>

자세한 내용은 아래 남겨드린 masonry 공식 페이지에서 확인해보시겠어요?

https://masonry.desandro.com/

고맙습니다.