WordPress Theme Exercise Solution: Metonymic Home Page Layout

Open _posts-and-pages.scss from the SITE/PRIMARY folder.

A big chunk of your home page styling can be taken care of if you explicitly define your grid columns and rows–particularly the rows. If you define the rows, the 1/-1 syntax to make the section-titles take the full column will also work with rows.

Here are some starting values. As noted, the key is the explicit definition of the rows.

@media screen and (min-width: 800px) {

.home section {
     margin: 3rem auto;
     max-width: 1500px;
     display: grid;
     grid-template-columns: repeat(5,1fr);
     }


.home .section-headlines {
	grid-template-rows: repeat(3,auto);
}

.home .section-culture {
		grid-template-rows: repeat(3,auto);
}
.home .section-lifestyle {
		grid-template-rows: repeat(3,auto);
}

.home .section-title {
		grid-row: 1/-1;
}

}

Your Task

Now, please finish the home page layout. Don’t forget to add the search form at the bottom of the page.

Then please do the single view. Get it as close as possible to the look and layouts in the screenshot.

Finally, although there are no screenshots for these views, please make archive and search result pages as well. Make the layouts stylistically consistent with the rest of the site.

Have fun.