Incorrect working grid-* with fixed cols

[ixrock]

Expectation: .grid-6 > .col-2 = 2/6 = 1/3 = 100% / 3
Reality: .grid-6 > .col-2 = 2/12 = 1/6
It seems like only one 12-columns grid supported?

[bryanwillis]

.grid-6 gives you a "grid" where all nested .col are 1/6 width.

grid-5 would split up the col into 5ths so technically this isn't just a 12-column grid since you can make odd columns. Your expectation would be pretty cool though if I understanding it correctly.

[ixrock]

@bryanwillis .grid-6 by the name means 6-columns grid, right?
If so.. .col-2 should take 1/3 of all possible space in the grid.

[bryanwillis]

@ixrock Yea that's what I thought you meant. Seems like a great idea.

I forked your gist and added an explanation of how it currently works if you want to look at that to make sure we're on the same page here.

http://codepen.io/bootstrapped/pen/KgZvyW?editors=1100

I'm wondering if there's a reason it doesn't work like this or if maybe no thought to do that.
Looking at Can I Use it looks like this wouldn't work in Internet Explorer, but I don't have a Windows PC so I can't test it out.

We should also check that it doesn't affect nested "grid col-*"

[bryanwillis]

Tested it with grid col and nested elements and it seems to be working.

http://codepen.io/bootstrapped/pen/KgZvyW?editors=1100

[bryanwillis]

I think another problem is overly complex naming conventions. This issue obviously shows that there is confusion with the current functionality. But also the suggested implementation can quickly get complicated as well.

Take this example.

<div class="grid-6">
    <div class="col-2 grid">
        <div class="col-6">
        How should this work?
        </div>
    <div class="col-6 grid">
        <div class="col-2"></div>
        <div class="col-8 grid">
            <div class="col-6"></div>
            <div class="col-6"></div>
            <div class="col-4"></div>
            <div class="col-4"></div>
            <div class="col-4"> </div>
        </div>
    </div>
</div>

The nested column wouldn't work as expected based on @ixrock example.

We could try changing:

.grid-6 .col-2 {
flex-basis: calc(100% / 6 * 2);
}

to:

.grid-6 > .col-2 {
flex-basis: calc(100% / 6 * 2);
}

I haven't tested it though. My guess is that it's still going to be complicated. For example grid can be used so many ways currently.

<div class="grid-6">
    <div class="col-2">
       <div class="col-8 grid">
          <div class="col-4">
            <div class="grid">
            </div>
          </div>
    </div>
    <div class="col-2 grid">
       <div class="col-8">
          <div class="col-4">
            <div class="grid-3">
            </div>
          </div>
    ......

Obviously this example is overkill, and probably wouldn't actually be used, but it's just to show that adding even more logic to the already complex nature of grid could make things even more complicated to understand than it already is.

[centrual]

https://vgy.me/rWpEYG.png
Version: 2.2.5

[dannyuk1982]

I am getting this too - even if the grid is set to i.e. grid-10 or grid 5, it always treats it as a 12 column grid

for this a col-1 in a grid-5, this should be 20%, but the CSS later overrides it:

[dannyuk1982]

Putting a load of !important at the end of the relevant lines in gridlex-vars.scss lines 48 - 107 seems to fix this, but could be breaking something else, I haven't tested thoroughly