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.

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

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

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

Can you provide me with a variable that will give me the total size of the scrollbar?

How can I determine the maximum number of pixels scrolled on a webpage? I attempted using window.pageXOffset, but it only gives the current scrolled amount. I require the total size at all times. ...

javascripthtml

jQuery Ajax form submission encountering issues

I created a form dynamically with the help of jQuery. Here is the code: <form id="editorform" accept-charset="utf-8" method="post" name="editorform" action="menuupdate"> <div> <input id="updateItem" type="submit" value="Update"& ...

jqueryajaxhtmlspring-mvc

Troubleshooting: CSS Animation Not Showing up on Screen

When I was attempting to create a JavaScript game in HTML, I encountered a problem. Despite ensuring that the syntax was correct and conducting some research online, the animation refused to display. No matter how many times I tried, it just would not work ...

csscss-animationskeyframe

Angular 7 - Customize Mat-select-value color depending on a specific condition

One issue I am facing is changing the color of a selected value in a mat select based on a condition. This change should be visually apparent to the user. Although accessing mat-select-value from the styles is possible, implementing a condition using ng-cl ...

cssangularangular-material

How to dynamically change the class of an element that contains other elements using JavaScript and JQuery

I have created a blog archive with the following format: +Year +Month Title Here is a snippet of the code: <ul> <span class="toggle">+</span> <li class="year">$year <ul> <span ...

javascriptjqueryhtml

Submitting forms with Ajax in IE(8)

Sample Google form Related spreadsheet I modified the original code to create two custom forms: First created form Second created form Both forms are functional on most browsers except for IE(8). Any idea why? First form: <!DOCTYPE html> <h ...

javascriptjqueryhtmlajaxforms

In what way can I fill out my search fields using the criteria included in the URL?

In the process of developing an asp.net web application, I have implemented a code snippet to construct a section for search fields. This code builds URL parameters based on user input: <script type="text/javascript> $(document).ready(function(){ ...

javascriptjqueryhtmlasp.net

Is it possible to modify the underline color while using the transition property in CSS?

One of the challenges on my website is customizing the navigation bar to resemble the BBC navigation bar. I want to change the border bottom/underline color using transition elements. Can anyone provide guidance on modifying the code to achieve this look? ...

csscolorscss-transitionstransition

Customizing Bootstrap Modal's backdrop CSS for a specific element

Upon opening a bootstrap modal, the background takes on a darker shade as seen here. I am looking to apply a CSS class that mimics this shading effect to a specific element. I prefer not to use any JavaScript for this task as it is purely about styling wi ...

csstwitter-bootstrapbootstrap-modal

Creating a dynamic dropdown menu using JQuery that does not automatically submit the form when a value is

Upon selecting a background color from the dropdown menu, I am generating a dynamic dropdown for text colors. The Text Color dropdown is populated correctly based on the selection of Background Color. Although the functionality works as intended, I encoun ...

javascriptphpjqueryhtml

CSS to target every second visible tr element using the :nth-child(2n)

My table has a unique appearance (shown below) thanks to the application of CSS nth-child(2n). tr:nth-child(2n) {background-color: #f0f3f5;} I made some elements hidden on the vID, ID, and MO_Sub tr. <tr style="display:none"> The table's new ...

javascriptjqueryhtmlcss

Issues with click events in the navigation menu

How can I make my menu close when clicking on other parts of my website, instead of opening? I know that I should use a click event for this, but when I implemented a click event, my menu encountered 2 unwanted problems: 1- Whenever I clicked on a menu i ...

javascriptjqueryhtmlcssmenu

Conceal the PayPal Button

Currently, I'm facing a challenge where I need to dynamically show or hide a PayPal button based on the status of my switch. The issue is that once the PayPal button is displayed, it remains visible even if the switch is toggled back to credit card pa ...

htmlcssangulartypescriptpaypal

Is there a Joomla extension available that can display or conceal content upon clicking?

Looking to enhance my Joomla site by installing a plugin that allows me to toggle the visibility of content with a click, similar to how FAQ sections work on many websites. Question 1 (click here for the answer) { Details for question 1 go here } Questi ...

phpjavascripthtmlcssjoomla

Phonegap (cordova 1.6.0) integration with Facebook login is experiencing issues on Android

When using Cordova 1.6.0, I am encountering issues with alerts. The Cordova Facebook Connect plugin is failing on login! The Cordova Facebook Connect plugin is also failing on auth.status! Please assist me with resolving these problems. I have been fol ...

jqueryandroidhtmlcordova

Utilizing Google Chrome Developer Tools for JQuery console debugging

Just started using jQuery and was expecting to see [<li>my name</li>, in the Google Chrome console but got: [li, prevObject: r.fn.init(1)] 0 : li length : 1 prevObject : r.fn.init(1) proto : Object(0) <html> ...

jqueryhtmlcss

A pair of buttons each displaying a unique div block

I am facing an issue with my jQuery script. I want to be able to click on one of the previewed text associated with a button and then have the other one close automatically. The desired effect is for the text to slide down using slideDown() and disappear ...

javascriptjqueryhtmlcssshow-hide

Is there a way to prevent Chrome from highlighting text that matches the content of a `position: fixed` element?

I currently have a Toc element in my HTML with the property position: fixed. (This means it remains in place as you scroll) My goal is to prevent Chrome's Find Text feature from recognizing text within that Toc element. (Ideally using JavaScript) ...

javascripthtmlgoogle-chromefind

Menu bar placed atop a carousel

I am currently in the process of developing a website and I have encountered an issue with the navigation bar. I have a slider that I would like to appear below the navbar but the navbar is pushing it down instead. Ideally, I want the navbar to be transpar ...

htmlcssnavbarbootstrap-4

Executing two jQuery scripts simultaneously on one page

Struggling to use 2 jQuery objects simultaneously on the same page. Can't get them both working at once despite playing around with the code. I'm new to this, so any help would be greatly appreciated. The code in the head section looks like this ...

jqueryhtml