Gridzy.js 2 – Semantic HTML

The basic usage of Gridzy.js 2 is incredible simple, but you may want to use an other HTML structure. Gridzy.js 2 is very flexible in this respect. There are only a few points to consider …

The simplest HTML structure of Gridzy is this:

<div class="gridzy">
	<img src="https://placeimg.com/640/480/any?1" alt="a random image" />
	<img src="https://placeimg.com/640/480/any?2" alt="another random image" />
	<img src="https://placeimg.com/640/480/any?3" alt="yet another random image" />
	<img src="https://placeimg.com/640/480/any?4" alt="a random image again" />
	<img src="https://placeimg.com/640/480/any?5" alt="one last random image" />
</div>

But the following example would work as well:

<ul class="gridzy">
	<li>
		<span>
			<img class="gridzyImage" src="https://placeimg.com/640/480/any?1" alt="a random image" />
		</span>
	</li>
	<li>
		<span>
			<img class="gridzyImage" src="https://placeimg.com/640/480/any?2" alt="another random image" />
		</span>
	</li>
	<li>
		<span>
			<img class="gridzyImage" src="https://placeimg.com/640/480/any?3" alt="yet another random image" />
		</span>
	</li>
	<li>
		<span>
			<img class="gridzyImage" src="https://placeimg.com/640/480/any?4" alt="a random image again" />
		</span>
	</li>
	<li>
		<span>
			<img class="gridzyImage" src="https://placeimg.com/640/480/any?5" alt="one last random image" />
		</span>
	</li>
</ul>

This may not be a very useful structure, but it shows what’s possible. Just always consider these points:

  • The container element can be any tag type, such as ul, but always needs the class gridzy.
  • Each direct child element always represents one item in the grid and can be any tag type as well, such as li.
  • If you use tag types with browser default styles (such as ul and li), you need to reset the browser defaults yourself.
  • If the img element isn’t such a direct child itself, it needs the class gridzyImage, whereby it can be anywhere in the structure.

Captions

Especially if you like to add captions, you need an advanced HTML structure. Regardless of styling, this might be a good solution:

<div class="gridzy">
	<figure>
		<img class="gridzyImage" src="https://placeimg.com/640/480/any?1" alt="a random image" />
		<figcaption>a caption text</figcaption>
	</figure>
	<figure>
		<img class="gridzyImage" src="https://placeimg.com/640/480/any?2" alt="another random image" />
		<figcaption>another caption text</figcaption>
	</figure>
	<figure>
		<img class="gridzyImage" src="https://placeimg.com/640/480/any?3" alt="yet another random image" />
		<figcaption>yet another caption text</figcaption>
	</figure>
	<figure>
		<img class="gridzyImage" src="https://placeimg.com/640/480/any?4" alt="a random image again" />
		<figcaption>a caption text again</figcaption>
	</figure>
	<figure>
		<img class="gridzyImage" src="https://placeimg.com/640/480/any?5" alt="one last random image" />
		<figcaption>one last caption text</figcaption>
	</figure>
</div>

For caption appearance, see Gridzy.js 2 – Captions & Skins.