Creating a Grid Layout for WP Blog Posts with Different Size Boxes – CMS & WordPress – SitePoint Forums

Hi there,

I’m trying to create a flexible grid or layout like this:

I have this basic code that displays my WordPress blog posts in 4 columns.



		 'post',
				'posts_per_page' => - 1,
			);
			$q    = new WP_Query( $args );
		?>

		
have_posts() ) : $q->the_post(); ?>

What I would like to do is have two large ones on the left with 4 more on the right.

What would be the best way to do this?

Thanks!


you can do it easily using elementor without coding on wordpress

I try not to use page builders



1 like

You will need to define the appropriate number of columns in your grid and then define a class that spans the rows.

This page is a great grid resource. Look at the grid-rows property and give it a try. We can help you further if you get stuck…

You can do this with the “query post” element in the new block editor and you won’t have to use a plugin

Ok, I think I almost made it. Pretty happy with me haha.

So now I have this:

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 15px;
grid-row-gap: 15px;
}

.div-box:nth-of-type(1){
   grid-area: 1 / 1 / 3 / 2; }

.div-box:nth-of-type(2){
    grid-area: 1 / 2 / 3 / 3; }

.div-box:nth-of-type(3){
   grid-area: 1 / 3 / 2 / 4; }
   
.div-box:nth-of-type(4){
   grid-area: 1 / 4 / 2 / 5; }

.div-box:nth-of-type(5){
  grid-area: 2 / 3 / 3 / 4; }

.div-box:nth-of-type(6){
    grid-area: 2 / 4 / 3 / 5; }

and this for WP PHP


		
		 'post',
				'posts_per_page' => - 6,
			);
			$q    = new WP_Query( $args );
		?>

		
have_posts() ) : $q->the_post(); ?>

Which seems to work well.

It basically outputs this:

If I have less content on the two large boxes on the left, will they match the height of the ones on the right? Basically I want the two columns/1 row on the left to be the same height as the two rows on the right.

I also have to work on responsiveness. Should I just set the grid width to whatever I want on the various breakpoints, or is there another way to do this?

Thanks!



1 like

Instead of all that grid area stuff, you could have just done:

.div-box:nth-of-type(1), 
.div-box:nth-of-type(2) {
    grid-row: 1 / 3; 
}

This gives you this (added the outline for visualization)

This way you use the default behavior and only code for exceptions



1 like

It’s great, thank you very much.

How does this piece of code indicate that the 4 boxes on the right are half the size?

Because by default, a grid object takes up one column and one row. If you set the number of columns, the browser renderer will determine the rest.

In other words, if you provide the root parameters and let the browser figure out the basics, and just code for the exceptions, it will take less work for you.



2 likes