zoukankan      html  css  js  c++  java
  • [CSS] Use grid-template to make your CSS Grid declarations more readable

    In previous post: https://www.cnblogs.com/Answer1215/p/13527076.html

    Code:

    .banner {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: minmax(30vh, 1fr) minmax(30vh, 1fr);
        grid-gap: 1rem;
    }
    
    .promo:first-child {
        grid-column: 1 / 2;
        grid-row: span 2;
    }
    
    .promo:nth-child(2) {
        grid-column: 2 / 4;
    }

    To make it more readable:

    .banner {
        display: grid;
        /*grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: minmax(30vh, 1fr) minmax(30vh, 1fr);*/
        grid-template: "main second second" minmax(30vh, 1fr)
                       "main third fourth" minmax(30vh, 1fr) / 
                        2fr  1fr   1fr;
        grid-gap: 1rem;
    }
    
    .promo:first-child {
        /*grid-column: 1 / 2;
        grid-row: span 2;*/
        grid-area: main
    }
    
    .promo:nth-child(2) {
        grid-area: second;
    }

    The grid-template CSS property is a shorthand property for defining grid columnsrows, and areas.

    /* grid-template-rows / grid-template-columns values */
  • 相关阅读:
    expect
    grep
    Python函数
    Python的set
    Python字典
    Python循环
    Python条件判断
    Python列表
    Python字符串
    Python组织代码块的形式
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13554009.html
Copyright © 2011-2022 走看看