Decrease the gap between rows in CSS Grid

I'm struggling to minimize the space between the rows. I've attempted adjusting margins and paddings to 0, but nothing seems to be working effectively.

Displaying desktop view on the left and mobile view on the right side.

https://i.sstatic.net/iisa4.jpg

.content{
    margin: 0;
    padding: 0;  
    width: 100%;
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(36, 1fr); 
    justify-items: stretch;
    align-content: start;
    }

.one{
    grid-column: 1/37;
    width: 100%;
}

.two{
    grid-column: 1/11;

}
.three{
    grid-column: 12/24;
    justify-self: center;
    align-self: start;
    position: relative;
    bottom: 5px;
}
.four{
    grid-column: 25/37;
}

For a test site, visit:

htmlcssresponsivecss-grid

Answer №1

The issue stems from the .ctrl element. It's occupying the space intended for reduction. The element is set to have a relative position, and :

An element with position: relative; is positioned relative to its default position.

If you adjust the top, right, bottom, and left properties of a relatively-positioned element, it will move away from its default position. No other content will automatically adjust to fill any gaps created by this element.

To correct this issue, you can apply a negative margin like so:

.ctrl {
    max-width: 30px;
    position: relative;
    bottom: 40px;
    color: black;
    text-align: left;
    padding-left: 1%;
    margin-bottom: -40px; /*added this line*/
}

Alternatively, you can use an absolute position and modify the code as follows:

.one,.two,.three {
   position:relative;
}
.ctrl {
    max-width: 30px;
    position: absolute;
    bottom: 10px;
    color: black;
    text-align: left;
    padding-left: 1%;
}

Answer №2

There is no space between the rows in this grid layout. The rows are closely stacked together.

The gap you see is due to the content in the grid items not reaching 100% of the height.

https://i.sstatic.net/UHk4u.jpg

Additionally, there is a second element taking up space at the bottom.

<div class="ctrl">

You will need to make a decision regarding this element. You may want to consider using absolute positioning to take it out of the regular document flow so it does not affect the layout.

In the absence of this element (and potentially with the use of vertical-align), the video will fill the grid item completely.

(You might also want to explore the object-fit property for adjusting videos or images to fit their containers perfectly.)

https://i.sstatic.net/rKtw7.jpg

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

Storing css data for iPhone Facebook application

Currently, I am in the process of developing a webpage specifically for the iPhone Facebook app wall link. Interestingly, when attempting to apply the margin attribute to a div within the webpage, the margin doesn't seem to have any effect when clicki ...

iphonecss

What is the best way to place a child on top of a different parent in the stack?

There is a collection of figure tags, each with an expandable figcaption. Inside each figure, there is a clickable div that reveals the figcaption when clicked. However, the visible figcaption only overlaps the figure it belongs to and not others. Is there ...

jqueryhtmlcss

Drag near the bottom of a droppable DIV to scroll inside

Within a scrollable div, I have multiple draggable divs. However, when I drag them into another scrollable div (the droppable zone), only the page scrolls and not the droppable div itself. How can I make it so that only the droppable div scrolls while drag ...

javascriptjquerycssdrag-and-drop

Tips for ensuring Node.js waits for a response from a substantial request

When uploading a large number of files, the process can take several minutes. I am currently using a multi-part form to post the files and then waiting for a response from the POST request. However, I am facing issues with timeouts and re-posting of files ...

javascripthtmlnode.jsexpressmultipartform-data

Automate your functions using Javascript!

Hello, I have written a code snippet that triggers an action on mouse click. Initially, I created a function that scrolls the screen to a specific element upon clicking another element: (function($) { $.fn.goTo = function() { $('html, bo ...

javascriptjqueryhtmltwitter-bootstrapfunction

Understanding the expectations for REST responses in HTML, JSON, and XML

When sending an HTML response compared to JSON or XML for the same data, what is typically expected? For example, if I have an array of USER information, converting it to JSON or XML is straightforward. But when dealing with HTML, should I simply convert ...

htmljsonrestresponse

unable to locate public folder in express.js

I recently created a basic server using Node.js with Express, and configured the public folder to serve static files. Within my main index.js file, I included the following code: const express = require('express'); const app = express(); const h ...

javascriptcssnode.jsexpressfile

Achieving uniform row height in CSS Grid Layout

How do I ensure all footers with a green background have the same height, while also keeping the content height consistent? Current result: https://i.sstatic.net/SrgFq.png Desired output: https://i.sstatic.net/4cr25.png CodePen: https://codepen.io/yas ...

htmlcssflexboxcss-gridgrid-layout

Unable to submit form with Jquery

Having some trouble with my form submission using Jquery. The submit part of my code seems to be malfunctioning, and I can't pinpoint the issue. <?php if(!isset($_SESSION["useridentity"])){ die(header("Location:index.php")); } ...

javascriptphpjqueryhtml

What is the best way to incorporate a jQuery script to make an engaging slideshow on my website?

I've been trying to develop a slideshow similar to the one showcased on this website. First of all: I am using Kompozer. My website is not yet live as I am still in the process of putting it together on my computer. To give you an idea, here is the d ...

jqueryhtmlcss

Assigning arbitrary hidden form data from dropdown selection

Would like to assign Layers Value as one of the following: GFS Meteogram 3day std or WRF 20 Global Meteogram 3day Std depending on the option selected from the dropdown menu <div><select id="myselect" class="productViewerParameter" name=" ...

javascripthtml

If additional content has been included in the `div`, be sure to scroll all the way down to view it

I have a div that needs to automatically scroll to the bottom when new content is added. This is a common feature in chat applications where the user wants to see the latest messages without having to manually scroll down each time. How can I achieve this ...

javascripthtmlcss

Issues with Adaptive Headers

* { box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0; } html, body { font-size: 14px; } header { width: 100vw; height: 50px; background-color: #222; margin: 0 auto; padding: 0; display: flex; justify-content: ...

htmlcssflexbox

What is the best way to make sure images and text are properly aligned for different screen sizes

I'm a beginner with Bootstrap and could use some assistance. In my code, I have text and images divided into four columns with alignment set based on screen size using media queries in CSS. However, when resizing the window to tablet view (check Scre ...

htmlcsstwitter-bootstrapmobileresponsive

Transforming global CSS into CSS modules: A step-by-step guide

In my nextjs project, I am utilizing react-bootstrap and bootstrap which requires me to include the global css: // _app.js import 'bootstrap/dist/css/bootstrap.min.css'; The issue arises when loading a significant amount of unused css on every p ...

cssreactjswebpackbootstrap-4next.js

Tips on aligning a span element at the center of an image without losing its mouseover

<div class="pic"> <img src="image.jpg" height="250"/> <span class="text" style="display:none">text here</span> </div> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </scrip ...

javascriptjqueryhtmlcss

Adjusting table font dynamically using Angular and CSS

I am currently working on an Angular project and facing a challenge with setting the font size dynamically in a table. I have created a function to address this issue, which includes the following code snippet: $('.td').css({ 'font-size ...

cssangular

A guide to adjusting the width without affecting the td element

Currently, I am facing a challenge while coding in HTML. I am trying to create a table with a header (time range) that fits on a single line without affecting the width of the td elements. Below is the code snippet: <table style="border:1px solid #8c ...

htmlcss

I seem to be encountering an issue with the image tag while working with HTML code

I have been studying through freecodecamp.org and this is my first tribute project. Everything has been going well, but I am encountering an issue with the image tag. I need to submit my project online, so I have been trying to input image links from Googl ...

htmlcss

The display function in Javascript has a tendency to work sporadically

I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the gr ...

javascripthtmlcssfunction