Menu
I'm working on a UI with css grid and have been seeing a slightly odd behaviour, namely that if I define a grid with:
grid-template-columns: 50px auto 50px
I'm not seeing that grid expand to 100% of the width of the container as shown in this image:
If I make the content in the auto area wider to the extend where it would force the grid to fill the space, the problem seems to go away. But my understanding and in all the examples i've seen suggests that this template should extend to 100% of the width of the viewport.
Am I missing something here? certainly feels like it, any thoughts?
609
auto-fit behavior: “make whatever columns you have fit into the available space. Expand them as much as you need to fit the row size. Empty columns must not occupy any space. Put that space to better use by expanding the filled (as in: filled with content/grid items) columns to fit the available row space.”
Set the following on the grid container: grid-template-columns: auto 1fr; This sets the width of the first column to equal the width of the widest item in that column, and the width of the second column to get the remaining width of the grid.
grid-template-columns: auto auto auto; You can use the keyword auto so that each column resizes itself automatically. grid-template-columns: 80px auto 1rem; You can mix the units.
Auto-fill: The auto-fill property fills the rows with as many columns as it can fit. The newly added column may be empty but it will still occupy a space in the given row. It is an important property in the CSS grid that make a responsive layout without writing a media query for each grid.
In your rule:
grid-template-columns: 50px auto 50px
The auto value sets the column width to the width of the content. auto means content-based.
So the total width of the columns ends up having no association with the width of the row.
50px + content width + 50px can be anything
If you want the columns to fill the width of the row, then use a fraction unit to tell the second column to consume all remaining space.
grid-template-columns: 50px 1fr 50px
More details here: Does CSS Grid have a flex-grow function?
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
