csswizardry-grids icon indicating copy to clipboard operation
csswizardry-grids copied to clipboard

Element that behaves both as grid and grid__item

Open twissell opened this issue 12 years ago • 1 comments

First of all say that i don't know if this is the proper usage of grid and grid__items, but i did it in that way because you can avoid unnecessary html tags. To illustrate the problem i make a fiddle with the markup http://jsfiddle.net/Pitxon/qzn9t/.

The first div inside body is aligned center as normal but the children of the div that is both a grid__item and a grid doesn't align center, the parent of that two divs is getting the text-align: left property from his parent, the body element throught the > selector although it has the class grid--center, so i feel that the div should take the property value text-align: center instead of left.

As a quick fix i added !important to the following part of the library:

#{$class-type}grid--center{

text-align:center !important;

   > #{$class-type}grid__item{
    text-align:left;
}
}

The thing is if this is a proper way of do this kind of thing or maybe i should go with an extra div as grid grid--center?

thx for this awesome grid system!!!!!

twissell avatar Nov 23 '13 16:11 twissell

If I understand the question, I believe this would work.

#{$class-type}grid--item{
  @extend #{$class-type}grid;
  @extend #{$class-type}grid--center;
  margin-left: 0;
}

Cleecanth avatar May 28 '14 23:05 Cleecanth