Ways to eliminate additional whitespace in CSS Grid styling techniques

Currently, I am utilizing material ui to establish a grid system for showcasing videos in 2 rows. While I have successfully set up the general layout, I am facing difficulty in eliminating the white space/padding between the elements. Despite trying nowrap as recommended in the documentation, it doesn't seem to work as expected. Below is my component code:

                 <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>

Below is some of the CSS for media__object:

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

Take a look at the current situation with a background color added to highlight the spacing issue.

https://i.stack.imgur.com/J9IeB.jpg

Thank you!

cssreactjsmaterial-ui

Answer №1

From my understanding, it seems that eliminating the vertical space you mentioned cannot be achieved solely with CSS; JavaScript will be necessary. The design style you seem to be aiming for is referred to as 'masonry'.

What is currently displayed appears to be two rows, each containing two columns. The height of each row is determined by the tallest column within it, and once the width of the page is filled (two half-width columns), it shifts to a new row. This behavior is a limitation of CSS (although there are some CSS-only techniques attempting to achieve the desired layout, they are not widely supported). Another option could involve creating two separate columns and filling them individually so they do not share the same 'row' as the adjacent item. However, this approach may lead to elements being out of order and require careful distribution to ensure equal spacing.

You might want to explore using a JS masonry library like this one.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to include a video tag in Next.js results in an error message stating: "Hydration failed due to mismatch between initial UI and server-rendered content."

Oops! Runtime Error Alert: The initial UI does not match what was rendered on the server. Warning: Make sure the server HTML includes a matching <div> tag! For more details, click here: https://nextjs.org/docs/messages/react-hydration-error Compon ...

reactjsnext.js

Expanding the MatBottomSheet's Width: A Guide

The CSS provided above is specifically for increasing the height of an element, but not its width: .mat-bottom-sheet-container { min-height: 100vh; min-width: 100vw; margin-top: 80px; } Does anyone have a solution for expanding the width of MatBott ...

javascripthtmlcssangularangular-material

Expanding the width of an image beyond its parent <div> without compromising on vertical space

Is it possible to have a child <img> wider than its parent div, while maintaining proportional width and preserving vertical space? Using position:absolute; might move the image out of the normal document flow, but I want to keep the vertical space ...

htmlcss

Encountering a Spring Boot 403 Forbidden Error while attempting to access the web application (index.html) as well as the ReactJS app

I have added the index.html file to my spring boot application's 'src/main/resources/static' folder so that I can access the web page while running the server. This setup works fine in another spring boot application without the configuratio ...

reactjsspring-boot

Encountered an error while parsing modules: Unexpected token "<" in React, Webpack, and Babel setup

I'm currently working on developing my first React app and have been following a tutorial for guidance. However, when I run webpack, I encounter an error pointing to a specific space in the code: PS C:\...\frontend> npm run dev > [em ...

reactjsnpmwebpackbabeljs

Utilizing a React hook to render and map elements in a function

Can the hook return function be assigned to a render map in React? In this example, we have the socialAuthMethodsMap map with the onClick parameter. I tried to assign the signInWithApple function from the useFirebaseAuth hook, but it violates React's ...

javascriptreactjstypescriptfirebasereact-hooks

Unable to host Express and React application on port 80

I have a React application compiled with Express serving as a static React site, and I want to host them on port 80. The challenge is that my VPS runs Ubuntu with Plesk Onyx supporting multiple applications as subdomains on vhosts using port 80: server.l ...

javascriptreactjsexpressvpsplesk

Gatsby Dazzling Graphic

I'm currently facing an issue with my Heroes component. const UniqueHero = styled.div` display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, #1f1f21 1%, #1f1f21 1%,rgba(25, 26, 27, 0) 100%) , url(${prop ...

javascriptreactjsimagegatsbyresponsive-images

Struggling to get the picture and text to line up

I've been struggling with a seemingly simple task but just can't seem to make it work. My goal is to create a basic comment structure that looks like this: *image* *name* *comment* The issue I'm facing is trying to position the ...

htmlcssposition

Encountering an Invariant Violation error while converting app.js from create-react-app to react native

I initially developed my project using create-react-app but decided to switch to react native for publishing purposes. To do this, I created a new project in react native and then transferred my app.js file over. However, I encountered an error message: ...

reactjsreact-native

Dynamic hiding and showing of Formik form fields based on the value of another form field

I have a form that utilizes Formik. How can I dynamically show or hide a 'text' field based on the selected option in a 'select' field? <Formik initialValues={{transactionCategory, name}} onSubmit={this.onSubmit} validate ...

reactjsformik

What is the best way to eliminate the underline in a text hyperlink?

I've encountered an issue with my CSS file. I tried using the code below: text-decoration: none; However, the text is not displaying as expected. I had to resort to using JavaScript for adding a hyperlink behind the text, which I believe is causing ...

jqueryhtmlcssmouseoverunderline

What is the best way to horizontally align a div within a parent div?

I'm having trouble centering the red div containing three child elements (h1, h3, and button) within a green container div using CSS. I initially attempted to center the red div vertically and horizontally on its own, but after some research, I learne ...

cssflexboxcentering

Dealing with the overflow issue on Android 4.1 using position: relative and position: absolute

I have a question regarding creating a dynamically filling rounded button. I have successfully created an inner div inside the button with absolute positioning at the bottom. It works perfectly on Chrome webview, but I'm facing issues on Android 4.1. ...

androidcssangularjsionic-framework

Tips on preventing the first letter from being capitalized in an input field

Currently, I am developing a React web application primarily used on mobile devices. We have an input field and our goal is to ensure that the first letter entered is not automatically capitalized. The input field can still contain capital letters, but ...

reactjsmaterial-uiantd

Stopping horizontal scrolling in Material-UI Autocomplete/Popper: A troubleshooting guide

I am currently working on incorporating the Material-UI Autocomplete component, and my goal is to have each option label show an icon along with some text. The challenge I'm facing is that I only want the popper element to be the width of the text inp ...

cssreactjsmaterial-ui

Incorporate a platform-specific button in a user interface with React Native

I need to display a button that is only shown on iOS, not on android. I have tried using the following style, but it doesn't seem to be working. ...Platform.select({ android: { display:'none', }, The code for my button is: <Bu ...

cssreact-native

React component state not being updated as expected

I've been developing an app for managing income and expenses, which allows users to input data and select the type of income or expense from a dropdown list. The issue I'm facing is that my Total Income (Total expense will be added once this pro ...

reactjscomponentssetstate

Disable the movement and dragging functionality of the scroll feature in Google Maps using React

I have a map.jsx file in my React application that contains the code below: import React from 'react'; import GoogleMapReact from 'google-map-react'; import './map.css'; const Map = ({ location, zoomLevel }) => ( <d ...

javascriptcssreactjsgoogle-maps

The fixed table header is misaligned with the body columns' width

I was looking for a way to add a vertical scrollbar to my table, and I ended up wrapping the entire table in a div. The result was that the table head was fixed in position. Is there a simpler method to include a scrollbar in a table without affecting the ...

htmlcsshtml-table