zoukankan      html  css  js  c++  java
  • [Grid Layout] Describe a grid layout using named grid lines

    We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-template-columns and grid-template-rows, and how to refer to these from our grid items.

    Syntax like:

                grid-template-columns:
                [left-sidebar-start] 1fr
                [main-content-start] 2fr
                [right-sidebar-start] 1fr;

    We can name those whatever we want to.

    You can also give multi names for one line:

                grid-template-columns:
                [left-sidebar-start] 1fr
                [left-sidebar-end main-content-start] 2fr
                [main-content-end right-sidebar-start] 1fr
                [right-sidebar-end];

    And we also named the last columns name as 'right-sidebar-end'.

    Later we can contorl the position like this:

                grid-template-rows:
                    [body-start] 6fr
                    [body-end footer-start] 2fr
                    [footer-end];

    The same for the rows:

                grid-template-rows:
                    [body-start] 6fr
                    [body-end footer-start] 2fr
                    [footer-end];

    So for four column lines: 
    
    1 --> left-sidebar-start
    
    2 --> left-sidebar-end, main-content-start
    
    3 --> main-content-end, right-sidebar-start
    
    4 --> right-sidebar-end
    
    For three row lines:
    
    1 --> body-start
    
    2 --> body-end, footer-start
    
    3 --> footer-end

    For more information, check the article

  • 相关阅读:
    最大上升子序列
    vue的keep-alive组件
    对小程序的研究3
    对getBoundingClientRect属性的研究
    消除浮动的方式
    对微信小程序的研究2
    对小程序的研究1
    对props的研究
    对provide/inject的研究
    对calc()的研究
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6629411.html
Copyright © 2011-2022 走看看