In my use of Material-ui-next, I am attempting to create images in a specific layout.
------ ---------
| | | | 2 |
| | | 1 |---|
| | | | 3 |
------ ---------
I have encountered some unusual issues.
1 - 3 appears below 1
2 - The images do not occupy the entire space (only half the content space is utilized when highlighted)
3 - Sometimes, I get a display like the one shown below:
------ ---------
| | | | 2 |
| | | 1 |---|
| | | | 3 |
| | ---------
------
In this case, the components on the right side do not extend all the way down
For more information, you can visit the material-ui-next GridList documentation through this link. In the "Advanced Grid List" section, you will see a large image with several smaller ones below. My objective is to flip that horizontally.
I have tried the following approaches:
<GridList cols={4} rows={2}>
{
media.map((file, i) => (
<GridListTile style={{ display: 'flex', flexFlow: 'wrap row' }} cellHeight={200} key={i} cols={i===0 ? 3 : 1} rows={i===0 ? 2 : 1}>
<img src={file.url} />
</GridListTile>
))
}
</GridList>
The above resulted in 3 appearing below 2
<GridList cols={2} row={2} className={classes.gridList}>
{
<GridListTile cellHeight={200} key={1} cols={2} rows={2}>
<img src={file.url} />
</GridListTile>
}
</GridList>
</Grid>
<Grid item xs={12} md={3} style={{padding: '14px', paddingLeft: 0}}>
<Typography style={{ visibility: 'hidden' }}>a</Typography>
<GridList>
{
user && user.Media &&
<GridListTile cellHeight={200} style={{paddingBottom: 0}}>
<img src={file.url} />
</GridListTile>
}
</GridList>
<GridList>
{
user && user.Media &&
<GridListTile cellHeight={200} key={1} cols={1}>
<img src={file.url} />
</GridListTile>
}
</GridList>
This solves issue 1 but does not address issues 2 and 3.
I also attempted using native flexbox, but every time I did, the intended larger image shrunk to match the sizes of the others.
Below is the CSS code I used for flexbox (although minimal).
gridContainer: {
display: 'flex',
flexFlow: 'row',
justifyContent: 'space-around',
margin: '3rem 0'
},
EDIT - NEW
The following approach has been more successful than previous attempts. The two small side images adjust size properly based on screen size, while the larger central image remains fixed.
New CSS
gridList: {
transform: 'translateZ(0)',
display: 'flex',
justifyContent: 'left',
alignItems: 'left',
overflow: 'hidden',
'& img': {
flexShrink: 1,
minWidth: '200%',
minHeight: '200%'
}
},
gridListSmall: {
transform: 'translateZ(0)',
display: 'flex',
justifyContent: 'left',
alignItems: 'left',
overflow: 'hidden',
'& img': {
flexShrink: 0,
minWidth: '100%',
minHeight: '100%'
}
},
New HTML/JSX
<div cols={2} row={2} className={classes.gridList}>
{
<div cellHeight={200} key={1} cols={2} rows={2}>
<img src={file.url} />
</div>
}
</div>
</Grid>
<Grid item xs={12} md={3} style={{padding: '14px', paddingLeft: 0}}>
<Typography style={{ visibility: 'hidden' }}>a</Typography>
<div>
{
user && user.Media &&
<div cellHeight={200} style={{paddingBottom: 0}}>
<img src={file.url} />
</div>
}
</div>
<div>
{
user && user.Media &&
<div cellHeight={200} key={1} cols={1}>
<img src={file.url} />
</div>
}
</div>