Ways to eliminate the final empty space in a grid

Looking to create a layout with 5 boxes? Currently, I have managed to set up the grid structure, but the issue is that there is still some space below the last item in the grid. Below is the styled component for Container:

const Container = styled('div')`
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  grid-template-rows: 5fr 0.75fr 1fr;
  gap: 10px;
  & > div {
    min-height: 20px;
  }
  & > .container-live-call {
    grid-column: 1 / span 3;
    background-color: ${({ theme }) => theme.color.secondary.$100};
  }
  // More styling code here
`;
<Container>
 <div className="container-live-call"></div>
 <div className="container-live-call-map"></div>
 <div className="container-live-call-info"></div>
 <div className="container-live-call-volume"></div>
 <div className="container-live-call-voice">
   <button onClick={() => setOpen(false)}>Click me to close</button>
 </div>
</Container>

https://i.sstatic.net/XKRrF.png

Answer №1

Changing the .container-live-call-map and .container-live-call-info rules to start at row 2 and span 3 rows instead of adding an additional row, will align the total rows with what is defined in grid-template-rows.

.container  > .container-live-call-map {
    grid-row: 2 / span 2;
}
.container  > .container-live-call-info {
    grid-row: 2 / span 2;
}

This adjustment should eliminate any extra row or gap below the last item of the grid.

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

Aligning a pair of <div> elements within a container in a form field

As I attempt to recreate the survey form challenge from FreeCodeCamp.org Projects, I am facing an issue with aligning two <div> elements inside their parent <div> without the second child moving to a new line using CSS properties other than flo ...

As I scroll, I hope the texts will stay fixed against the backdrop image

Is it possible to make the #home section fixed to the background while scrolling, including all the texts and buttons? I envision it like having texts embedded in an image. The text is located in the middle left of the page (let's keep this as default ...

Having trouble with CSS basics? Seeing properties change across multiple classes?

My CSS skills are still in the beginner stage and I am currently struggling to troubleshoot an issue with my code. The HTML: <div id="loginForm"> <span class="dottedLink"><a href="resetlogin">Recover login details</a></span ...

Outline along a single edge

Is there a way to add an inset border to an HTML element on just one side, without using an image as a background? I've been stretching and positioning images for this purpose in the past, but I recently discovered the outline CSS property. However, i ...

Ways to eliminate spacing around icons in BottomNavigationView in Android

Currently, I am facing a challenge in removing the margins from the icons within a BottomNavigationView on Android. Although I have successfully eliminated the text by utilizing app:labelVisibilityMode="unlabeled", I am struggling to get rid of the default ...

Is there a way to ensure that my text is centered on top of an image while maintaining responsiveness?

I'm trying to make the text adjust its center to the height of an image that changes size when the page is resized. Here's what I have so far: HTML <section id="eyeCatcher"> <div id="catchContainer" > <div id="eyeCatchQ ...

no visible text displayed within an input-label field

Currently, I have started working on a multi-step form that is designed to be very simple and clean. However, I am facing an issue where nothing is being displayed when I click on the next arrow. I am puzzled as to why it's not even displaying the te ...

unexpected alteration of text sizing in mathjax within reveal.js presentations

Something strange is happening with the font size in my slides. The code for each slide is the same, but there is an unexpected change between the 3rd and 4th slide. I cannot figure out what is causing this discrepancy. Oddly enough, when I remove the tit ...

Hovering over a row in a DataGrid to trigger an event

Can anyone provide some guidance on how to create an event triggered by hovering over a row in a DataGrid? I also need to be able to access the data stored in that specific row cell. It seems like I may need to develop a custom Row component and link it ...

Fiddle demonstrates HTML functionality, while local testing is unsuccessful

Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message ...

Properly appears in Chrome, but experiences issues in Internet Explorer 11

The design of the website looks seamless in Chrome and Firefox, however, when I view it in Internet Explorer, I notice a significant gap on the right side of the first two pages. How can I fix this issue specifically for Internet Explorer? Should I use a m ...

Sass: Setting a maximum width relative to the parent element's width

I have a resizable container with two buttons inside, one of which has dynamic text. Within my scss file, I am aiming to implement a condition where if the width of the container is less than 200, then the max width of the dynamic button should be 135px, ...

Issue with triggering function within Material UI Tabs

The issue I encountered cannot be replicated, but I attempted to address it. Within a Material UI element, there is a child element that I inserted - an X icon located in the corner. The parent element is the surrounding box. There are two main problems: ...

What is the best way to eliminate the border around an image when including a hyperlink?

There seems to be a rectangle showing up outside the link that I would like to remove. How can I get rid of it? No Image <a href="~/Web Pages/Home.aspx" runat="server"> <img src="<%= ResolveUrl("~/Images/TestToday.png") %>" alt="No im ...

change the css style with the !important rule to muiStyle

Currently implementing the latest Material-UI library in my project. I am in the process of migrating old CSS files to new MuiStyles. I am converting it within my MuiStyle object using JavaScript as shown below: const muiStyle = { fabStyle: { displ ...

Loading Ajax content into div (Wordpress) without pre-loading the font can cause display issues

Currently, I'm implementing a JavaScript function within Wordpress using Ajax to load the content of a post into a modal div when specific elements are clicked. Here is an example of how the JS function appears: function openProjectModal($that) { ...

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

My goal is to extract all CSS references from an external stylesheet, such as <link rel="stylesheet" href="css/General.css">, and add them to the existing styling of each HTML element on my page (converting all CSS to inline). The reason for this re ...

Leveraging Material-UI: Utilize props in useStyles method while employing Array.map()

After delving into the world of passing props to makeStyles in Material-UI, I stumbled upon this insightful answer. The solution presented involves passing props as a variable, which is quite useful. However, my aspiration is to extend this functionality t ...

Troubleshooting: PHP Integration Issue with HTML Document

I have a simple HTML file displaying text and including a PHP file with basic echos: The HTML code is in 'home.html' file: <html> <body> <h1>Welcome to my home page!</h1> <p>Some text.</p> <p>Some more ...

Creating a persistent gap BETWEEN li inline list items

I'm seeking a solution to create horizontal links using a list. I know that I need to apply the display: block property to the ul element and set display: inline for the li items. While there are several inquiries about maintaining a consistent width ...