Name a block element by the column it falls into, i.e., assign a class of col-1 or col-2.

[thefieldset]

• I'm planning a two-column (desktop) layout so I basically just need to know if it's on the right or the left.
• I'm building the site in WordPress and am planning/hoping to use Salvatorre to manage the post index layout (see attached mockup).
• I can use custom fields to assign various add'l classes/styling to each post.
• The Why: I need to apply different styling for posts in different columns. For instance, in the left column a 33% wide image will be floated right in its container and its title floated left, and vise-versa in the right column:

[attila]

You can easily target blocks inside columns using nth-child() selectors in CSS. Example:

.column:nth-child(1) > .block > img {
  float: left; /* float images left in blocks in 1st column. */
}
.column:nth-child(2) > .block > img {
  float: right; /* float images right in blocks in 2nd column. */
}

Or did I miss something?

[thefieldset]

@attila because of the varying heights of the blocks I'm expecting to eventually get even-numbered posts in the left column and vise-versa.

[MariusRumpf]

@thefieldset With @attila solution you can target the two columns individually in which all blocks are laying. With this you can create an offset as shown in your image.
The blocks are put in the order you mentioned for two columns:

1 - 2
3 - 4
5

So the number of post on the left is even to them on the right if the total amount is even. Did that answer your question?

[thefieldset]

@MariusRumpf Maybe I'm misunderstanding how the script works (which would be great!). My concern is how the script will respond with combined blocks of varying heights.

For @attila solution to work, I would need the even blocks themselves (nth-child(2) > .block) to always be in the right column. Would the script do that if I specified:

.column:nth-child(1) > .block {
  float: left;
}
.column:nth-child(2) > .block {
  float: right;
}

Would that give me the following (note that block 6 is not falling into the next open slot but is forced into column 2):

Thanks for your help!

[MariusRumpf]

@thefieldset The script does not check the height of the elements to bring them into the columns. It is simply the order of the elements that forms the order.

1 - 2
3 - 4
5 - 6
7 - 8
9 - 10

and so on.
Taking height into account for the order is an improvement that might be integrated soon #70 (balanced columns).

[thefieldset]

@MariusRumpf that's perfect.

I'm used to the Masonry script and was hoping I could Salvattore to do exacty what you're describing.

Thanks for all your help.