• 利用 css grid 页面常规布局


    Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

    Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。

    HTML

    <div class="grid-box">
      <div class="item header"></div>
      <div class="item header"></div>
      <div class="item header"></div>
      <div class="item sidebar"></div>
      <div class="item main"></div>
      <div class="item main"></div>
      <div class="item footer"></div>
      <div class="item footer"></div>
      <div class="item footer"></div>
    </div>
    

    CSS

    .grid-box {
      height: 100vh;
      display: grid;
      grid-template-columns: repeat(3, 33.3%);
      grid-template-rows:  100px 1fr 100px;
      grid-template-areas: 'header header header'
                           'sidebar main main'
                           'footer footer footer';
    }
    
    .item {
      background-color: aquamarine;
      border: 1px solid #eee;
      margin: 0 10px 20px 10px;
      margin-bottom: 20px;
      counter-increment: items;
      content: counter(items);
    }
    
    .header {
      grid-area: header;
    }
    
    .main {
      grid-area: main;
    }
    
    .sidebar {
      grid-area: sidebar;
    }
    
    .footer {
      grid-area: footer;
    }
    

      

  • 相关阅读:
    ZOJ 3349 Special Subsequence
    ZOJ 3684 Destroy
    ZOJ 3820 Building Fire Stations
    HDU 5291 Candy Distribution
    HDU 3639 Hawk-and-Chicken
    HDU 4780 Candy Factory
    HDU 4276 The Ghost Blows Light
    ZOJ 3556 How Many Sets I
    技术人员的眼界问题
    神经网络和深度学习
  • 原文地址:https://www.cnblogs.com/peter-web/p/15019278.html
Copyright © 2020-2023  润新知