Vertical grid about reflex HOT 4 CLOSED

You can do this with reflex in a way, as long as you set a height of, say, 100vh on the parent grid then set your entire grid to grid--direction-column which will change the cross and main axis so you can use the justify helpers to set vertical spacing. e.g.:

        <div class="grid grid--direction-column grid--justify-space-between" style="height: 100vh">
            <a href="javascript:void(0);" class="grid__col-12 grid--align-center">
                <h3>Lesson 1</h3>
            </a>
            <a href="javascript:void(0);" class="grid__col-12 grid--align-center">
                <h3>Lesson 2</h3>
            </a>
            <a href="javascript:void(0);" class="grid__col-12 grid--align-center">
                <h3>Lesson 3</h3>
            </a>
        </div>

grid__col-x elements are already set to flex-direction: column by default, so again, set the heights of those and you can use the justify classes too. I will add a further demo to the demo page.

from reflex.

This is not something I've implemented. I'm not sure how useful it would be. Can you try and sell me on a use case?

from reflex.

It's useful mainly for we applications, not websites, where you have a 100% height on the main container and it is divided into multiple independently scrolling panes.
You could have a top menu bar with a fixed height, a side bar, a content area on the right split vertically 70% for the main content and 30% for a bottom pane, and finally a footer with a fixed height.
Flexbox is excellent for implementing this, but it would be simpler to use a grid system with support for vertical grids, with responsive breakpoints, than to do it manually directly on flexbox.
I ended up going with the "Foundation for Apps" amazing flexbox grid, which allows you to target the vertical dimension just by specifying a vertical class modifier on each cell, and also provides independent scrolling.
Nevertheless, this project is quite nice and lightweight, so it would be useful to have this kind of functionality without having to use a bigger framework.
Besides Foundation, I have found no other flexbox grid that provides this. I guess people are still mainly thinking about websites when using grids ;-)
But with time, I believe that will change.

from reflex.

It's not something I had considered previously as I tend to use this mainly for laying out horizontal grids and I am keen to keep it as lightweight and focussed as possible.

But I will look into your suggestion further. Thanks for taking the time to explain your use case.

from reflex.