Grid List Float Left

Asked Aug 23 '19 at 15:15

Active May 07 '20 at 14:45

Viewed 77 times

Can you help me understaing why the white shirts images go next line and not below the blue ones?

I'm using material ui for reactjs:

<Grid item xs={12} md={6}>
    <GridList cellHeight={100} cols={4} rows={2}>
        <GridListTile rows={2} cols={2}>
            <img src="https://..." />
        </GridListTile>
        <GridListTile>
            <img src="https://..." />
        </GridListTile>
        <GridListTile>
            <img src="https://..." />
        </GridListTile>
        <GridListTile>
            <img src="https://..." />
        </GridListTile>
        <GridListTile>
            <img src="https://..." />
        </GridListTile>
    </GridList>
</Grid>

What am I doing wrong?

EDIT: for clearness this is the searched result:

And this is the code snippet:

https://codesandbox.io/embed/material-ui-drawer-demo-3txbo

edited May 07 '20 at 14:45

Olivier Tassinari

8,238
4
23
23

asked Aug 23 '19 at 15:15

Jumpa

4,319
11
52
100

change `cols={4}` by `cols={2}` here's the codesanbox https://codesandbox.io/s/material-ui-drawer-demo-lqi10 – Taha Azzabi Aug 23 '19 at 15:42
But I want the white shirts UNDER the blue one, keeping the big one on the left... – Jumpa Aug 23 '19 at 16:46
You're not using `float`...its flexbox based and flexbox can't do that - https://stackoverflow.com/questions/42946454/make-a-div-span-two-rows-in-a-grid – Paulie_D Aug 23 '19 at 17:06
@Paulie_D: thanks, what do you suggest? – Jumpa Aug 23 '19 at 18:58

Grid List Float Left

0 Answers0