This basic example has 20 cells.
The cells have absolute positioning percentage width and fixed height.
<div class="thegrid">
<div class="cell" data-width="1" data-height="1" data-new data-name="Lorem" data-price="50"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-new data-name="Ipsum" data-price="5"><div></div></div>
<div class="cell" data-width="2" data-height="1" data-name="Dolor" data-price="29"><div></div></div>
<div class="cell" data-width="2" data-height="1" data-name="Sit" data-price="81"><div></div></div>
<div class="cell" data-width="2" data-height="1" data-name="Amet" data-price="7"><div></div></div>
<div class="cell" data-width="2" data-height="1" data-name="Consectetur" data-price="89"><div></div></div>
<div class="cell" data-width="3" data-height="1" data-new data-name="Adipisicing" data-price="35"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-new data-name="Elit" data-price="81"><div></div></div>
<div class="cell" data-width="2" data-height="1" data-name="Vel" data-price="63"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-new data-name="Quisquam" data-price="52"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-name="Atque" data-price="6"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-name="Fuga" data-price="1"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-new data-name="Voluptate" data-price="57"><div></div></div>
<div class="cell" data-width="3" data-height="1" data-name="Commodi" data-price="17"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-name="Quidem" data-price="64"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-name="Quo" data-price="33"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-new data-name="Repellat" data-price="17"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-name="Doloremque" data-price="61"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-new data-name="Eaque" data-price="92"><div></div></div>
<div class="cell" data-width="4" data-height="1" data-new data-name="Deserunt" data-price="37"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-name="Illo" data-price="55"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-new data-name="Architecto" data-price="21"><div></div></div>
<div class="cell" data-width="2" data-height="1" data-name="Ex" data-price="71"><div></div></div>
<div class="cell" data-width="2" data-height="1" data-name="Odit" data-price="93"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-name="Perferendis" data-price="13"><div></div></div>
<div class="cell" data-width="2" data-height="1" data-name="Praesentium" data-price="94"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-new data-name="Nihil" data-price="77"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-new data-name="Veritatis" data-price="89"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-new data-name="Nisi" data-price="40"><div></div></div>
<div class="cell" data-width="1" data-height="1" data-name="Quos" data-price="76"><div></div></div>
</div>
.sort,
.filter {
background-color: #cdf;
color: #66c;
text-align: center;
line-height: 2;
font-size: 130%;
border-radius: 20px;
padding: 0 15px 0 15px;
outline: none;
cursor: pointer;
display: inline-block;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.sort {
color: #66c;
border-radius: 20px;
width: 5em;
text-indent: -.4em;
}
.filter {
background-color: #E4C7FF;
color: #96f;
border-radius: 20px;
width: 5em;
text-indent: -.4em;
}
.sort ~ .sort {background-color: #fdc;color: #f66;}
.sort:before {
content: '';
vertical-align: middle;
display: inline-block;
width: 0;
height: 0;
border: 8px solid transparent;
border-width: 8px 6px;
margin: -9px 6px 0 -6px;
-webkit-transition: all .3s 0s ease-in-out, -webkit-rotate 0s .3s linear;
-o-transition: all .3s 0s ease-in-out, -o-rotate 0s .3s linear;
transition: all .3s 0s ease-in-out, rotate 0s .3s linear;
-webkit-transform-origin: 50% 75%;
-moz-transform-origin: 50% 75%;
-ms-transform-origin: 50% 75%;
-o-transform-origin: 50% 75%;
transform-origin: 50% 75%;
}
[data-order=''] + .sort:before {
-webkit-transition: all .3s 0s ease-in-out, -webkit-rotate 0s .3s linear;
-o-transition: all .3s 0s ease-in-out, -o-rotate 0s .3s linear;
transition: all .3s 0s ease-in-out, rotate 0s .3s linear;
}
[data-order='asc'] + .sort:before,
[data-order='desc'] + .sort:before {
-webkit-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border-bottom-color: #666;
margin-left: 2px;
margin-right: 6px;
}
[data-order='asc'] + .sort:before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
[data-order='desc'] + .sort:before {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.filter:before {
font-family: "the-grid" !important;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\63";
font-size: 130%;
display: inline-block;
line-height: 1;
vertical-align: middle;
margin-top: -2px;
margin-right: 2px;
opacity: 0;
filter: alpha(opacity=0);
}
:checked + .filter:before {
opacity: 1;
filter: alpha(opacity=100);
}
.thegrid .cell > div {
border: 1px solid #def;
background-image: radial-gradient(circle at top right, #fff, #def);
overflow: hidden;
}
.thegrid .cell:before {
content: attr(data-name);
text-align: center;
position: absolute;
top: 50%;
margin-top: -8px;
height: 16px;
line-height: 16px;
left: 0;
right: 0;
font-variant: small-caps;
font-size: 140%;
z-index: 1;
color: #66c;
}
.thegrid .cell[data-new] > div:before {
content: 'new';
position: absolute;
top: 0;
right: 0;
width: 4em;
height: 16px;
text-align: center;
font-variant: small-caps;
line-height: 16px;
font-size: 140%;
background-color: #E4C7FF;
color: #96f;
z-index: 1;
-webkit-transform: rotate(45deg) translate(30%, -40%);
-ms-transform: rotate(45deg) translate(30%, -40%);
-o-transform: rotate(45deg) translate(30%, -40%);
transform: rotate(45deg) translate(30%, -40%);
}
.thegrid .cell:after {
content: '$' attr(data-price);
position: absolute;
bottom: 10px;
right: 13px;
font-size: 140%;
color: #f66;
}
$(document).ready(function()
{
$('.thegrid').grid(
{
cellsPerRow: 5,
sortingCriteria:
{
name: {type: 'string'},
price: {type: 'int'},
}
});
$('input.filter').on('change', function()
{
var isActive = $(this).is(':checked'),
filterCriterion = $(this).data('filter'),
filteredCells = '.cell' + (isActive ? '[data-' + filterCriterion + ']' : '');
$('.thegrid')
.grid('filter', filteredCells, false, true)
.grid('redraw');
});
});