Title: Post Grid Last modified: January 7, 2021 --- # Post Grid * [JaMart](https://wordpress.org/support/users/jamart/) * (@jamart) * [5 years, 3 months ago](https://wordpress.org/support/topic/post-grid-18/) * 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 6 replies - 1 through 6 (of 6 total) * Thread Starter [JaMart](https://wordpress.org/support/users/jamart/) * (@jamart) * [5 years, 3 months ago](https://wordpress.org/support/topic/post-grid-18/#post-13879235) * That would be great, Oliver. Thank you! * [bduclos](https://wordpress.org/support/users/bduclos/) * (@bduclos) * [5 years, 3 months ago](https://wordpress.org/support/topic/post-grid-18/#post-13880610) * I’m using the Twentig plugin [https://wordpress.org/plugins/twentig](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. * [Oliver Campion](https://wordpress.org/support/users/domainsupport/) * (@domainsupport) * [5 years, 3 months ago](https://wordpress.org/support/topic/post-grid-18/#post-13881010) * [@jamart](https://wordpress.org/support/users/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 * Thread Starter [JaMart](https://wordpress.org/support/users/jamart/) * (@jamart) * [5 years, 3 months ago](https://wordpress.org/support/topic/post-grid-18/#post-13883136) * [@domainsupport](https://wordpress.org/support/users/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. * [Oliver Campion](https://wordpress.org/support/users/domainsupport/) * (@domainsupport) * [5 years, 3 months ago](https://wordpress.org/support/topic/post-grid-18/#post-13885073) * 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”? * Thread Starter [JaMart](https://wordpress.org/support/users/jamart/) * (@jamart) * [5 years, 3 months ago](https://wordpress.org/support/topic/post-grid-18/#post-13888760) * [@domainsupport](https://wordpress.org/support/users/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. Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘Post Grid’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/twentytwentyone/2.7/screenshot. png) * Twenty Twenty-One * [Support Threads](https://wordpress.org/support/theme/twentytwentyone/) * [Active Topics](https://wordpress.org/support/theme/twentytwentyone/active/) * [Unresolved Topics](https://wordpress.org/support/theme/twentytwentyone/unresolved/) * [Reviews](https://wordpress.org/support/theme/twentytwentyone/reviews/) ## Tags * [PostGrid](https://wordpress.org/support/topic-tag/postgrid/) * 6 replies * 3 participants * Last reply from: [JaMart](https://wordpress.org/support/users/jamart/) * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/post-grid-18/#post-13888760) * Status: not resolved