鸿蒙入门指南，小白速来！从萌新到高手，怎样快速掌握鸿蒙开发？【课程入口】

目录：
1.Grid简介
2.使用Grid布局实现的效果
3.grid-row-gap和grid-colunm-gap属性
4.《鸿蒙的js开发模式》系列文章合集

1.目前鸿蒙css布局方案中,除了Flex布局 ，网格布局Grid可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。

容器里面的水平区域称为“行”，垂直区域称为“列”，行列重叠出来的空间组成单元格

划分网格的线，称为”网格线“

黄色的代表是列的网格线，绿色代表的是行的网格线。Grid和flex类似，布局的属性都是分为两类，一类定义在容器上，称为容器属性，一类定义在项目上，称为项目属性。

display属性
display:grid指定一个容器为网格布局，

<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 网格提供了fr关键字（fraction的缩写，意为“片段”），如果两列的宽度分别为1fr和2fr，就表示后者是前者的2倍

1.3 可以使用具体的像素单位。

2.使用Grid布局构建底部菜单栏和整体页面的分割控制，实现的效果如下:

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 业务逻辑js代码，数据构建

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;

}

这个是Grid布局构建底部菜单栏的具体实现，可以和Flex布局做个技术的对比。

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

grid-row-gap：设置行与行之间的间隔

grid-colunm-gap：设置列于列之间的间隔

grid-row-gap和grid-colunms-gap合并简写的话,格式为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;

}

设置间隔效果如下：

Grid布局和Flex布局在鸿蒙，PC，小程序都有非常广泛的应用，也是布局标准，入门的同学，可以选择从这里起步，能够够好的掌握鸿蒙的应用开发，然后在切入到鸿蒙的Java开发。

作者：六合李欣

想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com

鸿蒙的js开发部模式16：鸿蒙布局Grid网格布局的应用一的更多相关文章

1. CSS Grid网格布局全攻略

   CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

2. 【CSS】343- CSS Grid 网格布局入门

   CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

3. grid网格布局使用

   定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

4. CSS Grid 网格布局全解析

   介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

5. python之tkinter使用-Grid(网格)布局管理器

   # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

6. Grid 网格布局

   CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

7. CSS Grid 网格布局教程

   一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

8. CSS3中的display:grid网格布局介绍

   1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...

9. Android布局_网格布局GirdLayout

   自Android4.0版本后新增的GirdLayout网格布局(API 14) <?xml version="1.0" encoding="utf-8"? ...

10. TKinter布局之grid 网格布局

    1.由于我们的程序大多数都是矩形,因此特别适合于网格 布局,也就是 grid 布局. 2.使用 grid 布局的时候,我们使用 grid 函数,在里面指 定两个参数,用 row 表示行,用 colum ...

随机推荐

1. css 文本溢出显示省略号

   <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

2. sprintf 用法

   字符串格式化命令,主要功能是把格式化的数据写入某个字符串中 试试下面的代码就知道了 #include<cstdio> #include<cstdlib> using names ...

3. spoj 839 Optimal Marks（二进制位，最小割）

   [题目链接] http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=17875 [题意] 给定一个图,图的权定义为边的两端点相抑或值的 ...

4. 富文本 SpannableString Span

   经典使用场景 SpannableStringBuilder needStartSSB = new SpannableStringBuilder("需要"); SpannableSt ...

5. Java 简单的 socket 编程入门实战

   这个是给女朋友写的:) 首先需要知道我们每个电脑都可以成为server(服务器) 和 client(客户端) 我们需要使用java来实现客户端与服务器的数据传输 先帖上代码 注意这里两张代码处于两个j ...

6. Butterknife--Android Butterknife使用方法总结（转）

   原文链接:http://blog.csdn.net/donkor_/article/details/77879630 前言: ButterKnife是一个专注于Android系统的View注入框架,以 ...

7. Thread的其他属性方法

   from threading import Thread,currentThread,active_count import time def task(): print('%s is running ...

8. Py中enumerate方法【转载】

   转自:http://www.runoob.com/python/python-func-enumerate.html enumerate(sequence, [start=0]) sequence - ...

9. ubuntu下spark安装配置

   一.安装vmware虚拟机 二.在虚拟机上安装ubuntu12.04操作系统 三.安装jdk1.8.0_25 http://www.oracle.com/technetwork/java/javase ...

10. 编程填空：左边i位取反

    总时间限制: 1000ms 内存限制: 1024kB描述写出函数中缺失的部分,使得函数返回值为一个整数,该整数的左边i位是n的左边i位取反,其余位和n相同请使用[一行代码]补全bitManipulat ...