Posted by & filed under WordPress.

A week or so ago I setup a site that I’ve been thinking about for a while, mostly as a place where I could play around with the new pieces in WordPress 5 without messing with an existing site.

The Twenty Nineteen theme was one of those things I wanted to give a go. I like really simple themes, and it seemed like a good starting point.

But I also like grid layouts over the standard list of posts. In the past I’ve written child themes or plugins to do this, but I wanted to see how much I could do with just a bit of CSS

And here’s what I came up with.

body.blog #main,
body.archive #main {
	display: grid;
	grid-template-columns: 32% 32% 32%;
}

@media (max-width: 400px) {
	body.blog #main,
	body.archive #main {
		grid-template-columns: 100%;
	}
}

body.blog #main article,
body.archive #main article {
	margin-top: 0;
}
body.blog #main article .entry-content,
body.archive #main article .entry-content {
	display:none;
}
body.blog #main article footer,
body.archive #main article footer {
	display:none;
}
body.blog #main article .entry-header h2,
body.archive #main article .entry-header h2 {
	font-size: 1.25em;
	white-space:nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
body.blog #main article > *,
body.archive #main article > * {
	margin:8px; 
}
body.blog #main header,
body.archive #main header {
	grid-column-start: 1;
	grid-column-end: 4;
	margin-bottom: 0;
}

It turns the #main element into a grid container and each of the article containers into grid elements. I went with 3 across as the default, falling to 1 across on mobile.

I did have to tweak a bit on the archive pages. The header for those pages is inside the #main element, so it became a grid item. Instead of messing with it too much I just set the header in that case to span all the columns so that it still looked right.

You can see what it looks like at BrickZone.club, assuming that I haven’t tweaked a little more since then.

Leave a Reply

Your email address will not be published. Required fields are marked *