How to Create an Image Grid, with CSS, for Your Blog’s Front Page

This is fun! As I mentioned on the first post of this series, there’s a lot you can do with blocks and CSS. For the Twenty Twenty Theme, so far we learned how to do the following:

• Customizing the Twenty Twenty Theme with CSS onlyJanuary 7, 2020
• Thumbnails on the Front Page: A Magazine LayoutJanuary 14, 2020
• How to Change the Colors on the Twenty Twenty Theme With Hex Codes, Using CSSJanuary 21, 2020
• How to Resize the Width of the Twenty Twenty Theme With CSSJanuary 28, 2020

An Image Grid, for me, is the cherry on top. This is how my home page looks now used to look like:

I tried to do this with columns and “Image” Blocks, but since the Twenty Twenty Theme is using Flex (which is great but tricky), I lost my patience trying to fix the margins, the widths and the way the images behave, so I found another way.

Instead of clickable images, I used “Headings” on the columns; and then with CSS I gave them background images. Would you like to try it?

You’re about to customize your homepage, so I strongly suggest you to put your blog on Maintenance Mode.

Getting Ready

The grid will feature three images, ergo: three categories, posts or pages. So, we’ll start by doing the following:

1. In your computer, open your Notes App, in plain text (we’ll use it to paste some links)
2. In your WP Dashboard, go to pages and find the ID number of your home page; write that number in your note;
3. Ask your self what do you want to feature. Copy the links and paste them in your note;
4. One last question: Do you have images with the same size for your three links? If not, create them; for the Twenty Twenty Theme, the recommended size is 2000×1200 (and that’s what I used for my grid)
5. Finally, upload the images, copy the resulting URLs and past them in your note.

That’s it. We’re ready to roll!

Step 1: Creating the Grid

Go to your home page, click on edit and:

1. Add a “Columns” block
2. For the layout, select two columns (as a result, the first column will appear highlighted)
3. To your right, under Column Settings, give the first column a 60% width
4. Below, click on “Advanced” (if it’s not expanded) and add the class first-grid-column
5. Click on the second column (which now has a 40% width) and add the class second-grid-column

To the whole Block

• Click on the border of the “Columns” Block, and give it the class cover-grid-wrapper;
• From the toolbar, select “Full Width”

Step 2: Adding Heading Blocks in the Columns

On the first column:

1. Click on the “+” button to add a “Heading” block (it will be automatically set as H2, which is ok, because your site’s title has an H1)
2. In “Advanced”, add the class heading-one-one
3. Write in the Heading Block what you want (in my example you’ll see “Category 1”
4. Go to your note and copy the link you’ll use for this heading
5. Back to the WP editor: select the heading text, click from the Toolbar on “link” (or press CMD + K, in MacOS)
6. Paste the link and click on apply

On the second column:

1. Repeat the same process, but give to the first heading the class heading-two-one
2. Then add a new heading block in this same column with the class heading-two-two

If you haven’t closed your blog, wait for the autosaving and then click on “Preview” without updating; if you closed it, update the page!

Click on Customize.

Step 3: Magic!

Here’s every single CSS snippet you need. As always, I’ve left comments so you can understand what you’re doing.

Please note you’ll need to replace text in six lines (with your post id numbers, and the URLs of your images)

/* ------------------------------------------------------------------------ */
/*	Cover Grid
/* ------------------------------------------------------------------------ */

/*Hide Text and Featured Image from Home*/
.post-YOURNUMBER header,
.post-YOURNUMBER .featured-media {
	display:none;
}

/*Remove the padding from Home*/
#post-YOURNUMBER .post-inner.thin {
	padding-top:0;
}


/*The block with .cover-grid-wrapper*/
.post-inner.thin .wp-block-columns.alignfull.cover-grid-wrapper {
	margin:0;
	padding:0;
}

/*Removing margins from cols*/
.post-inner.thin .first-grid-column,
.post-inner.thin .second-grid-column {
	margin:0;
}

/* Background settings for all */
.post-inner.thin .first-grid-column,
.post-inner.thin .second-grid-column h2.heading-two-one,
.post-inner.thin .second-grid-column h2.heading-two-two {
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: center;
}

/*1st col: one heading*/
.post-inner.thin .first-grid-column {
	height:70vh;
	background-image: url("YOURfirstIMAGE.jpg");
}

/*2nd col: 1st heading*/
.post-inner.thin .second-grid-column h2.heading-two-one {
	height:35vh;
	margin:0;
	background-image: url("YOURsecondIMAGE.jpg"); 
}

/*2nd col: 2nd heading*/
.post-inner.thin .second-grid-column h2.heading-two-two {
	margin:0;
	height:35vh;
	background-image: url("YOURthirdIMAGE.jpg"); 
}

/*Let's make the headings look pretty*/
.heading-one-one {
	padding:0rem 3rem;
}
.heading-two-one,
.heading-two-two {
	padding:3rem;
}

h2.heading-one-one a,
h2.heading-two-one a,
h2.heading-two-two a {
	color:#fff;
	text-decoration:none;
	text-shadow:1px 3px #000;
}

And, that’s a wrap! Remember to hit “Publish” 🙂

The Flex property will take care of the rest; the columns are set to be display in a row on desktop, and in columns on small devices.