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

  • 相关阅读:
    sublime3快捷键汇总
    css3百叶窗轮播图效果
    分页特效
    百度评分标准
    兼容问题汇总
    随机彩票
    js 时间函数 及相关运算大全
    JS贪吃蛇游戏
    《Vim实用技巧》阅读笔记 --- 移动及跳转
    《深入理解Linux网络技术内幕》阅读笔记 --- 路由基本概念
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13527076.html
Copyright © 2011-2022 走看看