[[383854]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

1.目前鴻蒙css布局方案中,除了Flex布局 ，網(wǎng)格布局Grid可以算得上是最強(qiáng)大的布局方案了。它可以將網(wǎng)頁分為一個(gè)個(gè)網(wǎng)格，然后利用這些網(wǎng)格組合做出各種各樣的布局。

容器里面的水平區(qū)域稱為“行”，垂直區(qū)域稱為“列”，行列重疊出來的空間組成單元格

劃分網(wǎng)格的線，稱為”網(wǎng)格線“

黃色的代表是列的網(wǎng)格線，綠色代表的是行的網(wǎng)格線。Grid和flex類似，布局的屬性都是分為兩類，一類定義在容器上，稱為容器屬性，一類定義在項(xiàng)目上，稱為項(xiàng)目屬性。

display屬性

display:grid指定一個(gè)容器為網(wǎng)格布局，

<div class="container"> 
   <div  class="item"> 
   </div> 
    <div  class="item"> 
    </div> 
    <div  class="item"> 
    </div> 
 
    <div  class="item"> 
    </div> 
    <div  class="item"> 
    </div> 
    <div  class="item"> 
    </div> 
</div> 

.container { 
    width: 100%; 
    display: grid;  /**采用grid布局**/ 
    background-color: palevioletred; 
   /** grid-template-columns: 100px  200px  300px; 
    grid-template-rows: 200px  200px;**/ 
    grid-template-columns: 1fr  1fr  1fr; 
    grid-template-rows: 200px  300px ; 
} 
.item 
{ 
    border: 5px  solid   white; 
    width: 100%; 
    height: 100%; 
 
} 

布局效果如下：

特別注意

grid-template-columns和 grid-template-rows

grid-template-columns：用來指定行的寬度

grid-template-rows：用來指定行的高度

1.1也可以使用百分比來表示

1.2 網(wǎng)格提供了fr關(guān)鍵字（fraction的縮寫，意為“片段”），如果兩列的寬度分別為1fr和2fr，就表示后者是前者的2倍

1.3 可以使用具體的像素單位。

2.使用Grid布局構(gòu)建底部菜單欄和整體頁面的分割控制，實(shí)現(xiàn)的效果如下:

2.1頁面視圖部分代碼：

<div class="container"> 
    <div  class="contentview"> 
 
    </div> 
    <div class="bottomview"> 
       <block  for="{{menus}}"> 
          <div  class="box"> 
              <div  class="boximg"> 
                 <image   class="topimg" src="{{$item.path}}"></image> 
              </div> 
              <div class="boxtxt"> 
                  <text>{{$item.name}}</text> 
              </div> 
           
          </div> 
        
       </block> 
    </div> 
</div> 

2.2 業(yè)務(wù)邏輯js代碼，數(shù)據(jù)構(gòu)建

export default { 
    data: { 
        title: 'World', 
        menus:[{"name":"首頁","path":"common/fs.png"},{"name":"分類","path":"common/cs.png"}, 
               {"name":"旅游","path":"common/ls.png"},{"name":"我的","path":"common/ms.png"}] 
    } 
} 

2.3 css采用 Grid布局，

.container { 
    width: 100%; 
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: 88%  12%; 
} 
.contentview{ 
    width: 100%; 
    height: 100%; 
    border: 5px  solid  powderblue; 
} 
.bottomview{ 
    width: 100%; 
    height: 100%; 
    border: 5px  solid  cadetblue; 
    display: grid; 
    grid-template-columns: 1fr  1fr 1fr 1fr; 
    grid-template-rows: 100%; 
} 
.box{ 
    width: 100%; 
    height: 100%; 
    border: 8px  solid  green; 
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: 70%  30%; 
 
} 
.boximg{ 
    width: 80%; 
    height: 100%; 
   /** border:2px  solid  red;**/ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
.boxtxt{ 
    width: 100%; 
    height: 100%; 
   /** border:2px  solid  blue;**/ 
    display: flex; 
    justify-content: center; 
} 
.topimg{ 
    width: 65px; 
    height: 65px; 
 
} 

這個(gè)是Grid布局構(gòu)建底部菜單欄的具體實(shí)現(xiàn)，可以和Flex布局做個(gè)技術(shù)的對(duì)比。

3.grid-row-gap和grid-colunm-gap屬性

grid-row-gap：設(shè)置行與行之間的間隔

grid-colunm-gap：設(shè)置列于列之間的間隔

grid-row-gap和grid-colunms-gap合并簡(jiǎn)寫的話,格式為grid-gap

<div class="container"> 
    <div class="item1"> 
        <text>1</text> 
    </div> 
    <div class="item1"> 
        <text>2</text> 
    </div> 
    <div class="item1"> 
        <text>3</text> 
    </div> 
    <div class="item1"> 
        <text>4</text> 
    </div> 
    <div class="item1"> 
        <text>5</text> 
    </div> 
    <div class="item1"> 
        <text>6</text> 
    </div> 
</div> 

.container { 
    width:100%; 
    background-color: #f3f3f3; 
    display: grid; 
    grid-template-columns: 33% 33% 33%; 
    grid-template-rows: 200px 300px ; 
    grid-columns-gap: 20px; 
    grid-rows-gap: 20px; 
} 
.item1{ 
 
    width: 100%; 
    height: 100%; 
    border:1px solid #fff; 
    color:#fff; 
    font-weight: bold; 
    background-color: powderblue; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
 
 
} 

設(shè)置間隔效果如下：

Grid布局和Flex布局在鴻蒙，PC，小程序都有非常廣泛的應(yīng)用，也是布局標(biāo)準(zhǔn)，入門的同學(xué)，可以選擇從這里起步，能夠夠好的掌握鴻蒙的應(yīng)用開發(fā)，然后在切入到鴻蒙的Java開發(fā)。

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com