探讨CSS Grid Layout在原生客户端中运用
CSS Grid Layout是W3C规范中专门为Web布局提供的一个特性。CSS Grid Layout将改变传统的布局模式，他将让布局从一维布局变成了二维布局。简单的说，有了CSS Grid Layout之后，布局不再局限于单个维度了。这个时候你要实现类似九宫格，拼图之类的布局效果显得格外的容易。虽然CSS Grid Layout给Web布局带了革命性的变化，那么他在原生客户端（也就是APP）开发中，其运用是否也能像Web一样呢？接下来我们就一起来探讨。
CSS Grid Layout发展
CSS Grid Layout是微软于2010年提出的一个布局模块，最早在IE10实施。2011年4月首次公开W3C规范草案，2015年3月2日Chrome也开始支持这个模块。在2016年9月29日成为W3C候选标准。值得庆幸的是，2017年3月，Chrome和Firefox将开始默认支持Grid布局。其中，Mozilla将在3月7日发布的Firefox 52版本上开始支持。由于要先在Chrome Canary中支持Grid，所以，谷歌将在3月14号的Chrome 57版本上开始默认支持Grid.一旦在公开版本中默认得到了支持，那么当前在开发版本中的所有Grid功能都将在公开版本中出现。Grid时代就此开始。
CSS Grid Layout能得到众多现代主流浏览器的支持，需要特别感谢@Rachel Andrew和@Jen Simmonsg两位女士。她们不断的在完善CSS Grid Layout模块，并且向社区推广。特别是@Rachel Andrew，CSS Grid Layout能这么早进入Web开发者的世界中，她功不可没。
有关于CSS Grid Layout的支持情况，可以通过Caniuse.com查阅：
在我们大天朝，还需要考虑UC和QQ两大浏览器，据个人了解，在不久的版本，这两款也将支持CSS Grid Layout模块。虽然，CSS Grid Layout得到了众多浏览器的默认支持，但每个浏览器对模块中的所有属性支持力度略有偏差，不过一些常见的特性已经可以使用。
如果你从未接触过CSS Grid Layout，或者说想感受一下其强大的布局特性，建议你点击这里进行了解。因为这里有CSS Grid Layout的最全面教程。
客户端
前面说的都是CSS Grid Layout的发展，从而也得知他在现代浏览器中得到了一定程度的支持。但这篇文章并不是探讨其在浏览器的支持情况，主要想聊聊他在客户端布局中的发展以及使用情况。
首先要说明一下，这里的客户端指的是我们的移动端开发，常见的移动端开发有Native APP、Hybrid APP和H5（移动端Web页）。为了能更好的节约开发成本，现在有一些优秀的Web运用，只需要在一套程序上开发，就能支持三端（Android、iOS和H5）。最常见的有：
“一次构建，多处运行”，跨平台 APP 带着这股风潮把火烧到了前端，为开发者带来无尽的遐想。现有的流行跨平台框架有以下:
- 基于单 WebView 的开发框架。开发者可以使用现有的最新 web 技术，开发出单页面 web 应用。同时利用 JSBridge ，又能获取原生的 API ，从而使 web 应用具有了原生应用的功能。Cordova+IONIC 可以说是这个潮流的代表，也是跨平台 APP 的先锋。然而这类跨平台应用的缺点是不流畅，在安卓手机上体验较差。
- Hybrid方向。也就是原生应用配合 HTML5 技术，让 APP 具有了部分跨平台的功能。Hybrid 也是现在各大互联网企业采用较多的跨平台开发方式。这类 APP 在体验上优于单 WebView 的 APP ，并且能够极大提高开发效率。然而这种方式离“一次构建，多处运行”的设想还是有很大距离，毕竟依然需要针对不同的移动平台进行原生开发。
- 使用 JavaScript 开发纯原生应用。既然单 WebView 性能有缺憾，Hybrid 技术栈又比较高，那么 JavaScript 开发纯原生应用就孕育而生。这个方向的代表有ReactNative, Weex和我们今天的主角–NativeScript。
不过我们要讨论的不是这些运用程序怎么使用，只是借机探讨一下，这些运用对CSS Grid Layout模块支持力度。
布局
基本的概念是我们有不同的布局视图（Layout Views），也有人称之为布局容器（Layout Containers），容器里可以有一个或多个子容器。每个布局容器都有自己的逻辑，用于指定子容器在自身内部的布局方式。
常见的布局方式有：
Absolute Layout
<AbsoluteLayout>
<Button text="Left: 10, Top: 5" left="10" top="5" height="42" width="230" backgroundColor="#0099CC"></Button>
<Button text="Left: 15, Top: 50" left="15" top="50" height="190" width="160" backgroundColor="#C3C3E5"></Button>
<Button text="Left: 185, Top: 50" left="185" top="50" height="90" width="170" backgroundColor="#CCFFFF"></Button>
<Button text="Left: 70, Top: 200" left="70" top="200" height="50" width="230" backgroundColor="#8C489F"></Button>
</AbsoluteLayout>
Dock Layout
<DockLayout stretchLastChild="true">
<Button dock="left" text="left" style="background-color: #0099CC; margin: 5;"></Button>
<Button dock="right" text="right" style="background-color: #8C489F; margin: 5;"></Button>
<Button dock="bottom" text="bottom" style="background-color: #AA0078; margin: 5;"></Button>
<Button dock="top" text="top" style="background-color: #B3B3D7; margin: 5;"></Button>
<Button text="fill" style="background-color: #CCFFFF; margin: 5;"></Button>
</DockLayout>
Grid Layout
<GridLayout columns="*,*,*" rows="*,*,*,*,*" sdkExampleTitle sdkToggleNavButton>
<Button text="1" style="background-color: #0099CC; margin: 5;"></Button>
<Button text="2" col="1" style="background-color: #FFFF66; margin: 5;"></Button>
<Button text="3" col="2" rowSpan="2" style="background-color: #AA0078; margin: 5;"></Button>
<Button text="4" row="1" rowSpan="2" colSpan="2" style="background-color: #8C489F; margin: 5;"></Button>
<Button text="5" row="2" col="2" style="background-color: #CCFFFF; margin: 5;"></Button>
<Button text="6" row="3" colSpan="3" style="background-color: #0099CC; margin: 5;"></Button>
</GridLayout>
Stack Layout
<StackLayout orientation="horizontal">
<Button text="Button 1" backgroundColor="#0099CC" width="100" margin="2"></Button>
<Button text="Button 2" backgroundColor="#CCFFFF" width="100" margin="2"></Button>
<Button text="Button 3" backgroundColor="#8C489F" width="100" margin="2"></Button>
</StackLayout>
Wrap Layout
<WrapLayout>
<Button text="1" width="150" height="100" style="background-color: #0099CC; margin: 5;"></Button>
<Button text="2" width="100" height="150" style="background-color: #FFFF66; margin: 5;"></Button>
<Button text="3" width="200" height="120" style="background-color: #8C489F; margin: 5;"></Button>
<Button text="4" width="100" height="50" style="background-color: #CCFFFF; margin: 5;"></Button>
<Button text="5" width="250" height="100" style="background-color: #AA0078; margin: 5;"></Button>
</WrapLayout>
实际上，在使用的时候可以将多种布局结合起来，比如制作一个计算器，我们可以看看它用到的布局方式：
布局方式有多种，但在这里只来说说CSS Grid Layout布局。
首先来看Ionic，它里面也有Grid布局一说，但这里所说的Grid并不是原生的CSS Grid Layout模块。实际实现方法依旧是通过早期float的和12列网格规则计算出来的一种模拟网格。随着Flexbox的出现，采用flexbox替代浮动布局。从这种角度来说，可以使用CSS Grid Layout，但在构建出Android和iOS平台的布局时，就得看底层是否支持这样的转换。到目前为止还未看到相关的介绍。
另外就是来看ReactNative和WEEX两个运用程序。在他们各自的官网都说支持Grid布局。
但事实上，他们所说的Grid也是使用Flexbox来模拟的Grid布局：
<Grid>
<Col style={{ width: 40 }}> Fixed width </Col>
<Col> <Text> Fluid width </Text> </Col>
</Grid>
最后再来看NativeScript运用程序。在NativeScript中有一个布局方式Grid Layaout：
<GridLayout columns="*,*,*" rows="*,*,*,*,*" sdkExampleTitle sdkToggleNavButton>
<Button text="1" style="background-color: #0099CC; margin: 5;"></Button>
<Button text="2" col="1" style="background-color: #FFFF66; margin: 5;"></Button>
<Button text="3" col="2" rowSpan="2" style="background-color: #AA0078; margin: 5;"></Button>
<Button text="4" row="1" rowSpan="2" colSpan="2" style="background-color: #8C489F; margin: 5;"></Button>
<Button text="5" row="2" col="2" style="background-color: #CCFFFF; margin: 5;"></Button>
<Button text="6" row="3" colSpan="3" style="background-color: #0099CC; margin: 5;"></Button>
</GridLayout>
其采用的是CSS Grid Layout布局原理。到写这篇文章的时候，对行、列已经得到很好的支持。而且NativeScript是原生的JavaScript开发，言外之意，可以在原基础上对CSS Grid Layout功能特性进行扩展。
事实上，CSS Grid Layout功能特性非常的多，如果要把整个Web功能移植到Native布局中，应该会具有较大的工作量，成本也不会太低。但对于支持CSS Grid Layout下面的一些特性应该还是不难：
- grid-template-rows/grid-template-columns定义行和列
- grid-row/grid-column来指定网格项目位置
其实有上面这两个特性，你就能很好的实现一些网格布局，比如下面的计算器：
如果在底层能实现fr、repeat()等特性，那还可以自动化计算出网格的布局，而且灵活性也非常的强大。
相比之下，目前也就只有NativeScript支持真正的CSS Grid Layout模块，虽然也只支持部分特性。但对于APP中的一些布局也足够使用。特别是面对一些二维的九宫格布局，显得更为简便。
手淘可以采用Grid布局?
其实一直在思考，手淘首页可以采用Grid布局？
首先来说iOS，采用的是Safari浏览器内核，目前Safari10+开始对CSS Grid Layout模块支持；对于Android而言，采用的是UC的内核，据相关消息，UC在下一个版本将会对CSS Grid Layout支持。这样一来就H5而言，不久就可以尝试采用CSS Grid Layout来布局。
对于Native而言，如果Weex能像NativeScript一样从底层解决CSS Grid Layout的渲染，那么整个淘系的页面，使用Grid布局将不再只是梦想。或许，不久的某一天，你看到的手淘布局，很多都有可能采用了CSS Grid Layout模块中的特性来实现的。
总结
不管是Web布局，还是Native APP上的布局，在当今终端多样化的情况之下，布局都不是件易事。特别在一维布局环境之下，要实现二维布局（常说的九宫格布局）更不是易事。我相信，不久的将来，这一现象将会得到改变的，因为Web和Native两者之间的特性都是在不断的借鉴，不断的相互学习。像CSS Grid Layout这么优秀的Web布局特性，总有一天也会在Native中现实。只不过是时间的问题。让我们一起来期待他的到来吧。
大漠
如需转载，烦请注明出处：https://www.w3cplus.com/css/native-appt-layout-width-css-grid-layout.html