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

  • 相关阅读:
    CCF|学生排队|Java
    CCF|分蛋糕|Java
    CCF|公共钥匙盒|Java
    CCF|打酱油|Java
    CCF|游戏|Java
    CCF|最小差值|Java
    CCF|路径解析|Java
    CCF|碰撞的小球
    CCF|跳一跳
    Win10 1803更新UWP无法安装的解决办法|错误代码0x80073D0D
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6636715.html
Copyright © 2011-2022 走看看