My question is related to CSS Two Columns of Lists - responsive merge into one column .
I have the following html (a list of elements (#elements = n)).
<div>
<div>e1</div>
<div>e2</div>
<div>e3</div>
…
</div>
And I want display the elements in a table with variable column count (less than some limit k), using only CSS (independency on browsers is preferable).
If I can restrict n to some limit, this can be accomplished. But I want n to be any number.
I'm using media query, but I can't control rows y position.
My current SASS code is here (k = 20).
.contents-wrapper
position: relative
top: $header-height + 30
width: 0px
margin:
left: auto
right: auto
$min-width: 100px
$content-wrapper-width: 200px
$interval-width: 30px
@function get-contents-width($n)
@return $n * ($interval-width + $content-wrapper-width) - $interval-width
@function get-width($n)
@return get-contents-width($n) + $min-width
@for $i from 1 through 20
$current-min-width: get-width($i)
@if $i == 1
$current-min-width: 0px
$current-max-width: get-width($i + 1) - 1
$current-width: get-contents-width($i)
@media screen and (min-width: $current-min-width) and (max-width: $current-max-width)
> .contents
position: absolute
left: - $current-width / 2
> .content-wrapper
@for $j from 1 through $i
&:nth-child(#{$i}n+#{$j})
position: relative
$content-wrapper-height: 300px
left: ($j - 1) * ($content-wrapper-width + $interval-width)
top: - ($j - 1) * $content-wrapper-height
width: $content-wrapper-width
height: $content-wrapper-height
> .content
position: absolute
> .title
display: none
> .image
