CODEWITHSUNDEEP
cssreactjsmaterial-ui
darkstar
darkstar

Reputation: 1008

How to remove extra white space in css Grid?

So basically I am using material ui to set up a grid system to display videos in 2 rows. I have achieved the general layout but I can't seem to remove the white space/padding between the elements. I tried nowrap as the docs suggest but it doesn't work as intended. Here is my component:

                 <Grid
                    container
                    spacing={1}
                    direction="row"
                    justify="center"
                    alignItems="center"
                 >
                    {media.map((media) => (
                       <Grid item xs={6} key={Math.random()}>
                          <video
                             className="media__object"
                             autoPlay
                             loop
                             src={media.mp4}
                          />
                       </Grid>
                    ))}
                 </Grid>

Here is some of the css of media__object

.gif__object {
   border-radius: 5px;
   height: 100%;
   width: 100%;
   object-fit: cover;
}

Here is what the current situation looks like. I added some background color to make the space easily visible.

enter image description here

Thank You!

Upvotes: 1

Views: 661

Answers (1)

t-jam
t-jam

Reputation: 800

As far as I'm aware, you're not going to be able to get rid of that vertical space with CSS alone - you'll need some JS. The design style I understand you want is called 'masonry'.

What you're seeing is two rows with two columns in each. The row will be the height of the tallest column within it, then after the page width is filled (two half-width columns), it drops down to a new row. That's a limitation of CSS (there are some CSS-only workaround attempts for the desired layout, but they're not well supported). An alternative would be to create two columns and fill them separately, then they're not occupying the same 'row' as the item next to it. But I don't think that's what you want to do either since the order of elements will be off and you'll have to work out how to fill them evenly.

Try something like this JS masonry library.

Upvotes: 1

Related Questions