Support » Theme: Twenty Twenty-One » Post Grid

  • Hello!
    I am trying to display the posts in a grid layout. I wouldn’t like to use an additional plugin for that. I would be glad to have the options as in the ‘Recent Posts’ block in the editor. I’ve tried to use that too, but it doesn’t have the post navigation.
    So I would like a grid on the post page or navigation in the ‘Recent Posts’ block.
    Are there any (relatively) easy ways to do this?
    I appreciate your ideas.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Yes! We are looking to do this too soon with Options for Twenty Twenty-One plugin.

    Easiest way in the meantime will be some CSS to arrange the posts like a grid instead of one after the other.

    I’ll get this for you tomorrow 🙂

    Oliver

    That would be great, Oliver. Thank you!

    I’m using the Twentig plugin https://wordpress.org/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”?

    We’ve now added this into the plugin Options for Twenty Twenty-One so that you can choose which archive pages (blog / category / tag etc) to use the grid layout on.

    Oliver

    @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.

    OK, understood. Can you please update Options for Twenty Twenty-One plugin to the latest version? Grid options are in “Customizer – General Options – Archive Grid Template”.

    The pagination issue has been resolved there.

    If you’d prefer to use CSS only let me know and I’ll get that to you instead but the plugin will be much easier 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.