CSS Grid inconsistent formatting when a top level item is not a div

Question

what is the reason that a CSS Grid layout is rendered differently when a top level child item is an input rather than a div? and how could I resolve this so that they are rendered consistently?

CSS:

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: auto;
  grid-auto-flow: column;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  margin-bottom: 1rem;
}

.container > * {
  border: 2px dashed blue;
}

.item-1 {
  grid-row: 1;
  grid-column: 1 / span 5;
}

.item-2 {
  grid-row: 1;
  grid-column: 6;
}

.item-3 {
  grid-row: 1;
  grid-column: 7 / span 4;
}

.item-4 {
  grid-row: 1;
  grid-column: 11 / span 1;
}

CSS Grid with divs as children:

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
</div>

CSS Grid with one child instead as an input:

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <input type="text" class="item-3" value="item 3" />
  <div class="item-4">Item 4</div>
</div>

https://stackoverflow.com/q/42421361/3597276 – Michael Benjamin Jan 27 '21 at 16:51 — Michael Benjamin, Jan 27 '21 at 16:51

Temani Afif · Accepted Answer · 2021-01-27T12:41:18.377

Always define the size explicitely otherwise the auto size will do the job and an input is not the same as a div

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr; /* the size of 1 column */
  grid-auto-flow: column;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  margin-bottom: 1rem;
}

.container>* {
  border: 2px dashed blue;
}

.item-1 {
  grid-column: 1 / span 5;
}

.item-2 {
  grid-column: 6;
}

.item-3 {
  grid-column: 7 / span 4;
}

.item-4 {
  grid-column: 11 / span 1;
}

CSS Grid with divs as children:

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
</div>
CSS Grid with one child instead as an input:

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <input type="text" class="item-3" value="item 3" />
  <div class="item-4">Item 4</div>
</div>

Oh, great catch, thanks for the explanation, @Temani Afif, I did not realise I had overlooked that — Nicholas Murray, Jan 27 '21 at 13:50

CSS Grid inconsistent formatting when a top level item is not a div

1 Answers1