Multiple Grids - Different Columns Styles

Thought I should share this, it might just help somebody.

If you have multiple grids on one page but need to apply different styles on the columns, the following should work:

.active-controls-grid {font: menu;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-grid-row,
.active-grid-row .active-list-item,
.active-scroll-left .active-list-item {height: auto;}
.active-column-0 {display: none!important;}

#grid1{height: 160px; border: 1px inset; background: white}
#grid1 .active-column-3 {display: none!important;}
#grid1 .active-column-6 {display: none!important;}

#grid2{height: 160px; border: 1px inset; background: white}
#grid2 .active-column-4 {display: none!important;}

The lesson learnt is that using the css selector '#grid1 .active-column-4' will define the style of elements of class '.active-column-4' that are children of the element 'grid1'.