Layout option [#2118183]

This is the code for the 3 columns layout style i am using, but i cant seem to get it to work the way i want:
this code is separating one article into three rows: the text, picture, and title from one simple article into three parts. I just want 3 separate rows going horizontally from left to right. i want each row containing one article, not breaking one article into three parts... any Suggestions?
I love the Groundwork theme and i would rather end my search with this theme if i can get past this one obstacle.

These codes gave the same imperfect results:

article {
-webkit-column-count:3;
-moz-column-count:;
column-count:3;
}

    #node-1 p,
    .front .views-row {
      .column();
    }
    #node-1 p {
      .unit(6);
    }
    .front .views-row {
      .unit(8);
    }

I know the above code is for a node id, therefore, i would like have any suggestions for the proper code, as well?

Comment	File	Size	Author
#1	3col-articles.jpg	158.73 KB	JohnFilipstad
	photo.JPG	28.09 KB	alkhalife

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

JohnFilipstad

Norwegian Bokmål

Oslo

CreditAttribution: JohnFilipstad commented 25 October 2013 at 22:24

File	Size
3col-articles.jpg	158.73 KB

As mentioned in the docs, you use the mixins .column() and .unit(N).
The .column() mixin will give you the styles to make the element float, while the .unit(N) mixin is for the width of the element. Probably

article {
  .column();
  .unit(4);
}

This depends actually on the number of units or width of the parent element. You might also need to remove the left margin of the 1st, 4th, 7th, etc, and the right margin of the 3rd, 6th, 9th... if this is a 3 column grid.

Or you might want to use percentages instead...