Problem
There are times when items within a grid are sized similarly, leaving small gaps, and other times when the gaps are much larger. In instances where there are small gaps it would look better to fill them using the stretch keyword, but where the gaps are wide, it would look better to use an alignment keyword like start or center.
Proposal
One possible solution would be to add a snap function that holds an alignment keyword and a threshold. When the whitespace around the grid items is less than or equal to the threshold, then it renders as stretch instead of the keyword value.
.grid {
align-items: snap(start, 4rem);
}
Problem
There are times when items within a grid are sized similarly, leaving small gaps, and other times when the gaps are much larger. In instances where there are small gaps it would look better to fill them using the
stretchkeyword, but where the gaps are wide, it would look better to use an alignment keyword likestartorcenter.Proposal
One possible solution would be to add a
snapfunction that holds an alignment keyword and a threshold. When the whitespace around the grid items is less than or equal to the threshold, then it renders asstretchinstead of the keyword value.