The template in this tutorial shows you another method for using CSS grid to display archives in a grid layout with different sized columns.
This method uses line based placement for each grid item using line numbers as opposed to defining grid areas using grid area names which is generally easier to work with and requires less CSS for media queries like you can see in this example.
Here’s the result which includes some styling similar to the Magazine Pro themes front page template :
The CSS targets each post/entry in the loop by number so you can use line numbers to control both the width and placement of each post in the loop.
In the above example, the category archive news displays 9 posts with post 1, 4 & 7 fill width and the other entries in 2 columns. You’ll need to set posts per page to match the same amount of posts used in the grid which you can do using PHP code.
Code Installation
There’s 2 simple steps :
Step 1 : From the download folder, upload the file named category-news.php to your child themes root directory.
Step 2 : From the download folder, copy & paste the CSS from the style.css file to the end of your child themes style.css file and clear caching.
Optional : The CSS is coded to work with the first 9 posts in a loop so you also need to set posts per page to 9 which you can do globally using the Reading settings or by adding code which you’ll find in a functions file in the download folder. Copy this code to your child themes functions file.
Here’s the code for logged in members :
Leave a Reply
You must be logged in to post a comment.