As of 2017, most browsers start to support CSS Grid Layout simultaneously. It is the very first two-dimensional grid-based CSS module created specifically to solve the layout problems. With CSS Grid Layout, users can easily build more dynamic, asymmetrical layouts, and control both columns and rows at the same time. Below we will show you how ZK works with CSS Grid Layout seamlessly and lively!
Layout ZK components with CSS Grid
The strategy is very simple: a CSS Grid Container should be set to a zk
<div> component. Furthermore, every CSS Grid Items is required to be a
<div> component, which we put all kinds of ZK components inside.
grid-template-columns: 1fr 8fr 19fr 1fr;
grid-template-rows: repeat(3, min-content) 1fr;
grid-column: 2 / 4;
grid-row: 1 / 2;
grid-column: 2 / 3; //css grid properties
grid-row: 2 / 3; //css grid properties
<div sclass="instruction item">
<label>As of 2017, //omitted </label>
<div sclass="header item">
<label style="font-size: 100%;">
Layout ZK components more lively:
<label value="ZK with CSS Grid"/>
<chosenbox hflex="1" creatable="true"/>
- Line 20: The
<div> component is a CSS Grid Container, applied by sclass
container including some properties like
grid-template-rows to divide the container into some grid areas.
- Line 21 and 26: These
<div> components are CSS Grid Items. With
sclass we can specify the corresponding position by css grid properties like
grid-row. Thus, in those
<div> CSS Grid Items, we can add ZK components as its children components.
The whole demo project can be found on Github project.