This page demonstrates that ZK can work seamlessly with the new CSS layout model, CSS Grid, which define a two-dimensional grid-based layout system.

<zk >
	<nodom viewModel="@id('vm')@init('demo.layout.cssgrid.CssGridVM')">
		<groupbox>
			<radiogroup>
				<radio label="Basic" checked="true"  onCheck="@command('navigate', url='/widgets/layout/css_grid/css_grid_basic.zul')"/>
				<radio label="Form" onCheck="@command('navigate', url='/widgets/layout/css_grid/css_grid_form.zul')"/>
				<radio label="Layout" onCheck="@command('navigate', url='/widgets/layout/css_grid/css_grid_layout.zul')"/>
				<radio label="Center" onCheck="@command('navigate', url='/widgets/layout/css_grid/css_grid_center.zul')"/>
			</radiogroup>
		</groupbox>
		<apply templateURI="@load(empty vm.url?'/widgets/layout/css_grid/css_grid_basic.zul':vm.url)"/>
	</nodom>
	<style>
		.instruction{
			display: block;
			margin: 12px auto 12px auto;
			color: #8f5700;
		}
		.z-radio{
			margin: auto 10px auto 10px;
		}
	</style>
</zk>

<zk>
	<style>
		.grid {
			display: grid;
			grid-template-columns: 2fr 1fr 1fr;
			grid-template-rows: auto auto;
		}
		.grid > div {
			border: 2px solid #7EC6FE;
			border-radius: 5px;
			padding: 1em;
			color: #149CFA;
			background: #E8F5FF;
		}
	</style>
    <label sclass="instruction" value="Try to resize the window by dragging the corner or border"/>
	<window sizable="true" border="normal" title="CSS grid inside"  width="600px">

	<div sclass="grid" height="100%">
		<div>One</div>
		<div>Two</div>
		<div>Three</div>
		<div>Four</div>
		<div>Five</div>
		<div>Six</div>
	</div>
	</window>
</zk>

<zk>
	<style>
		.grid {
			display: grid;
			grid-template-columns: 4fr 1fr 1fr 6fr;
			grid-gap: 10px;
			margin: 30px;
			justify-items: center;
		}

	</style>
	<label sclass="instruction" value="Arrange components in a table layout easily"/>
	<nodom viewModel="@id('vm')@init('demo.layout.cssgrid.CssGridFormVM')">
	<button iconSclass="z-icon-plus" onClick="@command('add')"/>
	<div sclass="grid" width="400px" >
		<label value="Name"/>
		<label value="Married"/>
		<label value="Age"/>
		<label value="Action"/>
		<forEach items="@init(vm.list)">
			<textbox/>
			<checkbox/>
			<intbox constraint="no negative" cols="3"/>
			<div>
			<button iconSclass="z-icon-times" onClick="@command('del', id=each)" />
			<button iconSclass="z-icon-save" onClick="@command('save', id=each)" />
			</div>
		</forEach>
	</div>
	</nodom>
</zk>

<zk xmlns:n="native">
    <style>
        .grid {
            display: grid;
            grid-template-columns: 3fr 1fr;
            grid-gap: 20px;
            margin: 50px;
        }
    </style>
    <label sclass="instruction" value="We can easily create a fluid design page layout. Try to resize the window by dragging the borders."/>

    <window sizable="true" border="normal">
    <div sclass="grid">
        <div sclass="main">
            <n:h1>What's ZK</n:h1>
            Stay true to your Java roots and effortlessly keep up with the ever-evolving front-end technology
            ZK aims to combine the simplicity and security from its server-centric architecture, and the beauty and dynamics from the evolving client-side technologies.

            The shadow components can easily turn Bootstrap templates and off-the-shelf HTML pages into dynamic web pages with MVVM data binding in Java. Data-handler and client-side command binding makes it extremely easy to integrate and reuse any 3rd party Javascript widgets or libraries in the most beloved Java way, while allowing you to still enjoy the equally important server-side integration and security.

            Shallow learning curve
            ZK brings the simplicity of desktop programming to Java Ajax development, thanks to its event driven and component based patterns.

            All events, server push, system events and user activities alike, are encapsulated as generic events to be handled generically. All components are LEGO-like building blocks which allow developers to compose an Ajax UI with ease.

            In addition, ZK provides a markup language - ZUML, making the design of rich user interfaces as simple and fast as authoring HTML pages. No programming is required.

            Server centric, no exposed business logic, light footprint
            The client side implemention of ZK is based on jQuery, but all business logic is stored at the server meaning increased security for your application. This is a major concern for Ajax Enterprise applications based on Java.

            If developers wish to use the client, ZK provides the ability to use JavaScript directly. Developer's can contruct their java web applications primarily at the server but use JavaScript at the client to tweak their applications.

            ZK provides a Load on Demand mechanism resembling a class loader to speed up loading of the JavaScript at start up. Additionally only the required JavaScript code for the Java Ajax application is loaded at the client ensuring a light client footprint.
        </div>
        <div sclass="sidebar">

            <groupbox title="Actions" >
                <vlayout>
                <button label="Share"/>
                <button label="Bookmark"/>
                </vlayout>
            </groupbox>
            <groupbox title="Related Links">
                <vlayout>
                <a href="http://www.zkoss.org" target="_blank">ZK Official Website</a>
                <a href="http://www.zkoss.org/documentation#References" target="_blank">ZK Documentation</a>
                </vlayout>
            </groupbox>
        </div>
    </div>
    </window>
</zk>

<zk>
	<style>
		.grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-auto-rows: 40px;
			align-items: center;
			justify-items: center;
		}
		.grid > div {
			padding: 10px;
			text-align: center;
		}
	</style>
	<label sclass="instruction" value="Vertically center text in a row"/>
	<window border="normal" title="Center Alignment">

	<div sclass="grid">
		<forEach begin="1" end="4">
			<div>the first row</div>
		</forEach>
		<forEach begin="1" end="3">
			<div>the 2nd row</div>
		</forEach>
		<div>this is a long text that produces a line break</div>

		<div>3rd row various heights widths, center nicely</div>
		<div><button height="25px" width="40px" iconSclass="z-icon-info-circle"/></div>
		<div><button height="30px" width="50px" iconSclass="z-icon-info-circle"/></div>
		<div><button height="20px" width="60px" iconSclass="z-icon-info-circle"/></div>
	</div>
	</window>
</zk>

package demo.layout.cssgrid;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.SmartNotifyChange;

public class CssGridVM {

    private String url = "";

    @Command
    @SmartNotifyChange("url")
    public void navigate(@BindingParam("url") String url){
        this.url = url;
    }

    public String getUrl() {
        return url;
    }
}

package demo.layout.cssgrid;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.ListModelList;

public class CssGridFormVM {

    private ListModelList<Integer> list = new ListModelList<>();
    private int id = 0;

    @Init
    public void init(){
        add();
    }

    @Command
    public void add(){
        list.add(id);
        id++;
    }

    @Command
    public void save(@BindingParam("id") int id){
        Clients.showNotification("saved item ID "+id);
    }

    @Command
    public void del(@BindingParam("id") Integer id){
        list.remove(id);
    }

    public ListModelList<Integer> getList() {
        return list;
    }
}