`.grid-bottom` classes are flexbox?

[vongoh]

At 8:55 mins into the video, you start working on moving the main nav down to the bottom of the header. To do that you reference the .grid-bottom class. I took notes on your entire modular code series, and I didn't recall seeing anything about this. So I went to the code here on the repo and found this:

.grid-bottom {
    -webkit-align-items: flex-end;
    -ms-align-items: flex-end;
}

// opera and .unit code here

.grid-bottom .unit {
    vertical-align: bottom;
}

I brought these classes into the demo project i am using to work this and nothing happens for me, the nav does not move.

First thing that strikes me is that these are flexbox classes. I don't recall you mentioning that flex-box is necessary to get this grid system to work. Also, I'd prefer not to use flexbox until compatibility issues get better -- and definitely not without a strong fallback.

Do you have a more conventional strategy for moving these items vertically in the grid? ie what is the most widely supported responsive and reliable way to make this happen - thanks ..

[thomasjbradley]

It’s likely at some point that I switch to using my grid generator, “Gridifier”. (I fell like I mention and show it in one of the videos but can't remember which one.) The videos show the basics of how to set up a responsive grid but when making websites I almost always just use the generated version.

https://thomasjbradley.github.io/gridifier/

It uses a combination of display: inline-block (for older browsers) and display: flex (for newer browsers) to get the most features.

[vongoh]

Yes I noted that you use a generator, however I'm implementing everything by hand and need to thoroughly understand how the mechanics of this work.

I've actually transcribed most of your modular videos to notes - and have converted this grid system into a Sass framework I'm building. I'm a bit stuck on this issue right now, its key to getting grid units to reliably move vertically inside grid rows.

How are exactly are you using display: inline-block in this context? thanks

[thomasjbradley]

You can definitely get the units to move to the bottom and the top using display: inline-block.

The key is to set the .unit to display: inline-block instead of float. But that creates extra space between each grid unit because the space around the HTML tags counts. So, the Gridifier changes the letter spacing on .grid to a negative number, then the .unit classes set the letter spacing back to normal.

This is similar to how Yahoo’s Pure framework's grids work: http://purecss.io/grids/

[vongoh]

Great! That works well and I was able to finish the tutorial from there with few issues.

Here's an excellent explanation of how this method works:

http://blog.purecss.io/post/60789414532/how-we-improved-grids-in-pure-030