Clearing blank spaces in css grid - a step-by-step guide

Can anyone help me remove these unwanted indentations in my grid layout without using JavaScript? I've tried using grid-auto-flow: column, but it's not working as expected. Here is a picture illustrating the issue, and here is what I am trying to achieve.

<nav class="header__submenu" id="header__submenu-resources" data-opened="1">
    <ul class="header__submenu-list" id="header__submenu-list-resources">
        <li class="header__submenu-item">
            <a href="#" class="header__submenu-link">
                Webinars
                <p class="header__submenu-description">Get to know Tines and our use cases, live and on-demand.</p>
            </a>
        </li>
        <!-- More list items here -->
    </ul>
</nav>

If you want to see the full code, please visit the CodePen link.

htmlcsscss-gridgrid-layout

Answer №1

Is this the solution you were looking for?

I made some modifications to the code below in order to get it working:

#header__submenu-item-block {
    grid-column: 4;
    grid-row: 1 / 3;
}

You can see the updated code in action by checking out the working sample here: https://codepen.io/shahilparichay/pen/LYdpJGX

If you're interested in learning more about CSS Grid, I recommend visiting this helpful resource: Here

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

Troubleshooting Owl Carousel: Is it a Shopify problem or a Javascript coding issue?

Having trouble with my owl carousel on Shopify. Can someone check my code for any errors? I followed the instructions but it's not working. Any advice? CSS Styles {{ 'owl.theme.css' | asset_url | stylesheet_tag }} {{ 'owl.carousel.cs ...

javascriptjquerycssshopifyowl-carousel

Tips for preserving HTML content in an XML file with Linq to XML

I have been experimenting with Linq to XML in order to save and retrieve HTML content between an XML file and a Windows Forms application. However, when the HTML is saved to the XML file, the tags get encoded and it doesn't retain its original form. ...

c#htmlxmllinq-to-xml

Deactivate the Submit button when the database field has been populated

My form includes a submit button. The Submit button should be disabled if the "price" for a specific product is already filled: PHP Code <?php $host="localhost"; $username="root"; $password=""; $db_name="ge"; $con=mysqli_connect("$h ...

javascriptphphtmlmysql

Retrieving information from an API and presenting it as a name with a link to the website

I am attempting to retrieve information from an API and present it in the format Name + clickable website link. Although I have managed to display the data, the link appears as text instead of a hyperlink. Here is my Ajax script: $(function() { ...

javascripthtmlajax

Unleashing the Power of Aurelia's HTML Attribute Binding

I need to bind the "required" html attribute in my template and model. Along with passing other information like the label value using label.bind="fieldLabel", I also want to pass whether the element is required or not. However, simply using required="tr ...

javascripthtmlaurelia

Looking to optimize iframing for various screen dimensions

Apologies for the basic question. I am looking for a way to make my iframe responsive on all screen sizes, adjusting both height and width accordingly. Could anyone provide guidance? The current iframe code I have is as follows: <iframe name="ROL_ ...

javascripthtmlcssiframe

The issue of Bootstrap 4 fixed position not working with inherited width

Exploring content and sidebar: .border { border: 1px solid black; } <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device- ...

csstwitter-bootstrapbootstrap-4

What is the process of adding a bootstrap element to an existing HTML document using JavaScript?

I need help adding a Bootstrap alert with JavaScript code into an already existing HTML file. Here is the code I attempted to use: <script> let field = document.getElementById("someID"); let text = document.write(" <div class="alert alert-da ...

javascripthtmlbootstrap-4

The max-height property is not applied to a border-box div with padding

One technique we use is the percentage trick on paddings to maintain aspect ratio in a div as the user scales their window. Here's an example: .div { background: red; width: 80%; margin: 0 auto 10px; -webkit-box-sizing: border-box; ...

css

What's the reason for the initial letter of the `textarea` and `input` not being displayed in red color?

Google Chrome 58.0.3029.110 (x64), Firefox 53.0.2 (x64), Linux Why is the first letter of the textarea element not appearing in red? The CSS selector textarea::first-line seems to work fine in Google Chrome, but it doesn't in Firefox. However, the t ...

htmlcss

a rare form of data presentation on a webpage

I came across this on a website. I'm curious if there's a specific tool for this or if it was customized. <!-- Name :: ABCD123 AnotherName :: ErrorArray :: ARRAY[2 * 120] [1] [0:ErrorCode]{ } [1:ArrayIndex]{ } ErrorArray2 :: ARRAY[3 ...

javascriptajaxjsonhtmlcss

JavaScript functions cannot be applied to input fields in jQuery

I am having trouble saving values into a database where I need to calculate the total and grand total. I want to do the calculation in the input field, but my attempts have not been successful. It seems like the issue lies with $('.multTotal',thi ...

jqueryhtml

What is the Best Way to Toggle the Visibility of Specific Buttons in a Table Using Jquery?

<html> <head> <script> $( "#clickMeButton" ).click(function() { $(this).next("#hiddenButton").slideToggle( "slow", function() { // Animation complete. }); }); </script> </head> <body> <table> <tr& ...

javascriptjqueryhtml

Exploring the effects of zooming on YouTube videos in Firefox

Strange phenomenon, but my website appears to be having display issues specifically on Firefox. Surprisingly, it looks perfectly fine on IE9, Safari, and Chrome. The layout of the site in Firefox seems to change when I zoom in or out, resulting in the You ...

htmlcssfirefoxyoutube

Prevent the div from being selected when it is behind the overlay

I am trying to display an overlay on top of a div. Once the overlay is displayed, I want to prevent any interaction with the background div. Unfortunately, when I double click on the overlay, the background div becomes selectable. Could someone please in ...

jquerycssoverlay

Can selectors be grouped together for easier organization?

Seeking to style all child elements like div, table, ul, dl, under a specific selector using LESS. It would be great if I could do something along these lines. .myclass { ... &.otherClass > (div, ul, dl, table) { // define some rules... ...

cssless

Is it feasible to verify for vacant dates with a single click?

Is there a way to determine if a date value is empty, and if it is, display a popup indicating so? After some research, I stumbled upon a similar issue where the date value was always filled with a default "mm/dd/yyyy" value. The solution provided involv ...

javascripthtml

Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes

I would like to be able to change the background image of a <div> when hovering over a link. Initially, the <div> should not have a background image when the page loads for the first time. This is my current setup: <div class="background"& ...

javascripthtmlcsshoverbackground-image

Make sure the text is always at the center and trim the sides, regardless of whether it is resized or viewed

Is it possible to automatically center text and crop the left/right sides when the viewport is resized smaller, ensuring it always stays centered on the screen even if it exceeds the size of the viewport? I'm considering using either CSS or jQuery / ...

javascriptjqueryhtmlcss

Display data in a Django HTML table

Working with django and fetching data from a website that is visible on pandas and console as shown in the image. How can I export this to the django HTML file? I am passing the variable 'morning_star' but unable to display it. view.py from dj ...

pythonhtmldjango