网格系统

基本网格

<div class="ui grid"><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div>
</div>

网格将水平空间划分为不可分割的单元，称为“列”。网格中的所有列必须指定其宽度作为总宽度的比例。所有网格系统每行有任意列，Semantic 默认主题有 16 列.默认是one wide。可自己指定每一列站多少wide。当不给网格指定行时，行是“隐式的”，当前面没有更多的空间时，自动转换。

<div class="ui grid"><div class="four wide column"></div><div class="four wide column"></div><div class="four wide column"></div><div class="four wide column"></div>
</div>

当然也可以指定一个显示的行元素，行是列的水平分组，指定网格的列数。

<div class="ui four column grid"><div class="row"><div class="column"></div><div class="column"></div><div class="column"></div></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div>
</div>

自动列计数

如果你不知道你要设置几列，可以使用equal width可以自动划分列宽度。

<div class="ui equal width grid"><div class="column">1</div><div class="column">2</div><div class="column">3</div><div class="equal width row"><div class="column">4</div><div class="column">5</div></div>
</div>

分割

网格可以用分隔符分割，列与列之间有分割(divided)，行与行之间有分割(vertically divided)，单元分割(celled)，内部单元分割(internally celled)。

<div class="ui celled grid"><div class="two column row"><div class="column"><p>1</p></div><div class="column"><p>2</p></div></div><div class="three column row"><div class="column"><p>3</p></div><div class="column"><p>4</p></div><div class="column"><p>5</p></div></div>
</div>

这样就能使列栏均匀占满网格了。

可堆叠（Stackable）

可自动将行堆叠到移动设备上的列。

<div class="ui right aligned stackable grid"><div class="three column row"><div class="column green">1</div><div class="column orange">2</div><div class="column pink">3</div></div><div class="eight column row"><div class="column green">4</div><div class="column orange">5</div><div class="column pink">6</div><div class="column grey">7</div><div class="column green">8</div><div class="column orange">9</div><div class="column pink">10</div><div class="column grey">11</div></div>
</div>

居中

如果一行没有占满所设置的列数，可以使用centered这个变量来使列居中。

<div class="ui two column centered grid"><div class="column grey">0</div><div class="four column row"><div class="column green">1</div><div class="column orange">2</div></div>
</div>

浮动

列可以在每一行的左或者右对齐。left floated, right floated。

拉伸

行可以拉伸内容以占据整个列高度

<div class="ui three column divided grid"><div class="stretched row"><div class="column"><div class="ui segment">1</div></div><div class="column"><div class="ui segment">1</div><div class="ui segment">2</div></div><div class="column"><div class="ui segment">1</div><div class="ui segment">2</div><div class="ui segment">3</div></div></div>
</div>

内边距

padded，vertically padded，horizontally padded。

与React结合

semantic-ui-react
例如：

import { Menu, Item, Container, Image } from 'semantic-ui-react'
...export default class MenuExampleInverted extends Component {state = {}handleItemClick = (e, { name }) => this.setState({ activeItem: name })render() {const { activeItem } = this.statereturn (<Menu inverted attached><Container><Menu.Menu position="left"><Item><Image src={iconImg} style={{width: 100}} /></Item></Menu.Menu><Menu.Menu position="right"><Item as="a" name='index' active={activeItem === 'index'} onClick={this.handleItemClick}>首页</Item><Item as="a" name='getstart' active={activeItem === 'getstart'} onClick={this.handleItemClick}>新手入门</Item><Item as="a" name='login' active={activeItem === 'login'} onClick={this.handleItemClick}>登录</Item><Item as="a" name='register' active={activeItem === 'register'} onClick={this.handleItemClick}>注册</Item></Menu.Menu></Container></Menu>)}
}