Как получить высоту жидкости с рядами

Question

Как установить высоту жидкости для каждой строки? Строки будут либо 4, либо 6 на основе ориентации, так как есть 24 общих значка (6x4 или 4x6).

Я смог решить набор значков 4 col и 6 col и иметь ширину жидкости. Однако я не могу понять, как получить расстояние между рядами жидкости для высоты.

Кроме того, я открыт для предложений о том, как улучшить код, если вы считаете, что есть лучшая альтернатива.

Вот мой код:

CSS

@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) { 

/* Clear 4 columns */ 

    .profile { 
    display: none; 
    } 

    .app { 
    float: left; 
    text-align: center; 
    width: 25%; 
    } 

    .clear4 { 
    clear: both; 
    } 

} 


@media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) { 

/* Clear 6 columns */ 

    .profile { 
    display: none; 
    } 

    .apps { 
    } 

    .app { 
    float: left; 
    text-align: center; 
    width: calc(100%/6); 
    } 

    .clear6 { 
    clear: both; 
    } 

} 

HTML

<div class="apps"> 


</div><!-- .apps --> 

Answer 1

вы имеете в виду пространство между приложение дивы?

.app { 
     float: left; 
     position:relative; 
     text-align: center; 
     width: 100%; 
     margin-bottom:50px; 
     margin-top:50px; 

} 

посмотрите здесь fiddle