标签:max https src ack logs out strong style smr
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-fill
and 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
标签:max https src ack logs out strong style smr
原文地址:http://www.cnblogs.com/Answer1215/p/6636715.html