Confusion over CSS Grid columns `auto` property behavior

HTML-CSS
1

I’m confused by the auto property behavior in CSS Grid grid-template-columns. Here’s my code:

<div class="container">
  <div class="item">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci beatae odit ratione rerum! Sapiente, quis!</div>
  <div class="item">2 Testttttttt</div>
  <div class="item">3 Testttttttt</div>
</div> 

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.item {
  background-color: goldenrod;
  border: 1px solid #000;
}

If I set the columns to grid-template-columns: auto auto 1fr;, then the first 2 columns seem to be set to the width of their content while the last one takes up the remaining space (which is what I’d expect):

https://codepen.io/El_Escandalo/pen/pojOYxL

But if I set the columns to grid-template-columns: auto auto auto;, then I’m not clear exactly what is deciding the width of the columns? Are they dividing the available space after subtracting the total content width from the total width of the container?

https://codepen.io/El_Escandalo/pen/VwvGRgL

And just so I’m clear, auto can function differently depending on what? What determines whether auto will shrink to its content?

2

Well it looks for the content, yes but after that it looks for the other elements, if all of them is auto and have the same width content, they will share the remaining spaces evenly.

2 Likes
3

@Catalactics But what happens if they don’t have the same width content. I mean I 'm testing it and can see what’s happening but I’m not clear how it’s determining the width as they all seem to have a sorta “margin”. Is that space being divided by the remaining space?

4

From the testing i did on your pen, it seems like it still shares the same amount, but if the other one have a bigger width, it starts to invade part of the other one, and start to break-wrap

1 Like