0

While working on a grid I realised that setting margin: auto; for grid items drastically changes their behaviour.

I created a simple example to illustrate what happens.

Without setting any margin, width or height for grid items, each item appear of the same height and width, as I would expect.

Adding only margin: auto;, each grid item seems to behave like an inline element: the box takes the size of the content (plus the padding I added). But adding height: 100%; and width: 100%;, keeping the margin: auto; fixes it.

So, I'm not saying that this is wrong, I'm guessing it's the expected behaviour and I just don't understand it.

Can someone explain what's happening and possibly link to where it's documented?

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


.grid > div {
  border: 1px solid;
  padding: 1.5rem;
  
  /*
  margin: auto;
  height: 100%;
  width: 100%;
  */
}
<div class="grid">
  <div>1</div>
  <div><h1>text</h1></div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>
Carlo
  • 4,016
  • 7
  • 44
  • 65
  • 1
    Because that is exactly what auto does, doesnt it? auto adjusts accordingly to its content. Setting width and height would just mean that you have overriden the sizing auto have set. Have you seen this post? https://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property – Squish Nov 06 '20 at 16:40
  • Well, I know how `margin: auto;` works, but I think the situation I illustrated is different: If you have a block element and apply `margin: auto;` to it, the size of the elemenet doesn't change, it will still occupy all the horizontal space available – Carlo Nov 06 '20 at 17:05
  • did you read the duplicate fully or only the title? because the first duplicate explain very well why margin behave that why with grid item – Temani Afif Nov 07 '20 at 01:16
  • I've read it now. I missed it because the relevant part is not even in the accepted answer. I still think that it doesn't really answer my question, because it's simply stating the behavior, something that I did as well, but it doesn't say way. What's the technical reason for why this happens? Where is it documented? – Carlo Nov 07 '20 at 09:10

1 Answers1

0

Auto will no work on floated, inline and absolutte elements as seen in this article

As quoted directly from the site:

As mentioned before, auto will not work in floated, inline and absolute elements. All these elements already have decided on their layouts, so there is no use in using auto for the margins and expecting it to get centered just like that.

That will defeat the initial purpose of using something like float. Hence auto will have a value of 0px in those elements.

auto will also not work on a typical block element if it doesn’t have a width. All the examples I showed you so far have widths.

A width of value auto will have 0px margins. A block element’s width typically covers its container’s when it is auto or 100% and hence a margin auto will be computed to 0px in such a case.

Take a look at this post too.

Squish
  • 419
  • 4
  • 22
  • I didn't downvote you and I think the information you linked to is interesting, but they seem to contain inaccuracies and misleading information. An element with margin: auto; doesn't take the available space, it just puts margins of equal size if there is space available. Also you begin saying that "display: block; does not have a width" and that is not true. – Carlo Nov 06 '20 at 22:16