CSS网格，4个大列，3个中等大小 - CSS Grid, 4 large columns, 3 medium

CSS Grid, 4 large columns, 3 medium

本文关键字：3个 4个 CSS 网格 | 更新日期: 2023-09-27

我有一个使用Foundation的响应网格。我使用PHP生成HTML的每个row，每3列创建一个新行。

<?php for($i=0 ; $i<12 ; $i++) {
if($i%4==0) { ?>
    <div class='row'>
<?php } else { ?>
   <div class='3-large 12-small columns'>
      <img src='xxx'>
   </div>
<?php }
if(($i+1)%4==0) { ?>
    </div>
<?php } ?>

我正在尝试为大屏幕显示4列（如上所述），为中等屏幕显示3列。在不使用某些服务器端代码来检测设备大小的情况下，这可能吗？

一种方法是在基础-中使用可见性类

<?php for($i=0 ; $i<12 ; $i++) {
if($i%4==0) { ?>
    <div class='row'>
<?php } else { ?>
   <div class='large-3 show-for-large-only  columns'>
      <img src='xxx'>
   </div>
<?php }
if(($i+1)%4==0) { ?>
    </div>
<?php } ?>
<?php for($i=0 ; $i<12 ; $i++) {
if($i%4==0) { ?>
    <div class='row'>
<?php } else { ?>
   <div class='small-4 show-for-small-only columns'>
      <img src='xxx'>
   </div>
<?php }
if(($i+1)%4==0) { ?>
    </div>
<?php } ?>

但这会导致html文档中的内容重复。

我建议使用基础的块网格

<div class='small-block-grid-3 large-block-grid-4'>
    <img src='xxx'>
    <img src='xxx'>
    <img src='xxx'>
    <img src='xxx'>
</div>

如果您使用jQuery，您可以简单地通过窗口的客户端大小来获取：

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document