看到一个界面的设计，你脑子里应该可以想出，如果使用 html 表示的话，会用到什么样的结构 .. 你应该知道怎么样去组织 html 的标签 .. 这些标签之间的关系是什么，谁是谁的爸爸，谁跟谁是兄弟 .. 这些标签上面应该添加什么样的 css 类 ..

比如这个卡片组件 .. 首先应该有一个大的包装元素，包装单个卡片里的所有的内容 .. 在这个大包装里面应该有两个子元素 .. 一个里面应该放着图片，另一个里面放的是所有的文字内容 ..

先用编辑器打开我们的项目 ..

打开项目里的 app 下面的 index.html .. 先折叠一下之前我们添加的这些代码 ..

在这个英雄区的下面，可以是一组卡片 ..

先添加点布局用的结构 .. 一个 div，加上一个 ui.container .. 这个容器会有个固定的宽度，而且会响应窗口的宽度 .. 它还会居中的页面上显示 .. 这个 ui container 的样式是 semantic ui 这套样式框架提供的 .

然后我们可以再用一下 semantic ui 里的 grid 组件，去设计一下这组卡片组件的布局 ..

我想每排显示三栏内容，也就是三个卡片组件 ..

缩小窗口的尺寸，三栏要变成两栏 ... 继续缩小到一定程度，所有的卡片会堆叠到一块儿显示 ..

先添加一个 div ，上面加上 ui three column grid .. 使用一个三栏的网格 ..

每栏内容可以放在一个带 column 类的包装里面 .. 先在包装里添加一个数字 ，主要是想先去预览一下 .. 我需要六个这样的元素 .. 编辑器安装了 emmet 插件以后，你可以使用这样的缩写形式去写 html 的代码 ..

div.column{$}*6

你会发现，每排会显示三栏内容 ...

在这个包装元素的上面，可以再加上一个 doubling .. 再添加一个 stackable ..

两去预览一下 ..

现在每排内容在一定宽度的窗口上，会变成两栏内容 ... 继续再缩小窗口的尺寸 ... 最后这些内容会堆叠到一块儿 ...