1.0.31 • Published 4 years ago
flex-area-grid v1.0.31
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>
1.0.29
4 years ago
1.0.31
4 years ago
1.0.30
4 years ago
1.0.28
4 years ago
1.0.25
5 years ago
1.0.24
5 years ago
1.0.23
5 years ago
1.0.27
5 years ago
1.0.22
5 years ago
1.0.21
5 years ago
1.0.20
5 years ago
1.0.19
5 years ago
1.0.18
5 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.11
5 years ago
1.0.12
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.4
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago