What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situation; auto-filland auto-fit. We’ll explore what each one does and why we would need to use them on our grid-tracks.
For example, we have current solution:
grid-template-columns: repeat( 3, /*each row has 3 repeat items*/ minmax(10px, auto) minmax(20px, auto) minmax(40px, auto) minmax(80px, auto) );
We tell it to repeat 3 times for a row.
But what if we don‘t want to hardcoded ‘3‘. We want to dynamic change according to viewport.
We can use ‘auto-fill‘ for that:
grid-template-columns: repeat( auto-fill, /*each row has 3 repeat items*/ minmax(50px, auto) minmax(70px, auto) minmax(90px, auto) minmax(110px, auto) );
We if we don‘t have enough box to fill the whole space. We can use ‘auto-fit‘:
grid-template-columns:
repeat(
auto-fit,
minmax(50px, auto)
minmax(70px, auto)
minmax(90px, auto)
);
[Grid Layout] Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def
原文：http://www.cnblogs.com/Answer1215/p/6636715.html