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:
-
{boolean | undefined}
- showGrid -
{number | undefined}
- cellHeight -
{number}
- columns -
{number[] | undefined}
- columnsWidthInPercent -
{standart flex align-item | undefined}
- cellAlign -
{standart flex justify-content | undefined}
- cellJustify -
{number | undefined}
- gridRowGap -
{number | undefined}
- gridColumnGap
FlexGridItem props:
-
{number | undefined}
- startRow -
{number | undefined}
- startColumn -
{number | undefined}
- endRow -
{number | undefined}
- endColumn
Examples
- 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>
- 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>
- 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>
- 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>