Code snippets

These are fairly basic tricks that I've managed, primarily for responsive design because it wasn't even a thing when I learned HTML. I still find it a bit arcane, so I've made some of my code available as a resource for anyone else who's also trying to figure this stuff out.

Grid image gallery

This uses CSS grid to display a tiled image gallery. It automatically resizes your images, and they will wrap on mobile if you've designed your website with responsive widths. For an example of this, you can look at the art gallery. To see how it looks with image sizes that aren't uniform, I also use this code on my character pages.

Auto-fit tells the column widths to expand to fill the space, but if you want a uniform grid with the same number of columns in each row (even if a row is partially empty), use auto-fill. This article helps explain the distinction in more detail.

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 5px;
}

.galleryitem {
	padding:5px;
	max-width:95%;
}

.galleryitem img {
	max-width:100%;
}

2-column info box

I use this on all my character pages. One column is a picture, and the other is text. My goal was for the image to still look good on mobile; here, it will fill up the entire height of the box instead of leaving empty space due to resizing. If you don't specify a height, the height of the image will depend on how much text there is. The justify stuff is just bonus formatting for the labels because I think it looks nice, but it's not integral to the code.

This would look fine with larger chunks of text as well - just be mindful of how big your image is. I think the best way to use it this way would be to fix the height of the box, then give it the overflow:auto property.

#box {
	display:grid;
	grid-template-columns:1fr 2fr;
	grid-gap:5px;
}

.justify {
	padding:0.25em;
	display:flex;
	justify-content:space-between!important;
}

#left {
	background:url(image) no-repeat center;
}

<div id="box">
<div id="left"></div>
<div id="right">
	<div class="justify">
	<p>Label</p>
	<p>Content</p>
	</div>
</div>