Spacing issues with inline-block elements when dealing with a large quantity of items

Question

Spacing issues with inline-block elements when dealing with a large quantity of items

Currently, I am tackling the JS/jQuery Project for The Odin Project and I am confident that my solution is working exceptionally well.

However, the issue I am facing is that when dealing with larger amounts of elements (around 40-45 in JSFiddle and 50-52 in my Chrome Browser per line), there seems to be a vertical gap between the elements on two consecutive rows. Initially, I tried setting vertical-align: top to eliminate these gaps, which did work up until the mentioned number of elements per row.

You can view the JSFiddle example here.

If you increase the number of elements per row in the JS file (to at least 50), you will observe the issue I am describing.

This behavior is not what I desire. My goal is to have a seamless grid without any gaps between the cells. Can anyone shed light on why vertical-align: top breaks?

Edit: Upon reflection, I believe the problem might be linked to the percentage-based width/height, as it also malfunctions with numbers below 40 due to complex fractions being the result of division.

javascript jquery html css

Answer 1

Answer №1

When it comes to inline boxes, they inherit inheritable properties from their block parent box. This means that your grids may be inheriting the line-height property of the .container element. If the .container overflows, the vertical-align: top; property may stop working. To avoid this issue, it is recommended to apply a line-height: 0; style to the parent element (.container).

Source: https://www.w3.org/TR/CSS2/visuren.html#inline-boxes

$(document).ready(function() {
    createGrid(48);
    $(".cell").mouseenter(function() {
        $(this).css("background-color", "green");
    });
    $(".cell").mouseleave(function() {
        $(this).css("background-color", "white");
    });
});

function createGrid(n) {
    var container = $(".container");
    container.empty();

    var sizeP = 100 / n;

    var cell = $('<div/>', {
        class: 'cell',
        style: 'width: ' + sizeP + '%; height: ' + sizeP + '%;'
    });

    for(i = 0; i < n*n; i++) {
        container.append(cell.clone());
    }
}

.container {
    border: 5px solid black;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    width: 800px;
    height: 800px;
    line-height:0;
}

.cell {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid black;
    vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<body>
  <div class="container"></div>
</body>

Answer 2

When it comes to inline boxes, they inherit inheritable properties from their block parent box. This means that your grids may be inheriting the line-height property of the .container element. If the .container overflows, the vertical-align: top; property may stop working. To avoid this issue, it is recommended to apply a line-height: 0; style to the parent element (.container).

Source: https://www.w3.org/TR/CSS2/visuren.html#inline-boxes

$(document).ready(function() {
    createGrid(48);
    $(".cell").mouseenter(function() {
        $(this).css("background-color", "green");
    });
    $(".cell").mouseleave(function() {
        $(this).css("background-color", "white");
    });
});

function createGrid(n) {
    var container = $(".container");
    container.empty();

    var sizeP = 100 / n;

    var cell = $('<div/>', {
        class: 'cell',
        style: 'width: ' + sizeP + '%; height: ' + sizeP + '%;'
    });

    for(i = 0; i < n*n; i++) {
        container.append(cell.clone());
    }
}

.container {
    border: 5px solid black;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    width: 800px;
    height: 800px;
    line-height:0;
}

.cell {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid black;
    vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<body>
  <div class="container"></div>
</body>

Spacing issues with inline-block elements when dealing with a large quantity of items

Answer №1

Similar questions

Is it possible to turn off the fallback color for bourbon radial gradients?

Implementing the Applet Param Tag using JavaScript or jQuery

Automotive Dealership API by Edmunds

Combining strings using the PHP preg_replace function

Is there a method to determine if localForage/indexedDb is currently handling data operations?

Ways to set the input=text field as read-only in JSP when receiving information from the backend

Guide to organizing the legend section into two columns within Apache Echarts

A vertical divider within an ion-item collection

The i18n feature in node.js seems to be malfunctioning as the setLocale function is not working properly. Regardless

Is there a way to avoid reaching the limit of 150 JSON calls per hour allowed by the Twitter API and prevent Twitter from dropping unnecessary cookies?

Obtaining an identification using JQuery for content that is constantly changing

How to troubleshoot Javascript code that fails to identify if a color is white

JavaScript error: "null or not an object" bug

`Issue with Firefox's rendering of HTML tables`

What is the best way for me to make sure the element overflows properly?

Display HTML content retrieved from a string saved in a React database

How to access the public folder in React from the server directory

JavaScript function is not identifiable

There appears to be a syntax error in the Values section of the .env file when using nodejs

I built a custom Angular application integrated with Firebase, and I'm looking for a way to allow every user to have their individual table for managing tasks