1.0.31 • Published 3 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
3 years ago
1.0.31
3 years ago
1.0.30
3 years ago
1.0.28
3 years ago
1.0.25
3 years ago
1.0.24
3 years ago
1.0.23
3 years ago
1.0.27
3 years ago
1.0.22
3 years ago
1.0.21
3 years ago
1.0.20
3 years ago
1.0.19
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.15
3 years ago
1.0.14
3 years ago
1.0.13
3 years ago
1.0.11
3 years ago
1.0.12
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.4
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago