zoukankan      html  css  js  c++  java
  • [Grid Layout] Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

    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)
                        );

  • 相关阅读:
    各种 SDk
    面试第一周
    KVC/KVO 的概述和使用
    How Many Tables HDU
    The Suspects POJ
    Wireless Network POJ
    Layout POJ
    The Shortest Path in Nya Graph HDU
    Extended Traffic LightOJ
    Tram POJ
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6636715.html
Copyright © 2011-2022 走看看