How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Grid

You can create your layout with Zero-UI's grid system.

The grid system contains a set of rows and columns. It divides the horizontal space into 12 columns.

Example

Put acolumninside arow.

Your content should be in thecolumn内。

Use.z-col-xto control the column's width.

Use.z-offset-xto control the column's offset to the left.

z-col-4
z-col-4
z-col-4
z-col-4
z-col-8
z-col-2
z-col-7
z-col-3
z-col-6 z-offset-4
z-col-4 z-offset-2
z-col-4 z-offset-2

	<div class="z-row">
		<div class="z-col-4">z-col-4</div>
		<div class="z-col-4">z-col-4</div>
		<div class="z-col-4">z-col-4</div>
	</div>
	<div class="z-row">
		<div class="z-col-4">z-col-4</div>
		<div class="z-col-8">z-col-8</div>
	</div>
	<div class="z-row">
		<div class="z-col-2">z-col-2</div>
		<div class="z-col-7">z-col-7</div>
		<div class="z-col-3">z-col-3</div>
	</div>
	<div class="z-row">
		<div class="z-col-6 z-offset-4">z-col-6 z-offset-4</div>
	</div>
	<div class="z-row">
		<div class="z-col-4 z-offset-2">z-col-4 z-offset-2</div>
		<div class="z-col-4 z-offset-2">z-col-4 z-offset-2</div>
	</div>