When defining grid columns, you can specify their widths using various units and keywords. Here are some common options:
| Unit / Keyword | Meaning | When to Use | Example |
|---|---|---|---|
auto |
Column width adjusts to fit the content (shrink-to-fit), but can expand if extra space exists. | Use for sidebars, logos, or labels where width should depend on content length. | grid-template-columns: auto 1fr; |
fr |
Fractional unit: distributes remaining free space proportionally. | Flexible layouts where columns should grow/shrink together. | grid-template-columns: 1fr 2fr; |
% |
Percentage of the container width. | Exact proportional splits tied to container width. | grid-template-columns: 30% 70%; |
auto |
Column adjusts to fit its content (but can grow if space allows). | For “shrink-to-fit” elements like logos or labels. | grid-template-columns: auto 1fr; |
px / em / rem |
Fixed, absolute size columns. | Precise control (e.g., sidebar exactly 200px). | grid-template-columns: 200px 1fr; |
minmax(min, max) |
Track size stays between min and max values. | Responsive columns that grow/shrink within limits. | grid-template-columns: minmax(150px, 1fr) 2fr; |
fit-content() |
Content-based, but capped at a max width. | When content should shrink-wrap, but not exceed a limit. | grid-template-columns: fit-content(300px) 1fr; |
max-content |
Column as wide as its longest content item. | Rare, use for content-driven widths. | grid-template-columns: max-content 1fr; |
min-content |
Column shrinks to the narrowest size without overflow. | Advanced layouts where content should be as small as possible. | grid-template-columns: min-content 1fr; |
repeat() |
Shorthand to repeat column patterns. | Quickly define multiple similar columns. | grid-template-columns: repeat(3, 1fr); |