Initializing help system before first use

Creating Grid Layouts

Use the Row element (vdl-row tag) within a section to create a grid layout.

Rows can contain columns, which function as cells in the grid.

Code editor 
<vdl version="5,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>
View Designer
Grid Layout in the View Designer
When published, this file renders as:

Rendered Grid Layout
Rendered Grid Layout

Implicit vdl-column elements and vdl-row elements

All sections use a grid layout internally.
  • Content not contained within a Column (vdl-column) element is wrapped in a single implicitly-sized Column (vdl-column element).
  • Any Columns (vdl-column elements) that are not contained within a Row (vdl-row element) are wrapped in single Row (vdl-row elements).
The following example has content both within and outside of rows and columns. 
<vdl version="5,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 code prior to rendering the HTML: 
<vdl version="5,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>
Parent Topic Working with Page Layouts and Styling

© 2001-2023 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation ("FICO"). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.