Heydon did the big work. I added here a responsive solution. I don't want to have the same number of columns for each resolution.
Forked from Heydon's Pen Self Correcting Grid. No classes!.
A Pen by Long Lazuli on CodePen.
<button onclick="grid.addLi()">+</button> | |
<button onclick="grid.removeLi()">-</button> | |
<ul> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
</ul> | |
<p>Above is a list displayed as a grid. Thanks to pseudo classes, the general sibling combinator and a Sass <code>for</code> loop, you can change the number of columns (the <code>$cols</code> variable) and items (<code><li></code>s) and it will 'self correct' to eliminate gaps. No classes; no worries. For more info on the underlying CSS involved, read <a href="http://www.heydonworks.com/article/tetris-the-power-of-css"><i>Tetris and The Power Of CSS</i></a>.</p> |
var grid = {}; | |
document.addEventListener("DOMContentLoaded", function() { | |
var ul = document.getElementsByTagName('ul')[0], | |
li = document.createElement('li'); | |
grid.addLi = function(){ | |
ul.appendChild(li.cloneNode(true)); | |
} | |
grid.removeLi = function(){ | |
ul.removeChild(ul.lastChild); | |
} | |
}); |
Heydon did the big work. I added here a responsive solution. I don't want to have the same number of columns for each resolution.
Forked from Heydon's Pen Self Correcting Grid. No classes!.
A Pen by Long Lazuli on CodePen.
// declaration of variables | |
$max-width : 1280px; | |
$column-min-width: 120px; | |
$max-columns: ceil( $max-width / $column-min-width ) ; | |
/* below is just boilerplate styles */ | |
* { | |
font-family: sans-serif; | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body { | |
padding: 1em; | |
max-width: $max-width; | |
margin: 0 auto; | |
} | |
p { | |
margin-bottom: 1em; | |
} | |
button, | |
code { | |
font-family: monospace; | |
} | |
button { | |
cursor: pointer; | |
padding: 0 1ch; | |
border: 2px solid #999; | |
border-radius: 2px; | |
font-weight: bold; | |
background-color: #AAA; | |
&:hover { | |
border-color: black; | |
} | |
&:active { | |
background-color: #666; | |
color: white; | |
} | |
} | |
* + ul { | |
margin-top: 1em; | |
} | |
li { | |
float: left; | |
font-size: 1.5em; | |
font-weight: bold; | |
height: 3em; | |
line-height: 3; | |
border: 1px solid white; | |
list-style: none; | |
text-align: center; | |
background: #222; | |
color: #fff; | |
} | |
// choose a number of columns | |
@mixin liAsColumns ($cols){ | |
li { width: 100% / $cols; } | |
@for $i from 1 through $cols { | |
%divider-#{$cols}-#{$i} { | |
width: 100% / $i; | |
} | |
} | |
@if($cols > 1){ | |
@for $j from 1 through ( $cols - 1 ) { | |
li:nth-child(#{$cols}n+1):nth-last-child(#{$j}) { | |
@extend %divider-#{$cols}-#{$j}; | |
@if($j > 1){ | |
@if( $j == 2){ | |
& + li { @extend %divider-#{$cols}-#{$j};} | |
}@else{ | |
& ~ li { @extend %divider-#{$cols}-#{$j};} | |
} | |
} | |
} | |
} | |
} | |
} | |
/* 1 column grid : */ | |
@include liAsColumns (1); | |
@for $cols from 2 through $max-columns - 1 { | |
/* #{$cols} columns grid : */ | |
@media (min-width: ($column-min-width * $cols) + 1 ) | |
and (max-width: ($column-min-width * ($cols + 1) ) ){ | |
@include liAsColumns($cols); | |
} | |
} | |
/* #{$max-columns} columns grid : */ | |
@media (min-width: ($column-min-width * $max-columns) + 1px ) { | |
@include liAsColumns($max-columns); | |
} | |