Using Grid Layouts
Use the vdl-row tag within a section to create a grid layout.
Rows can contain columns, which function as cells in the grid. The figure below shows some example markup.
<vdl version="4.1">
<vdl-page>
<vdl-section>
<vdl-row>
<vdl-column size="2">Top left.</vdl-column>
<vdl-column size="2">Top right.</vdl-column>
</vdl-row>
<vdl-row>
<vdl-column size="2">Bottom left.</vdl-column>
<vdl-column size="2">Bottom right.</vdl-column>
</vdl-row>
</vdl-section>
</vdl-page>
</vdl>
Which renders as:
Rendered Grid Layout
Implicit vdl-column elements and vdl-row elements
All sections use a grid layout internally. Any content that is not contained within a vdl-column element is wrapped in a single implicitly-sized vdl-column element. Any vdl-column elements that are not contained within a vdl-row element are wrapped in single vdl-row elements.
The following markup has content both within and outside of rows and columns.
<vdl version="4.1">
<vdl-section>This content is inside a section.
<vdl-row>This content is inside a row.
<vdl-column size="3">This content is inside a row and a column.</vdl-column>
</vdl-row>
<vdl-column size="2">This content is inside a column.</vdl-column>
More content within a section>
<vdl-section>
</vdl-page>
To conform to the grid layout, implicit
vdl-column and
vdl-row elements are added to the VDL prior to rendering the HTML:
<vdl version="4.1">
<vdl-section>
<vdl-row>This content is inside a section.</vdl-row>
<vdl-row>
<vdl-column>This content is inside a row.</vdl-column>
<vdl-column size="3">This content is inside a row and a column.</vdl-column>
</vdl-row>
<vdl-column size="2">This content is inside a column.</vdl-column>
<vdl-column>More content within a section.</vdl-column>
<vdl-section>
</vdl-page>