I have been working on a React component that I want to stick to the bottom of the screen no matter what content is above it. Even if there is minimal content, I want it to remain at the bottom.
To achieve this, I added
style={{position: 'fixed', bottom: 0}}div.
Now, my goal is to create a grid layout like the one shown in this image. However, no matter what I try, the elements end up overlapping each other and making no sense at all.
I've attempted using Bootstrap, grouping them in divs, and playing with flex directions, but nothing seems to work as intended.
Here is the code snippet:
render() {
return(
<div style={{position: 'fixed', bottom: 0}}>
{/*Fix elements as footer*/}
<div style={{flexDirection:'row'}}>
<Button variant="raised" color="default" style={{fontSize:20, minHeight: 200}}> A </Button>
</div>
<div style={{flexDirection:'column'}}>
<Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
<Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
</div>
<div style={{flexDirection:'column'}}>
<Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
<Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
<Button variant="raised" color="default" style={{fontSize:20}}> A</Button>
</div>
<div style={{flexDirection:'column'}}>
<Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
<Button variant="raised" color="default" style={{fontSize:20}}> A </Button>
</div>
</div>
);
}
CSS has always been a challenge for me despite reading extensively about styling. If anyone has any tips on creating custom layouts, I would greatly appreciate the guidance. While Bootstrap makes simple layouts easy, mastering CSS remains elusive and time-consuming for me.