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>

© 2001-2019 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.