Tessisamess

Intro

Okay, let's learn how to display your journal entries in columns! It requires a fairly small amount of code, so I'm going to go over each piece and what it does in relation to S2 Complete Style's page setup.

I'll be using my cleaned layout CSS for reference during this tutorial; I will also only be showing the coding needed to create columns, so some of these classes may have other default styling. You can add these CSS specs to the end of your stylesheet, or you can take the styling and put them in with the rest of the styling for each class; either is totally fine! I'm just isolating them for readability. I will also be including vendor prefixes for webkit and Mozilla Firefox.

CSS columns glossary

This is not an exhaustive guide to CSS columns since we're only focusing on S2 Complete style entries, but below you'll find the specs we'll be using in this tutorial, what they're for, and what you can do with them. You can find more information on CSS columns here and here!

column-count - The number of columns dividing your content. Use auto or a number value.

column-gap - The space between columns.

column-width - The optimal width of each column. Use auto or a measurement value.

column-span - How many columns a certain element should span across. Can be all or a number value. If you have three columns and want an element to span two of them, you would use 2 as the value.

break-inside:avoid; - Keeps specific elements together so they won't wrap to new columns; This is vital in the context of creating column entries, since we want each entry to stay together as one element. If you do want your columns to wrap into new columns, then you can choose not to use this spec.

Container prep

In order to set our columns, we want to add the CSS to the innermost container that holds the entries, which would be #alpha-inner. I'm also going to be prefacing it with .lj-view-recent so that columns are only on the main page and when viewing a tag, this way your friends page and searching by date are standard, since we typically want those to be less for design and more for scrolling. You can choose to leave this off if you'd prefer columns on all page views.

.lj-view-recent #alpha-inner{
-webkit-column-count:3;-moz-column-count:3;column-count:3;
-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;
-webkit-column-width:320px;-moz-column-width:320px;column-width:320px;
}
First, decide how many columns maximum you'd like your content to be divided into. CSS grid is responsive, so it's going to collapse your content into one column for mobile users, and two columns for smaller screens, etc. You can set this to auto if you don't want to cap how many columns your content can divide into.

Next, set your column gap; the space between each column. You can use px, vh, vw, %, em—you get the idea. Your preferred measurement can be used.

Finally, set your column width. This can also be measured the same way column-gap can. Keep in mind that this isn't a fixed width and is still relative to the browser; it's just letting the browser know your ideal width for the columns so that it can apply it when possible. Use auto if you don't need this.

Full width elements

Sometimes you have content within the #alpha-inner container that you'd rather have spanning the container instead of taking on the CSS columns. For me, that's usually the previous/next page navigation links, and the header that displays when you view entries in a certain tag. For elements that you want to ignore the column styling, you'll use column-span:all; to contradict it.

.content-nav, #tagpage-header{-webkit-column-span:all;column-span:all;}
Sometimes I'll also use this on the ID that controls the sticky note, #sticky-note, so that it's immediately set apart from the entries as its own element. It just depends on the look you're going for!

Entries

Finally, let's get the entries styles to work with the CSS columns we added! You'll want a bottom margin only since the columns take care of the sides with column-gap, and you'll want to prevent the entries from wrapping up into a new column, which we do by adding break-inside:avoid; to any element directly inside the column container; in this case, .entry.

.entry{margin:0 0 20px 0;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;}
Optionally, you can also add a max-width to your entries if you don't want them to stretch past a certain size when collapsing the amount of columns, or on page views where columns aren't applied; for example max-width:600px; is what I've added to the entries on Coupled.

You now have columned entries!

My cleaned S2 Complete Style CSS with only the CSS grid covered in this tutorial added to the layout.
Have fun styling! There are CSS column style specs for borders, but in the context of an S2 Complete Style layout you can just add them to the entry itself. Everything relating to columned entries in your layout has been covered above, so the rest is just down to everything else you want to do with the layout and entries.

Other layout styles

S2 Layouts: You most likely can use this method in any S2 layout as long as you remember that the container class names may be different from S2 Complete Style and you'll need to change them. For example, in S2 Bloggish #alpha is the sidebar and #beta is the entry container, which is the reverse of S2 Complete Style.

S1 Generator: This will not work in S1 Generator because of the way the layout is structured; I tried to get it to work a couple of times back when I started making column layouts, but the mess of nested tables makes it impossible. I've seen one layout with a column effect in S1 Generator, but it involved a lot of brute forcing and positioning.

♡ You're Done! ♡