Grid List

概述

网格列表是以行列式呈现的列表。

网格列表元素必须具有 .cm-grid-list 这个基础类名。

ul.cm-grid-list
	li > a
	li > a
	li > a

列数与列宽

默认两列

多列

可以通过指定列表项的宽度来实现对列数的控制。比如下面的 CSS 代码将列数设置为（最多）4 列，并确保每列最多可显示 6 个汉字。

#my-grid-list > li {
	width: 25%;
	min-width: 6em;
}

弹性

给列表添加 .cm-grid-list-flexible 类即可将其设置为 “弹性网格列表”。

弹性网格列表可以根据屏幕宽度自动调整列数（3～5 列）。

ul.cm-grid-list.cm-grid-list-flexible
	li > a
	li > a
	...

如果列表项中包含很长的文字，不希望每列太窄裁掉文字，可以给列表添加 .cm-grid-list-with-long-text 类。它可以让弹性网格列表在窄屏上显示 2 列。

ul.cm-grid-list.cm-grid-list-flexible.cm-grid-list-with-long-text
	li > a
	li > a
	...

被选中的列表项

给列表项（<li>）元素添加 .selected 类名，即可将其设置为被选中的状态。 

ul.cm-grid-list
	li > a @href="#"
	li.selected > a @href="#"
	li > a @href="#"
	li > a @href="#"

给列表项内的 <a> 元素添加 .selected 类，也可以将该列表项设置为被选中的状态。（以下代码的实际效果同上。）

ul.cm-grid-list
	li > a @href="#"
	li > a.selected @href="#"
	li > a @href="#"
	li > a @href="#"

用于表单

可用于组织表单中的单选框、复选框等。

form > ul.cm-grid-list
	li > label > input
	li > label > input
	li > label > input
<< 返回首页