I am having an issue with my CSS grid layout not completely filling its container in Chrome. What is causing this slight loss of pixel?

Has anyone encountered a formatting issue where the paragraph displays at 980px on Firefox but 979.94px on Chrome? Any suggestions on how to resolve this inconsistency?

For reference, you can view the codepen example here: https://codepen.io/isaacsgraphic/pen/jOVrrMO

body {
  width: 980px;
  background: #99c;
  margin: 0 auto;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  background: white;
}

.content-wrap {
  grid-column: span 12;
  width: 100%
}
<div class="row">
  <div class="content-wrap">
    <p>Example paragraph which is 979.94px, not 980 like the row it's within</p>
  </div>
</div>

To see how this issue impacts column layout specifically in Chrome, check out this longer example: https://codepen.io/isaacsgraphic/pen/yLVJGqp

htmlcssgoogle-chromecss-grid

Answer №1

It appears that there is a rounding error specific to Chrome causing layout issues. This problem arises when using layouts with recurring number sub-pixel fractions for column widths, such as 3 or 12 column layouts with a width of 980px. On the other hand, column numbers like 5 or 10 work smoothly due to easy division of the width. Similarly, grid-column-gap values that do not divide neatly can also lead to the same issue.

To resolve this, ensure that the layout pixel width divides evenly into 12 (6 and 3 are acceptable as well since Chrome handles decimals up to two places).

body {
  width: 984px;
  background: #99c;
  margin: 0 auto;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 18px;
  background: white; 
}

.content-wrap {
  grid-column: span 12;
  width: 100%
}
<div class="row">
  <div class="content-wrap">
    <p>Example paragraph that fits the full width of the row it is in.</p>
  </div>
</div>

Answer №2

Perhaps the variation in fonts across various browsers could be the reason for this discrepancy?

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

Why is there a thin line still visible on the other sides when a transparent background is used, but only on mobile devices, with a curved border on one side?

Recently, I've delved into the world of creating CSS art and stumbled upon a peculiar issue with CSS borders that has left me puzzled. When I apply a border to only one side of an element with a transparent background and rounded edges, I notice a fa ...

css

Leveraging the power of HTML validation while silencing the constant flood of messages

I want to keep the HTML validation in place but disable only the error message that prompts users to fill out required fields. Users should still not be able to submit the form without filling in a text field, but I don't want the standard "Please fil ...

htmlvalidation

Calculating the Quantity of Checked Boxes and Verifying them All

When retrieving values from my Database, there are instances where I need to check multiple rows for deletion or update. It's important to keep track of how many rows have been selected. What I am looking for is: -- The number of selected checkboxes ...

phphtmlcheckbox

Steps for selecting a menubar option on a website?

I'm trying to automate clicking a menu on a website using VBA. Sub SearchBot() Dim ie As Object Dim HTMLDoc As MSHTML.HTMLDocument Dim ckt_No As String ckt_No = Range("A2").Value Set ie = CreateObject("InternetE ...

htmlexcelvbaweb-scrapinggetelementbyid

The jQuery find and replace feature is causing my entire content to be replaced instead of just specific paragraphs

Within this section, there are multiple paragraphs and an input field. The concept is simple: the user inputs text into the box, then hits "ENTER" to trigger a jquery function below. The process involves identifying matches between the paragraph content a ...

javascriptjqueryhtmlcss

Why are columns in Bootstrap 4 Grid not floating?

I have experience with BS 3 but am new to BS 4 and flex; I am having trouble understanding it. I have set up the grid as per the documentation, but the second column is displaying below the first instead of beside it. I have tried adjusting display proper ...

htmlbootstrap-4

PHP implementation for a static header layout

I am interested in learning how to update content without refreshing the header. I have created a simple example below. Header.php <html> <head> </head> <body> <ul> <li><a href="index.php" ...

javascriptphpjqueryhtml

Ad blockers are causing this CSS class to be hidden

While most ad blockers do not have any issues with this specific class, some may hide the entire anchor block causing visitors to report missing text on the page. The class is used for hotlinked text that sends a tweet, as shown in the example below: < ...

csstwitteradblock

Detecting text overflow with ellipsis in HTML

I am facing an issue with certain elements on my webpage that have the CSS properties white-space, overflow, and text-overflow set in a way that causes text overflow to be trimmed with an ellipsis. div { white-space: nowrap; text-overflow: ellipsis; ...

javascripthtmlcssoverflowellipsis

Utilizing Selenium for the Upload of an APK Document

I've encountered an issue during my test. I'm attempting to upload an APK file, but the process seems to halt at that stage. My attempts with simple sendKeys using the file path and an AutoIT script have both proven unsuccessful. Below is my in ...

javahtmlangularjsseleniumautomated-tests

Tips on resizing an image right before saving it to a folder in order to ensure it has a consistent height within a Bootstrap 4 card while using Flask

I am working with Bootstrap 4 cards and facing an issue with variable-sized images when using card-img-top to make them responsive. The images are inputted using AJAX to the backend, and I need to reduce their size (height and width) for better responsiven ...

pythoncssbootstrap-4

Display exclusively the chosen option from the dropdown menu

I am facing an issue with the select input on my webpage. Whenever I try to print the page, it prints all the options of the select instead of just the one that is selected. Can someone please guide me on how to modify it so that only the selected option ...

javascripthtml

Reorganize HTML table rows based on the last row within a rowspan

I would like to organize the data in the table below according to the values in the last row of a rowspan. https://i.sstatic.net/R9OBF.png Looking at the image, I am aiming to sort the table based on the "Cumulative hours" value. Here, I have implemented ...

javascriptjqueryhtml

Clicking on the button will result in the addition of new

Having some trouble with jQuery as I try to dynamically add and remove HTML elements (on click of +) while also making sure each element has a unique name and ID like "name_1", "name_2"... Unfortunately, things aren't quite going as planned. Below i ...

javascriptjqueryhtml

Applying dynamic CSS changes to HTML content using JavaScript

Here's the scenario: I am working with a select element in my HTML code, which includes many options. One of these options is "Other." What I aim to achieve is to display an input element right below the select element when I choose "Other," without ...

javascripthtmldynamichtml-select

Event Listener for Spelling Quiz Buttons: Check Correct and Incorrect Answers

I am currently in the process of developing a spelling quiz for a project website using HTML, CSS, and JavaScript. The idea is to present the user with a word that has two missing letters indicated by underscores. The user then selects the correct answer ...

javascripthtmlfunctionbuttonaddeventlistener

Ways to personalize an image within a table cell using HTML

I need some advice on adjusting the size of an image that I have inserted into a cell of a table on my html page. Can someone please guide me on how to do this? Thank you! ...

phphtmlcsshtml-table

What is the best way to transform the HTML retrieved from an AJAX GET request into an object using JQuery?

$.ajax({ method:"get", url:"/wall", data:"ajax=1", beforeSend:function(){}, success:function(html){ $("#grid_mason").append(html); //Inserting additional co ...

javascriptjqueryhtmlcsstemplates

Change the CSS of a table row when a link is in focus

Is there a way to style a <tr> element when an <a> tag inside of it is focused? Below is the HTML for the table: <table> <tr> <td> <a href"#" tabindex="1" accesskey="e">edit</a> &l ...

javascripthtmlcss

Is it possible to dynamically change the background image using ReactJS?

I attempted to dynamically change the background image style for the div below: Below is my code snippet for implementation: render: function() { var divImage = { backgroundImage : "url(" + this.state.song.imgSrc + "),url(" + this.state.nextImgSrc ...

cssreactjs