The article discusses the behavior of different grid column setups in CSS, particularly focusing on two-column layouts using percentage and auto values. It illustrates how introducing a gap between columns can lead to layout issues, such as the grid busting outside its container when using 50% widths. The article emphasizes the importance of understanding intrinsic sizes, especially when using the auto keyword, noting that content size impacts grid behavior. Overall, it highlights the balance between flexibility and structure in CSS grid design.
If we apply some gap between the columns... the grid with grid-template-columns: 50% 50%; is busting outside of the container element... 50% + 16px + 50% which is wider than 100%.
The 'sturdiness' of setting a column that way can be desirable... If we wanted to prevent the 'blowout', we could account for the gap ourselves.
Another unusual situation can be with auto... The intrinsic size of the content inside that auto column.
If a column contains only an image that is 200px wide, the intrinsic size is 200px, and the auto column will be 200px. It's tricky though when the content is text.
Collection
[
|
...
]