Grid Page Component

npm version

About

Install

This component is distributed with npm. After installing npm, you can install the vf-grid-page with this command.

$ yarn add --dev @visual-framework/vf-grid-page

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-grid-page/index.scss";

Make sure you import Sass requirements along with the modules.

To start with the page has a simple 3 column grid. The second grid item has a maximum width of 1300 pixels. The two outer grid columns fill the rest of the space to create a centred layout.

The code for this layout is for the <body class="vf-body"> tag so that the direct children inherit the grid columns.

CSS
.vf-body {
  display: grid;
  grid-template-columns:
    [full-start]
      minmax(1.25em, 1fr)
      [main-start]
        minmax(0, 81.25em) // 1300px
      [main-end]
      minmax(1.25em, 1fr)
    [full-end];
}

File system location: components/vf-grid-page

Variants

Variant: Default live grid

Nunjucks demo

{% render '@vf-grid-page--default', {
  "component-type": "grid"
} %}

Sample output

Sample output as HTML

<div class="vf-body">
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
  .vf-body>div {
    /* For illustrative use on component demo page */
    background-color: rgb(41, 141, 211);
    border: 1px solid #fff;
    min-height: 5em;
    margin-bottom: 1em;
  }
</style>

Assets

All components in this design system

This page is part of the components section.