<p>The only real important thing here is the <codeclass="language-markup token attr-name">data-groups</code> attribute. It has to be a <ahref="http://jsonlint.com/">valid JSON</a> array of strings. Optionally, it can be a string delimeted by a value you provide. See <code>delimeter</code> in the <ahref="#options">options</a>.</p>
<p>This example is using this site's grid. Each item would be 4 columns at the "sm" breakpoint (768px).</p>
<h3>Images</h3>
<p>To see why the images are wrapped in <code>.aspect</code> elements, check out the <ahref="{{ site.baseurl }}{% post_url 2013-05-03-images %}">images demo</a>.</p>
<li>Use a <strong>sizer</strong> element. This is the easiest way to specify column and gutter widths. Add the sizer element and make it 1 column wide. Shuffle will measure the <code>width</code> and <code>margin-left</code> of this <code>sizer</code> element each time the grid resizes. This is awesome for responsive or fluid grids where the width of a column is a percentage.</li>
<li>Use a <strong>function</strong>. When a function is used, its first parameter will be the width of the shuffle element. You need to return the column width for shuffle to use (in pixels).</li>
<li>A <strong>number</strong>. This will explicitly set the column width to your number (in pixels).</li>