Hongmeng introductory guide, Xiaobai, come quickly! From Mengxin to expert, how to quickly master Hongmeng development? [course entrance]

catalog:
1.Grid introduction
2. Effect achieved by using Grid layout
3. Grid row gap and grid Columb gap attributes
4. Collection of articles on Hongmeng's js development model

1. In the current Hongmeng css layout scheme, in addition to Flex layout, Grid layout Grid can be regarded as the most powerful layout scheme. It can divide the web page into grids, and then use these grids to make a variety of layouts.

The horizontal area in the container is called "row", the vertical area is called "column", and the space overlapped by rows and columns forms cells

Gridding lines are called "gridlines"“

Yellow represents the grid lines of columns and green represents the grid lines of rows. Grid is similar to flex. Layout attributes are divided into two categories. One is defined on the container, which is called container attribute, and the other is defined on the project, which is called project attribute.

display attribute
display:grid specifies a container as the grid layout,

<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 layout is adopted**/
    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%;

}

The layout effect is as follows:

Particular attention

Grid template columns and grid template rows
Grid template columns: used to specify the width of rows

Grid template rows: used to specify the height of rows

1.1 it can also be expressed as a percentage

1.2 the grid provides the fr keyword (abbreviation of fraction, meaning "fragment"). If the width of the two columns is 1fr and 2fr respectively, it means that the latter is twice that of the former

1.3 specific pixel units can be used.

2. Use the Grid layout to build the segmentation control of the bottom menu bar and the overall page. The effects are as follows:

2.1 code of page view part:

<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 business logic, js code, data construction

export default {
    data: {
        title: 'World',
        menus:[{"name":"home page","path":"common/fs.png"},{"name":"classification","path":"common/cs.png"},
               {"name":"Travel","path":"common/ls.png"},{"name":"my","path":"common/ms.png"}]
    }
}

2.3 css adopts Grid layout,

.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;

}

This is the specific implementation of the menu bar at the bottom of Grid layout construction, which can be compared with Flex layout.

3. Grid row gap and grid Columb gap attributes

Grid row gap: set the interval between rows

Grid colony gap: sets the interval between columns

If grid row gap and grid columbs gap are combined and abbreviated, the format is 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;


}

The effect of setting interval is as follows:

Grid layout and Flex layout are widely used in Hongmeng, PC and applet. They are also layout standards. Beginners can choose to start here, master Hongmeng's application development well, and then cut into Hongmeng's Java development.

Author: Liuhe Li Xin
For more information, please visit: Hongmeng technology community jointly built by 51CTO and Huawei's official strategic cooperation https://harmonyos.51cto.com