CSS Grid, 4 больших столбца, 3 средних
У меня есть адаптивная сетка с использованием Foundation. Я использую PHP для генерации каждого row HTML, создавая новую строку каждые 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