#Tumblr themes grids how to

Here’s a tutorial on how to disable people from right-clicking on your blog - ideal if you don’t want people to copy your posts, view your blog’s source or stealing images.Ĭredit for the script & code goes to and HTML-tutorials.Ģ. If you have any more questions about it, feel free to ask me!ĬSS-Trick’s CSS Grid guide | My other tutorials This leaves that page with one column until enough posts are made.Īnd 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. Adding display: inline-block stops it from forcing the second column. If you have a page without enough posts to make a second column, it does the same thing to force a second column.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.These two lines override what CSS Grid does by default to the layout. Once you’ve got your post size set, you can add these lines You can change this by either putting a post width to override it, or making the margins bigger. So by default, if your container width is 100%, your posts will be 50% of the screen size. When you set the column count to 2 or more, it makes the things inside it half of the width of the container. You can adjust these numbers as you see fit!įor the individual posts, it’s a little trickier. This separates the entire container into 2 columns, and puts an 80px gap in between the columns.

This (obviously) requires some CSS knowledge, but is otherwise easy to put into your theme.įor the container of my posts, in this case I usually use #container, I added these lines. In my snotgirl theme and my design portfolio, I use a grid layout but without using masonry or any other script.

Tumblr themes grids