Login/Register
Baseline Alignment of Input and Labels in CSS Grid
Asked Answered
cssalignmentcss-gridbaseline
L

1

6

I'm trying to build a form using a CSS grid layout. Labels appear in the left column and inputs in the right. The align-items property is set to baseline. In Chrome, the text of the labels and inputs are vertically aligned on their baseline. But in Firefox v94, the labels sit higher than the text in the inputs.

Here's a minimal reproducible example of the problem:

<!DOCTYPE html>
<html>
<head>
  <style>
.login-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px 2px;
  align-items: baseline;
}

label, input {
  font-size: 3em;
}
  </style>
</head>
<body>

  <div class="login-grid">
    <label>username</label>
    <input type="text">
  </div>

</body>
</html>

This example is live on Codepen.

When I wrap the inputs up in a div, the text does align across columns. I'd prefer not to do that because the nesting affects sizing.

I've examined many of the other posts on alignment issues, but I've not found one relevant to CSS grid.

Lenalenard answered 18/11, 2021 at 12:0 Comment(1)
Today I was confronted with exactly this same issue. I could not find any solution elsewhere. Seems like a bug in Firefox, but I am shocked to see that it is already 2+ years old. In my case, the workaround by wrapping the inputs in a div is sufficient for my purposes. I have no clue why that "works". But thanks for the tip. – Octangle
H
-1

Firstly if you want to have a design as close as possible between different browsers I would recommend using a normalize css or a reset css.

Then working with font rendering is always a difficulty since the implementation of css property always differ a bit between browsers.

As you can see in the images below with a normalize and the same CSS code there is still differences between Chrome and Firefox :

Chrome add "gaps"

enter image description here enter image description here

But as an alternative you can with a normalize CSS and align-items: center get an identical result between Chrome and Firefox: enter image description here

Humphreys answered 29/12, 2021 at 13:53 Comment(2)
Your answer is about centered alignment. The question is about baseline alignment. Normalizing the CSS doesn't fix baseline alignment. – Lenalenard
You set align-items to center. If the font sizes or families are different, they are not aligned on their baseline. – Lenalenard

© 2022 - 2024 — McMap. All rights reserved.