wordpress循环中的5列包含30个帖子

Question

是否有任何内置的css网格来实现五列行中30个帖子的循环？

如果没有，如何安全地实现这一点，以响应所有桌面和移动设备？

询问是因为我不想再加载任何插件。。。

Answer 1

您可以尝试以下代码。希望能成功。

<?php
get_header();
?>
<div class="row">
<?php
if( have_posts() ):
while( have_posts() ) : the_post();
?>
<div class="col">
<?php the_title(); ?>
</div>        
<?php
endwhile;
endif;
?>
</div>
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1 0 18%; /* The important bit. This percentage decides your columns. 
The percent can be px. It just represents your minimum starting width.
*/
color: #fff;
background-color: #000;
margin: 5px;
height: 50px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>

<?php
get_footer();
?>

注意：CSS移动到您的style.CSS。这是最佳实践。显示结果屏幕截图：https://prnt.sc/6CyYWv1lkeKt