产品页上的功能区，就是一些文字块，每行有两栏居中显示的内容，注意这两栏内容并没有占满每行的所有的空间，它们的左边还有右边会有大量的留白 ..

实现这块区域的样式，我打算用一下 Semantic UI 框架里的 Grid，也就是网格组件，这个组件可以实现很复杂的布局，也有很多样式变化 ..

先去添加这块内容的组织结构代码 .. 一个包装，加上 .ui.block.story .. 我叫它 block 类型的 story ...

它里面再添加一个包装，加上 .ui.stackable.centered.grid ，这些样式都是 Semantic UI 里的 Grid 组件提供的，表示使用一个居中的，在小尺寸设备上可以堆叠在一块儿显示的网格 .. centered 表示居中，stackable 表示可堆叠 ...

每栏内容可以放在一个包装里面，在这个包装上，添加一个 .six.wide.column .. six wide 表示这栏内容占用六个网格的宽度 .. Semantic UI 默认每行内容是 16 栏网格 ..

我们让每一栏占用六栏网格，也就是每一行只能显示两栏内容，因为 2 x 6 是 12 ，小于 16 ， 3 x 6 是 18，大于 16 ，所以每一行只能显示两栏内容 .. 占用的宽度是 12 栏网格，也就是每行还会余出来 4 个网格的空间 ..

因为我们在网格包装上用了 centered ，所以内容会居中在页面上显示，余出来的空间会平均分到内容的左右两边 ..

每栏内容里面，再添加一个包装 ... 上面加上 content ... 它里面是具体的内容，一个 h3 ，加上一个 header ,表示标题 .. 在这个内容文件上，可以找到标题内容 ... 复制一下 ... 粘贴过来 ..

标题的下面是描述 .. 一个 div 上面加上 description .. 把去复制一下对应的描述内容 ..

这就是一个功能区上的文字块 .... 这个区域一共有六个这样的内容 ，可以再去复制几份 ...

然后分别再去修改一下内容上的标题 .... 还有对应的描述 ..

完成以后，到浏览器上预览一下 ..

你会发现，每行只会显示两栏内容 ... 每行内容的左右两边都会余出来一些空间 ... 因为每行内容只占用 16 栏里的其中的 12 栏网格的宽度 ... 因为我们设置的是让每栏内容占用 6 个网格的宽度 ..