flex-area-grid

When is it a useful?

For each case when you are needed in supporting old browsers such as an Internet Explorer 11 or a Chrome version 41 when the grid feature isn't implemented fully.

FlexGrid props:

1. {boolean | undefined} - showGrid
2. {number | undefined} - cellHeight
3. {number} - columns
4. {number[] | undefined} - columnsWidthInPercent
5. {standart flex align-item | undefined} - cellAlign
6. {standart flex justify-content | undefined} - cellJustify
7. {number | undefined} - gridRowGap
8. {number | undefined} - gridColumnGap

FlexGridItem props:

1. {number | undefined} - startRow
2. {number | undefined} - startColumn
3. {number | undefined} - endRow
4. {number | undefined} - endColumn

Examples

1. A simple grid using a fixed cell height

    <FlexGrid cellHeight={100} columns={2} gridRowGap={16} gridColumnGap={16}>
        <FlexGridItem>
            <div style={{backgroundColor: 'red', height: '100%', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem>
            <div style={{backgroundColor: 'green', height: '100%', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem>
            <div style={{backgroundColor: 'blue', height: '100%', width: '100%'}}></div>
        </FlexGridItem>
    </FlexGrid>

2. An area grid using a fixed cell height

    <FlexGrid cellHeight={100} columns={2} gridRowGap={16} gridColumnGap={16}>
        <FlexGridItem startRow={1} startColumn={1}  endRow={4} endColumn={1}>
            <div style={{backgroundColor: 'red', height: '100%', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem>
            <div style={{backgroundColor: 'green', height: '100%', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem>
            <div style={{backgroundColor: 'blue', height: '100%', width: '100%'}}></div>
        </FlexGridItem>
    </FlexGrid>

    <FlexGrid cellHeight={100} columns={2} gridRowGap={16} gridColumnGap={16}>
        <FlexGridItem startRow={1} startColumn={1}  endRow={3} endColumn={1}>
            <div style={{backgroundColor: 'red', height: '100%', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem>
            <div style={{backgroundColor: 'green', height: '100%', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem startRow={4} startColumn={1}  endRow={5} endColumn={2}>
            <div style={{backgroundColor: 'blue', height: '100%', width: '100%'}}></div>
        </FlexGridItem>
    </FlexGrid>

3. An area grid using an auto cell height

    <FlexGrid columns={2} gridRowGap={16} gridColumnGap={16}>
        <FlexGridItem startRow={1} startColumn={1} endRow={4} endColumn={1}>
            <div style={{backgroundColor: 'red', height: '500px', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem startRow={1} startColumn={2} endRow={1} endColumn={2}>
            <div style={{backgroundColor: 'green', height: '40px', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem startRow={2} startColumn={2} endRow={2} endColumn={2}>
            <div style={{backgroundColor: 'blue', height: '100px', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem startRow={3} startColumn={2} endRow={3} endColumn={2}>
            <div style={{backgroundColor: 'blue', height: '200px', width: '100%'}}></div>
        </FlexGridItem>
    </FlexGrid>

4. An area grid using columnsWidthInPercent property

    <FlexGrid columns={2} columnsWidthInPercent={[30,70]} gridRowGap={16} gridColumnGap={16}>
        <FlexGridItem startRow={1} startColumn={1} endRow={4} endColumn={1}>
            <div style={{backgroundColor: 'red', height: '500px', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem startRow={1} startColumn={2} endRow={1} endColumn={2}>
            <div style={{backgroundColor: 'green', height: '40px', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem startRow={2} startColumn={2} endRow={2} endColumn={2}>
            <div style={{backgroundColor: 'blue', height: '100px', width: '100%'}}></div>
        </FlexGridItem>
        <FlexGridItem startRow={3} startColumn={2} endRow={3} endColumn={2}>
            <div style={{backgroundColor: 'blue', height: '200px', width: '100%'}}></div>
        </FlexGridItem>
    </FlexGrid>