zoukankan      html  css  js  c++  java
  • [CSS] Use CSS Grid to create an asymmetric promo grid

    In this lesson, we'll create an asymmetric promotional area where our promos get progressively smaller. We'll use CSS Grid to keep our HTML to 6 semantic lines to make this work. We'll create our asymmetry directly in our grid definition and not in our HTML by using a combination of grid-template-columns and the fr unit in CSS.

    .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;
    }
    
    // Non-grid Styles
    .promo {
        background-image: url(https://images.unsplash.com/photo-1587892873372-07cbf8ec46f3?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
        background-size: cover;
        background-color: lightgreen;
        background-blend-mode: overlay;
    
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    
        font-size: 2rem;
        padding: 1rem;
    
    }
    HTML SCSSResult
    EDIT ON
    <section class="banner">
        <a href="#" class="promo">This is a headline for a promo space</a>
        <a href="#" class="promo">This is a headline for a promo space</a>
        <a href="#" class="promo">This is a headline for a promo space </a>
        <a href="#" class="promo">This is a headline for a promo space</a>
    </section>
        
    
    
    
    Resources1×0.5×0.25×Rerun

  • 相关阅读:
    关于本博客
    洛谷P3387 【模板】缩点 题解
    spfa学习笔记
    Google Chrome Download
    Kosaraju算法学习
    fhq treap 学习笔记
    OIerChat
    python request.get(h.html),用xpath获取数据为空
    k8s 用ingress暴露集群环境中的服务。
    harbor push 报received unexpected HTTP status: 500 Internal Server Error
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13527076.html
Copyright © 2011-2022 走看看