Apart from the basic CSS units (px, em, rem, vh, vw...), these are the most commonly used units in CSS grid:
- fr: fraction of the available space.
- %: relative to the container.
- auto: size based on content.
- min-content / max-content: adjusts to the minimum or maximum content size.
- span: allows an element to span multiple rows or columns based on the specified number.
Example
In this example, we show a series of columns with each of these units, where we can visualize the behavior of each one.
12345678
<div class="container">
<div class="child">1fr</div>
<div class="child">20%</div>
<div class="child">auto</div>
<div class="child">min-content</div>
<div class="child">max-content</div>
<div class="child span">span</div>
</div>
123456789101112131415
.container {
border: 1px solid #2b7de0;
display: grid;
gap: 1rem;
grid-template-columns: 1fr 20% auto min-content max-content;
padding: 0.5rem;
}
.span {
grid-column: span 2;
}
.child {
padding: 1rem;
}