zoukankan      html  css  js  c++  java
  • css网格grid布局

    <template>
      <div>
        <div id="container">
          <div class="item item-1">1</div>
          <div class="item item-2">2</div>
          <div class="item item-3">3</div>
          <div class="item item-4">4</div>
          <div class="item item-5">5</div>
          <div class="item item-6">6</div>
          <div class="item item-7">7</div>
          <div class="item item-8">8</div>
          <div class="item item-9">9</div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: "a13"
      }
    </script>
    
    <style scoped>
      /*
      一、网格布局
        1、display
          * grid:块级网格布局
          * inline-grid:行级网格布局
        2、行和列
          * grid-template-columns:列单元格宽度
          * grid-template-rows:行单元格宽度
          例一:3列2行,多余单元格高度自适应
            grid-template-columns: 33% 33% 34%;
            grid-template-rows: 100px 100px;
          例二:单元格宽度300px,向左浮动。2行行高100px,多余高度自适应
            grid-template-columns: repeat(auto-fill, 300px);
            grid-template-rows: repeat(2, 100px);
          例三:单元格宽度1fr:(1fr+1fr+1fr)*100%
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px 100px;
          例四:第一个单元格300px,第二、三个单元格1fr:(1fr+1fr)*(100%-300px)
            grid-template-columns: 300px 1fr 1fr;
            grid-template-rows: 100px 100px;
          例五:当容器宽度大于300px*(1fr+1fr+1fr),第一、二、三个单元格宽度1fr:(1fr+1fr+1fr)*100%;否则,第一、二个单元格1fr:(1fr+1fr)*(100%-300px),第三个单元格300px
            grid-template-columns: 1fr 1fr minmax(300px, 1fr);
            grid-template-rows: 100px 100px;
          例六:第一、二个单元格300px,第三个单元格100%-2*300px
            grid-template-columns: 300px 300px auto;
            grid-template-rows: 100px 100px;
        3、间距
          * grid-row-gap:行间距
          * grid-column-gap:列间距
          * grid-gap:行间距 列间距(行列间距一致时,可省略只写一个)
        4、排列方向
          * grid-auto-flow:默认row
            row:行排列
            column:列排列
            row dense:行排列,并紧密填满
            column dense:列排列,并紧密填满
      */
      #container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px;
        grid-gap: 10px;
      }
    
      .item {
        font-size: 2em;
        text-align: center;
        border: 1px solid #e5e4e9;
      }
    
      .item-1 {
        background-color: #ef342a;
      }
    
      .item-2 {
        background-color: #f68f26;
      }
    
      .item-3 {
        background-color: #4ba946;
      }
    
      .item-4 {
        background-color: #0376c2;
      }
    
      .item-5 {
        background-color: #c077af;
      }
    
      .item-6 {
        background-color: #f8d29d;
      }
    
      .item-7 {
        background-color: #b5a87f;
      }
    
      .item-8 {
        background-color: #d0e4a9;
      }
    
      .item-9 {
        background-color: #4dc7ec;
      }
    </style>
  • 相关阅读:
    简单的模板解析函数
    HTML通过事件传递参数到js 二 event
    HTML通过事件传递参数到js一
    通过this获取当前点击选项相关数据
    LeetCode 20. 有效的括号(Valid Parentheses)
    LeetCode 459. 重复的子字符串(Repeated Substring Pattern)
    LeetCode 14. 最长公共前缀(Longest Common Prefix)
    LeetCode 168. Excel表列名称(Excel Sheet Column Title)
    LeetCode 171. Excel表列序号(Excel Sheet Column Number) 22
    LeetCode 665. 非递减数列(Non-decreasing Array)
  • 原文地址:https://www.cnblogs.com/linding/p/14838666.html
Copyright © 2011-2022 走看看