jeroenoomsnl / the-flex-grid Goto Github PK

http://jeroenoomsnl.github.io/the-flex-grid/ say's the grid is supported by IE10+.
It does'nt work in IE10 and IE11. So, I was wondering. Is it a typo or do I need to have some polyfills?

Please remove div.* selector from css. Use .col-1 instead.

For example, we have semantic elements like <aside>, <section>

Hi Jeroen,

Can you make a extension to your css so rows will fill the space when the grid is nested?
Use case:

Grid contains 2 columns.
Column 1 contains nested grid
-- Nested grid contains 2 rows with a column
Column 2 has 100vh
The nested grid has just 50vh of the screen

I should expect that rows of the nested grid will fill the space by its parent
Result will be grid with 2 columns of 100vh and nested grid space of 50vh per row

Hey Jeroen,

Is it possible for you to support row span in the flex grid?
I would like to have a cell of two rows, and right 2 rows with 4 cells.
So it looks like this:

---------------------------------------------------
|                 |     CELL 2    |     CELL 3    |
|    CELL 1       |  ------------------------------
|                 |     CELL 4    |     CELL 5    |
---------------------------------------------------

Thx anyway for your great flex grid system :-) 👍

@jeroenoomsNL Thx for your grid system.
Your examples are good and your CSS clean so credits for that 👍

I have only one problem.
I want to make a grid like the nested grid.
However I have a column of 6, and want 2 columns of 12 nested in a 6 column

So you will get something like:
[column-6] [column-6 [column-12][column-12]]

By adding an row-equal I was hoping the column is growing correctly. But it dont seems to be.
So do you have a small example how I can achive this?

The-flex-grid is awesome, I use it all the time.
The negative inline-margin for .row is bugging me often though. For example when using a background color for the row, it extends it's container.
The connected inline padding for the .col-x has it's drawbacks as well with regard to background color.

I think a flexbox grid should use column-gap for spacing between columns, although I'm not sure how the flex-basis for the different column widths should be set.

I got the following code:

<div class="row row-reverse">
    <div class="col-large-6 col-small-12">
        <div class="content">1</div>
    </div>
    <div class="col-large-6 col-small-12">
        <div class="content">2</div>
    </div>
</div>

The row-reverse adds the CSS styling flex-direction:row-reverse; however when the columns are small (12) flex will put the columns under each other and results in no reverse. Changing to column-reverse works correct.

I expect when col is over full width, it should not set flex-direction to row-reverse but to column-reverse

Hey Jeroen,

An other idea to the flex grid.
Can options like:

• row-space-around
• row-space-between
• row-center
• row-right
• row-left
• row-reverse

also supported for responsive?
Like: row-center-small or row-reverse-medium
This can be handy, for example you have a large screen and you see that col immediately, but on mobile its not directy in the viewport, by setting in case of small, reverse the columns, the col that need to be directly visibile is then on top.

Hi!

I'm wondering about the min-width property on .grid class at line (https://github.com/jeroenoomsNL/the-flex-grid/blob/master/dist/the-flex-grid.css#L8).

Is it okay?

Hi Jeroen,

I am not sure but it seems to be a bug.
I have 2 columns, one has nested grid.
I want to stretch the 2 columns by using row-equal.
But the orange column is not expanding.

Here is my example: https://codepen.io/eL-Prova/pen/aYvLEr

For readability is the class "row-reverse" not better to be called reverse-columns? In this case the row isnt reversed but the columns in the row are reversed.
However, is it possible to reverse rows too?