<p id="g32nn"></p>
    1. <acronym id="g32nn"><strong id="g32nn"></strong></acronym>
      <pre id="g32nn"></pre>

      <table id="g32nn"><option id="g32nn"></option></table>
          當前位置:首頁 > IT技術 > Web編程 > 正文

          前端CSS3布局display:grid用法
          2022-05-31 17:26:07

          前端CSS3布局display:flex用法

          1. 先附上代碼

          點擊查看代碼
          <!DOCTYPE html>
          <html>
          
            <head>
              <meta charset="utf-8">
              <title>display:flex</title>
              <style>
                .grid-box {
                  width: 100%;
                  background-color: lightseagreen;
                }
          
                .grid-box>div {
                  background-color: lightskyblue;
                  text-align: center;
                  border: 1px solid red;
                }
              </style>
            </head>
          
            <body>
              <div class="grid-box">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
              </div>
            </body>
          
          </html>
          
          

          效果圖

          image

          給grid-box加上display: grid

          點擊查看代碼
          .grid-box {
              width: 100%;
              background-color: lightseagreen;
              display: grid;
          }
          

          效果圖

          image

          可以看到并沒有什么變化,說明grid默認縱向排列

          2. 接下來詳解grid布局的幾個常用屬性

          • grid-template-columns
          • grid-template-rows
          • gap
          • grid-template-areas
          • justify-items
          • align-items

          1. grid-template-columns

          決定網格布局中的列數(和寬度)

          網格呈三列排列且每列120px

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              background-color: lightseagreen;
              display: grid;
              grid-template-columns: 120px 120px 120px;
          }
          

          效果圖

          image

          簡寫方式

          grid-template-columns: repeat(3, 120px)

          也可這樣設置

          grid-template-columns: 120px auto 120px

          兩邊的寬度為120px,中間的寬度自動填充

          效果圖

          image

          可用fr表示比例關系(fraction 的縮寫,意為"片段”)

          將寬度平均分成3等份

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              background-color: lightseagreen;
              display: grid;
              grid-template-columns: repeat(3, 1fr);
          }
          

          效果圖

          image

          將寬度分成3份,每份各占1 2 3

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              background-color: lightseagreen;
              display: grid;
              grid-template-columns: 1fr 2fr 3fr;
          }
          

          效果圖

          image

          單元格大小固定,但容器大小不確定,auto-fill屬性就會自動填充

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              background-color: lightseagreen;
              display: grid;
              grid-template-columns: repeat(auto-fill, 170px);
          }
          

          效果圖

          image

          minmax()函數產生一個長度范圍,接受兩個參數,分別為最小值和最大值

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              background-color: lightseagreen;
              display: grid;
              grid-template-columns: 1fr minmax(150px, 300px);
          }
          

          效果圖

          image

          第二列的最小寬度為150px,最大寬度為300px

          2. grid-template-rows

          規定網格布局中行的高度

          前三行每行高120px

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              background-color: lightseagreen;
              display: grid;
              grid-template-rows: 120px 120px 120px;
          }
          

          效果圖

          image

          簡寫方式

          grid-template-rows: repeat(3, 120px)

          也可這樣設置

          grid-template-rows: 120px auto 120px

          第一行高度為120px,第二行的高度自動,第三行的高度為120px

          效果圖

          image

          可用fr表示比例關系(fraction 的縮寫,意為"片段”)

          將前三行的高度設置為1fr 2fr 3fr

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              background-color: lightseagreen;
              display: grid;
              grid-template-rows: 1fr 2fr 3fr;
          }
          

          效果圖

          image

          minmax()函數產生一個長度范圍,接受兩個參數,分別為最小值和最大值

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              background-color: lightseagreen;
              display: grid;
              grid-template-rows: 80px minmax(150px, 300px) 120px;
          }
          

          效果圖

          image

          3. gap

          規定網格布局中行與列之間間隙的尺寸

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              background-color: lightseagreen;
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-template-rows: 1fr 2fr 3fr;
              gap: 1em;
          }
          

          效果圖

          image

          還可以這樣寫

          grid-gap: 1em 2em;

          1em是行之間的間隙,2em是列之間的間隙

          效果圖

          image

          4. grid-template-areas

          在網格布局中規定區域

          上代碼

          點擊查看代碼
          <!DOCTYPE html>
          <html>
          
            <head>
              <meta charset="utf-8">
              <title>display:flex</title>
              <style>
                .item1 {
                  grid-area: myArea1;
                }
          
                .item5 {
                  grid-area: myArea5;
                }
          
                .item8 {
                  grid-area: myArea8;
                }
          
                .grid-box {
                  width: 100%;
                  background-color: lightseagreen;
                  display: grid;
                  grid-template-areas:
                    'myArea1 myArea1 . . '
                    'myArea5 myArea8 . . '
                    'myArea5 myArea8 . . ';
                }
          
                .grid-box>div {
                  background-color: lightskyblue;
                  text-align: center;
                  border: 1px solid red;
                }
              </style>
            </head>
          
            <body>
              <div class="grid-box">
                <div class="item1">1</div>
                <div class="item2">2</div>
                <div class="item3">3</div>
                <div class="item4">4</div>
                <div class="item5">5</div>
                <div class="item6">6</div>
                <div class="item7">7</div>
                <div class="item8">8</div>
              </div>
            </body>
          
          </html>
          
          

          效果圖

          image

          myArea1 myArea1 . .表示4列,一個點表示1列

          item1占1行2列(第1行的第1列和第2列)

          item5占2行1列(第1列的第2行和第3行)

          item8占2行1列(第2列的第2行和第3行)

          4. justify-items

          縱軸上的對齊方式

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              height: 600px;
              background-color: lightseagreen;
              display: grid;
              grid-template-columns: repeat(3, 1fr);
          }
          

          效果圖

          image

          justify-items: flex-start;(默認值)

          效果圖

          image

          justify-items: center;

          效果圖

          image

          justify-items: flex-end;

          效果圖

          image

          4. align-items

          橫軸上的對齊方式

          上代碼

          點擊查看代碼
          .grid-box {
              width: 100%;
              height: 600px;
              background-color: lightseagreen;
              display: grid;
              grid-template-columns: repeat(3, 1fr);
          }
          

          效果圖

          image

          align-items: flex-start;(默認值)

          效果圖

          image

          align-items: center;

          效果圖

          image

          align-items: flex-end;

          效果圖

          image

          本文摘自 :https://www.cnblogs.com/

          97久久久久人妻精品专区_国产成人精品视频导航_国产色诱视频在线播放网站_97午夜理论电影影院
          <p id="g32nn"></p>
          1. <acronym id="g32nn"><strong id="g32nn"></strong></acronym>
            <pre id="g32nn"></pre>

            <table id="g32nn"><option id="g32nn"></option></table>