CSS Grid Tutorial
In my snotgirl theme and my design portfolio, I use a grid layout but without using masonry or any other script. This is possible using CSS Grid!
This (obviously) requires some CSS knowledge, but is otherwise easy to put into your theme.
Step 1
For the container of my posts, in this case I usually use #container, I added these lines.
column-count: 2; column-gap: 80px;
This separates the entire container into 2 columns, and puts an 80px gap in between the columns. You can adjust these numbers as you see fit!
Step 2
For the individual posts, it’s a little trickier. When you set the column count to 2 or more, it makes the things inside it half of the width of the container. So by default, if your container width is 100%, your posts will be 50% of the screen size.
You can change this by either putting a post width to override it, or making the margins bigger.
Once you’ve got your post size set, you can add these lines
break-inside: avoid; display:inline-block;
These two lines override what CSS Grid does by default to the layout.
without break-inside: avoid, if a post is too long, it will cut the post in half, sending the bottom half to the next column.
If you have a page without enough posts to make a second column, it does the same thing to force a second column. Adding display: inline-block; stops it from forcing the second column. This leaves that page with one column until enough posts are made.
And that’s all you need to do to have a functioning grid! This is a very basic grid, of course, so you’ll need to add your own styling to it. If you have any more questions about it, feel free to ask me!
For more help you can also check out:
CSS-Trick’s CSS Grid guide | My other tutorials
