码迷,mamicode.com
首页 > 其他好文 > 详细

[Grid Layout] Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

时间:2017-03-28 20:43:29      阅读:173      评论:0      收藏:0      [点我收藏+]

标签: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-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

标签:max   https   src   ack   logs   out   strong   style   smr   

原文地址:http://www.cnblogs.com/Answer1215/p/6636715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!