How to use n:th child to style views

By adam
Wed, 2014-10-01 12:55
7 comments

Share with Others

The Problem

Style this using views and CSS. What you are looking at below is a view being displayed as a grid. This is by far the easiest way to display content in a nice looking grid view, but as you will read there is a MUCH better way.


So you might still be thinking...this is pointless you can just use views grid display and you have it solved. I say yep to that, BUT what if you wanted your view to be responsive? Without some fancy configuration (beyond my expertise level) you cannot get views grid display to look good on a smaller screen. Bummer. There has to be a better way...and there is.

Here is my solution to this problem, using views select an unformatted list and inject the following CSS (I have also provided the SASS equivalent).


/* Styling View using :nth-child */
/* You may want to use a previous selector to grab only items within this view */
.views-row {
  float: left; /* Will bring .views-row up */
}
/* Starts by selecting 5 child element or .views-row-5 then applys CSS to every 4th item after or 5th, 9th, 13th, etc.) */
.views-row:nth-child(4n+5) {
  clear: left;
}
/* Styling View using :nth-child USING SASS */
/* You may want to use a previous selector to grab only items within this view */
.views-row {
  float: left; /* Will bring .views-row up */
/* Starts by selecting 5 child element or .views-row-5 then applys CSS to every 4th item after or 5th, 9th, 13th, etc.) */
&:nth-child(4n+5) {
clear:left;
}
}


You could use this as well, but it isn’t nearly as scalable and there is just a better way

/* Starts by selecting 5 child element or .views-row-5 then applys CSS to every 4th item after or 5th, 9th, 13th, etc.) */
.views-row-5,
.views-row-9,
.views-row-13 {
  clear: left;
}

Now as you can see the grid will still look exactly the same as it did before, but it is 100% configurable with media queries and your CSS imagination. I’ll show you what I mean…

If you change the code to this

/* Styling View using :nth-child */
/* You may want to use a previous selector to grab only items within this view */
.views-row {
  float: left; /* Will bring .views-row up */
}
/* Starts by selecting 5 child element or .views-row-5 then applys CSS to every 4th item after or 5th, 9th, 13th, etc.) */
.views-row:nth-child(3n+4) {
  clear: left;
}

You can change the grid from being 4 columns to 3 columns. This comes in handy on those smaller screens.

Note: :nth-child is supported on all “new” browsers, but our friend IE8 and below doesn't like to play ball. In my opinion, I don’t worry about this and configure and install this module to make people upgrade.

If you are new to views, you can check out our Drupal views video.

Comments

I haven't used this module in the past, but just looking at the module page it looks like a nice option.

As mentioned in the post you just have to use media queries to adjust the floats on the rows at whatever break points you specify.

That is the beauty of development though, there is always multiple ways to get things done. Thanks for sharing.

Hey guys, thanks for the great tips.

I'm trying to implement the sass method but am getting an error: Syntax error: Mixin grid is missing argument $columns

I've copied the mixin to my scss file, but how do i specify the number of columns i want to use?

Thanks for any help you can give me

Post new comment