This example shows how to use the Layout Manager with Grids CSS.
We will start by using the CSS Grid Builder and creating a page with the following settings:
Now we need to create an element based layout associated with the
#doc1 element (the root of the Grids based page).
Notice that we are setting a
width config on the layout. These are needed since we are not attaching the layout to the body.
Now we create the Layout Unit configs to match the Grids CSS markup. Note: We are using the
grids config option in the left and center units. The
config option will attempt to remove some of the Grids CSS classes that interfere with the Layout's design.
Finally we add a listener to the Layout instance for the
Here we again want to set the height of the
#doc1 element to the height of the browser window.