Unexpected CSS Grid behaviour

Question

I have a layout for the form, see attached code snippet. You can notice that output result is different from "layout" in grid-template-areas. For example, on the second row email and address1 should be split in the middle, in fact they are divided on 1/3 mark or so.

I also noticed that visual bug in the gaps, but I don't see anything wrong in the html part.

I'll welcome any ideas on what caused such issues in my grid.

.grid {
  margin: 20px;
  width: 200px;
  display: grid;
  grid-template-areas: 'firstName firstName firstName lastName lastName lastName shares shares'
  'email email email email address1 address1 address1 address1'
  'phone phone phone phone city city state zip';
  gap: 2px;
}

.f {
  grid-area: firstName;
}

.l {
  grid-area: lastName;
}

.s {
  grid-area: shares;
}

.e {
  grid-area: email;
}

.a {
  grid-area: address1;
}

.p {
  grid-area: phone;
}

.c {
  grid-area: city;
}

.st {
  grid-area: state;
}

.z {
  grid-area: zip;
}

<div class="grid">
  <input type="text" class="f">
  <input type="text" class="l">
  <input type="text" class="s">
  <input type="text" class="e">
  <input type="text" class="a">
  <input type="text" class="p">
  <input type="text" class="c">
  <input type="text" class="st">
  <input type="text" class="z">
</div>

first name is taking 3 columns while email is taking 4 so it's logical. Make both of them take the same number of columns (also add width:100% to all your inputs) — Temani Afif
– Temani Afif, Commented Nov 10, 2020 at 21:26
your columns don't match , remove the gap and set margin input {margin:1px;} instead and mismatch from columns won't show. — G-Cyrillus
– G-Cyrillus, Commented Nov 10, 2020 at 21:30
@TemaniAfif is there any rule for that? I haven't seen in docs, that columns must match. It was intentional by me to make the layout, where first row divided by 3 parts of same width, and second by 2. — flppv
– flppv, Commented Nov 10, 2020 at 21:32
well, no need to have a rule. Draw your grid and place the element and you will logically see they don't match. an element taking 3 columns cannot be equal to another taking 4. Maybe 8 columns isn't suitable for your case, find a better number where you can have same number of columns with a different division — Temani Afif
– Temani Afif, Commented Nov 10, 2020 at 21:35
Why don't you try to use grid-template-columns, instead of grid-template-areas? It could help you to redefine your grid. See here: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout — AbsoluteBeginner
– AbsoluteBeginner, Commented Nov 10, 2020 at 21:48

Temani Afif · Accepted Answer · 2020-11-10 22:00:00Z

1

You need to explicitely define column size or they will get an auto width based on the content. You also need to make your input full width of each area or they will also keep their default size:

.grid {
  margin: 20px;
  width: 200px;
  display: grid;
  grid-auto-columns:1fr; /* equal width columns */
  grid-template-areas: 
  'firstName firstName firstName lastName lastName lastName shares shares'
  'email email email email address1 address1 address1 address1'
  'phone phone phone phone city city state zip';
  gap: 2px;
}
input {
  width:100%;
  box-sizing: border-box
}
.f {
  grid-area: firstName;
}

.l {
  grid-area: lastName;
}

.s {
  grid-area: shares;
}

.e {
  grid-area: email;
}

.a {
  grid-area: address1;
}

.p {
  grid-area: phone;
}

.c {
  grid-area: city;
}

.st {
  grid-area: state;
}

.z {
  grid-area: zip;
}

<div class="grid">
  <input type="text" class="f">
  <input type="text" class="l">
  <input type="text" class="s">
  <input type="text" class="e">
  <input type="text" class="a">
  <input type="text" class="p">
  <input type="text" class="c">
  <input type="text" class="st">
  <input type="text" class="z">
</div>

answered Nov 10, 2020 at 22:00

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

flppv Over a year ago

Thanks! That's what I was looking for. And you can see now, that even with different cells sizes, it's still a grid :) I never knew about grid-auto-columns rule before.

Temani Afif Over a year ago

@flppv different size element but always same size columns ;)

flppv Over a year ago

Yeah, just like in my initial setup. always 8 columns. Thanks again, it was helpful! Just one little rule that redefined the whole layout!

Collectives™ on Stack Overflow

Unexpected CSS Grid behaviour

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related