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.

Thank You!

https://stackoverflow.com/questions/66926124/how-to-remove-extra-white-space-in-css-grid April 03, 2021 at 06:48AM