Post Grid

That would be great, Oliver. Thank you!

I’m using the Twentig plugin https://www.ads-software.com/plugins/twentig which customizes Twenty Twenty-One. It has the option to display the blog as a grid. If you don’t want to use the plugin, you can try to copy the CSS.

@jamart This should produce a clean result that compliments the theme’s existing design when no thumbnail is available for a post …

.archive .site-main {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	width: 100%;
}
@media (min-width: 482px) {
	.archive .site-main {
        padding: 0 1rem;
    }
}
.archive .site-main .page-header {
	width: 100%;
}
.archive .site-main article {
	padding: 1rem;
	margin: 0;
	width: 100%;
}
@media (min-width: 482px) {
	.archive .site-main article {
        width: 50%;
    }
}
@media (min-width: 822px) {
	.archive .site-main article {
        width: 25%;
    }
}
.archive .site-main article .entry-header {
	width: 100%;
	position: relative;
	margin: 0;
}
.archive .site-main article:not(.has-post-thumbnail) .entry-header {
	border: 1px solid #28303d;
}
.archive .site-main article .entry-header::after {
	display: block;
	content: '';
	padding-bottom: 65%;
}
.archive .site-main article .entry-header .entry-title {
	font-size: 1.3rem;
	text-align: center;
	position: absolute;
	height: 100%;
	width: 100%;
}
.archive .site-main article .entry-header .entry-title {
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 0 1rem;
	z-index: 2;
}
.archive .site-main article .entry-header .entry-title a {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 900;
}
.archive .site-main article.has-post-thumbnail .entry-header .entry-title a {
	color: white;
	text-shadow: -1px -1px 0 #28303d, 1px -1px 0 #28303d, -1px 1px 0 #28303d, 1px 1px 0 #28303d;
}
.archive .site-main article .entry-header .post-thumbnail {
	margin: 0;
}
.archive .site-main article .entry-header .post-thumbnail img {
	position: absolute;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	margin: 0;
	z-index: 1;
}
.archive .site-main article .entry-footer, .archive .site-main article .entry-content {
	display: none;
}

Let me know what you think?

Oliver

@domainsupport Thank you very much, I’m very grateful. This is very close to what I’d like to achieve.
I have two issues. It works on archive pages, but not on the main blog. It messes up the the layout a bit, but I think that should be easy to figure out.

To make it work on the blog page, just change all instances of “.archive” to “.blog” to duplicate each CSS selector in the CSS above like this …

.blog .site-main, .archive .site-main {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	width: 100%;
}

Can you please explain how it “messes up the layout a bit”?

@domainsupport “Can you please explain how it “messes up the layout a bit”?”

Somehow the title and the pagination seems to be part of the grid system and they appear at the beginnig and the end of the grid, not above and below.