960gs: change the background color of particular columns

Question

I'm using the 960 grid system for a site design and I'd like to be able to change the background color of particular columns. I've figured out how to change the background color of the entire container by doing something like

.container_12 {
  background-color: #000000;
  overflow: hidden; /* so that the margin is transparent */
}

However, what if I want to change the background color of, say, just columns 1-3? I'd like the color to go all the way to the bottom of the container.

Example. Let's say I have some html like:

<div class="container_12">
  <div class="grid_4 alpha"> a </div>
  <div class="grid_4"> b </div>
  <div class="grid_4 omega"> c </div>
  <div class="grid_1 alpha"> A </div>
  <div class="grid_10"> B </div>
  <div class="grid_1 omega"> C </div>
</div>

I want to style it so that columns 1-3 have a given background color. This would mean that the first three columns of the a div, the A div, and the first two columns of the B div would have this color. Basically I want to style columns, not grids. Is this possible?

PhearOfRayne · Answer 1 · 2012-12-28T02:17:30.053

1

You could do it like this:

.grid_4.alpha, .grid_1.alpha {
    background-color: blue;
}

.grid_4, .grid_10 {
    background-color: red;
}

.grid_4.omega, .grid_1.omega {
    background-color: green;
}

Working Example: http://jsfiddle.net/fewds/tnMhc/

edited Dec 28 '12 at 02:17

answered Dec 28 '12 at 01:36

PhearOfRayne

4,990
3
31
44

This will style particular grids, not particular columns. For example if I have

stuff

more stuff

even more stuff

The middle grid will be styled. I want to style the *columns*, regardless of how I've organized the grids within them. – James Porter Dec 28 '12 at 01:39
@JamesPorter Still not 100% sure on what you looking for but try my updated answer – PhearOfRayne Dec 28 '12 at 02:21

score 1 · Accepted Answer · answered Dec 28 '12 at 02:20

I am not sure I understood it correctly and I'm not familiar with 960gs framework. I supposed the columns are resized based on percents, in which case I think my solution will work. also, your container needs to have a fixed height so it will be colored top to bottom.

So the trick is:

in your container_12, put an empty
set its height to 100% and background to whathever
set it margin-right so that it equals exactly the opposite of its width

Have a look a this http://codepen.io/joe/pen/bwBky

Chris · Answer 3 · 2012-12-28T08:40:19.707

I think what's happening here is that your idea of the grid system isn't quite how they are intended to be used. And that's perfectly fine, as I only recently started using grid systems as well!

Grid systems are meant to provide structure for your content, not styles.

.grid_4, .grid_8, and .grid_12 are meant to be columns, not cells. If you want div a and div A to be in the first column, you would put them one after another in .grid_4 alpha.

And since grid systems aren't meant for styling, you should avoid styling the grid CSS and instead create your own styles.

So your HTML would end up looking like this:

<div class="container_12">
  <div class="grid_4 alpha red-column">
    <div>Content-a</div>
    <div>Content-A</div>
  </div>
  <div class="grid_4 green-column">
    <div>Content-b</div>
    <div>Content-B</b>
  </div>
  <div class="grid_4 omega blue-column">
    <div>Content-c</div>
    <div>Content-C</div>
  </div>
</div>

And then you'd add this to your CSS:

.red-column {background-color:#f00;}
.green-column {background-color:#0f0;}
.blue-column {background-color:#00f;}

960gs: change the background color of particular columns

3 Answers3