Grid live

Open the above preview in a new window: With layout Open Component only Open

Grid Component

npm version

About

As we cannot guarantee the Blocks within the a Micro Grid and make use of the child combinator > and the universal selector * to target them.

A Simple Grid is written to go from single column, to two column, to their respective column count depending on the size of the viewport.

You can define the number of columns with a modifier class.

Do Not Use with any component that uses the <table> HTML element as this breaks built-in browser accessibility for screen readers etc.

Currently (16/03/20) The vf-grid is expecting to be a parent of vf-body. It does, however, work inside embl-grid now as we have added CSS to make it respect the boundaries so that it doesn’t break.

Install

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

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

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/index.scss";

Make sure you import Sass requirements along with the modules.

Visual Framework Grid (auto layout)

HTML
<div class="vf-grid"> ... </div>
Example

1

1

2

1

2

3

1

2

3

4

1

2

3

4

5

1

2

3

4

5

6

Visual Framework Grid (defined columns)

If you have Blocks that need to be laid out on both X and Y axis you will need to add the modifier classes.

HTML
<div class="vf-grid vf-grid__col-2"> ... </div>
Example

1

2

3

4

5

6

HTML
<div class="vf-grid vf-grid__col-3"> ... </div>
Example

1

2

3

4

5

6

HTML
<div class="vf-grid vf-grid__col-4"> ... </div>
Example

1

2

3

4

5

6

HTML
<div class="vf-grid vf-grid__col-5"> ... </div>
Example

1

2

3

4

5

6

HTML
<div class="vf-grid vf-grid__col-6"> ... </div>
Example

1

2

3

4

5

6

7

8

9

10

11

12

Component information

  • Handle: @vf-grid
  • Filesystem path: ../../components/vf-grid/vf-grid.njk

Code example

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

    <div class="vf-grid">
        <div>auto layout</div>
        <div>auto layout</div>
        <div>auto layout</div>
        <div>auto layout</div>
        <div>auto layout</div>
    </div>

    <div class="vf-grid | vf-grid__col-2">
        <div>vf-grid__col-2</div>
        <div></div>
    </div>

    <div class="vf-grid | vf-grid__col-3">
        <div>vf-grid__col-3</div>
        <div></div>
        <div></div>
    </div>

    <div class="vf-grid | vf-grid__col-4">
        <div>vf-grid__col-4</div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div class="vf-grid | vf-grid__col-5">
        <div>vf-grid__col-5</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div class="vf-grid | vf-grid__col-6">
        <div>vf-grid__col-6</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

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

Resources and files

          # Change Log

## 1.1.0

* adds grid row span utility classes

## 1.0.5 (2020-05-01)

* fixes a remaing bug with IE11 where we relied on the calc function
  * https://github.com/visual-framework/vf-core/pull/900

## 1.0.4 (2020-04-22)

* fixes a bug with IE11 where we relied on the calc function inside the flex (which IE11 does not support) in the flexbox fallback grid defined columned classes (.vf-grid__col-2 > * {...) etc).
  * https://github.com/visual-framework/vf-core/pull/882

## 1.0.2 (2020-03-20)

* fixes issue with vf-grid inside vf-body https://github.com/visual-framework/vf-core/pull/802

## 1.0.1 (2020-01-24)

* Removes over-agressive border on 1 column layouts

## 1.0.0 (2019-12-17)

* Initial stable release

        

File information

          // vf-grid

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

/* stylelint-disable order/order */
.vf-grid {
  display: flex;
}
.vf-grid > * {
  flex: 1;
  margin: 10px 0 10px 1.6339%;
}

.vf-grid > *:first-child {
  margin-left: 0;
}


[class*='vf-grid__'] {
  flex-wrap: wrap;
}
// Originally the calculations in the flex declarations below were created using CSS calc
// Unfortunately IE11 (which this flexbox grid is for) does not support calc inside of flex
// So we've hard coded the percentage values. All other modern browsers get to use grid.
.vf-grid__col-2 > * {
  flex: 0 0 49.18305%;
}
.vf-grid__col-3 > *{
  flex: 0 0 32.244066667%;
}
.vf-grid__col-4 > * {
  flex: 0 0 23.774575%;
}
.vf-grid__col-5 > * {
  flex: 0 0 18.69288%;
}
.vf-grid__col-6 > * {
  flex: 0 0 15.305083333%;
}
@media (max-width: 1023px) {
  .vf-grid {
    flex-wrap: wrap;
  }
  .vf-grid > *{
    flex: 0 0 49.18305%;
  }
}


@supports (display: grid) {
  .vf-grid {
    display: grid;
    grid-column: main;
    grid-column-gap: var(--page-grid-gap);
    grid-row-gap: var(--page-row-gap, var(--page-grid-gap));
  }

  @media (min-width: 840px) {
    .vf-grid {
      grid-auto-flow: column
    }
  }
  // This rule seems to break things more than it fixes.
  // @media (max-width: 1299px) {
  //   .vf-grid {
  //     grid-column: 1 / -1;
  //   }
  // }

  // This is needed for when the vf-grid is nested inside an embl-grid, like the news
  // home page.
  @media (max-width: 1299px) {
    .embl-grid .vf-grid {
      grid-column: 1 / -1;
    }
  }

  .vf-grid > * {
    margin: 0;
  }

  [class*='grid__'] {
    grid-auto-flow: unset;
  }

  // .vf-grid__col-1 > * + * {
  //   border-top: 1px solid set-color(vf-color--grey);
  //   padding-top: map-get($vf-spacing-map, vf-spacing-xxl);
  //
  //   &:last-of-type {
  //     margin-bottom: 0;
  //   }
  // }

  .vf-grid__col-1 {
    grid-template-columns: repeat(1, 1fr);
  }


  @media (min-width: 768px) {
    .vf-grid__col-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .vf-grid__col-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .vf-grid__col-4 {
      grid-template-columns: repeat(2, 1fr);
    }
    .vf-grid__col-5 {
      grid-template-columns: repeat(3, 1fr);
    }
    .vf-grid__col-6 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .vf-grid__col-4 {
      grid-template-columns: repeat(4, 1fr);
    }
    .vf-grid__col-5 {
      grid-template-columns: repeat(5, 1fr);
    }
    .vf-grid__col-6 {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  // Grid Spans
  .vf-grid__col--span-2 {
    grid-column-end: span 2;
  }
  .vf-grid__col--span-3 {
    grid-column-end: span 3;
  }
  .vf-grid__col--span-4 {
    grid-column-end: span 4;
  }
  .vf-grid__col--span-5 {
    grid-column-end: span 5;
  }
  .vf-grid__col--span-6 {
    grid-column-end: span 6;
  }
  .vf-grid__col--span-all {
    grid-column: 1 / -1;
  }

  .vf-grid__row--span-2 {
    grid-row-end: span 2;
  }
  .vf-grid__row--span-3 {
    grid-row-end: span 3;
  }
  .vf-grid__row--span-4 {
    grid-row-end: span 4;
  }
  .vf-grid__row--span-5 {
    grid-row-end: span 5;
  }
  .vf-grid__row--span-6 {
    grid-row-end: span 6;
  }
  .vf-grid__row--span-all {
    grid-row: 1 / -1;
  }
}
/* stylelint-enable order/order */

        

File information

All the components

Grids

Put stuff in columns.

Grid

Page Grid

Inlay


Elements

The micro elements of the component library.

Badges

Blockquote

Button

Collapse

Divider

Explainer

Favicon

Figure

Headings

Link

Lists

Logo

No JS

Text


Blocks

Simple components like sections headers, galleries and so on.

Activity List

Article Meta Information

Box

Breadcrumbs

Card

Code Example

Discussion

Embed

Footer

Global Header

Lede

Links List

Masthead

Navigation

Page Header

Pagination

Profile

Search

Section Header

Social icons

Summary

Table

Tabs

Tree

Video

Video Teaser


Container

More complex components that sometimes have specific layout, like page intros, mastheads, news sections and so on.

EBI Header and Footer

Acivity List Group

Banner

Card Container

Content

Forms

Header

Hero

Intro

News Container

Summary Container

Video Container


Boilerplates

Whole-page templates that are a collection of many components.

VF Boilerplate


Utilities

Utility classes to help where neeed.

EBI-VF 1.x Compatibility Component

EMBL Notifications

Google Analytics enhancements

Visual Framework Componet Rollup

Design Tokens

Plex Mono Font

Plex Sans Font

JS Polyfill

Sass config

Sass Starter

Full Bleed

Utility classes


EMBL Grids

EMBLs way to put stuff in columns.

EMBL Grid


EMBL Elements

EMBLs micro elements of the component library.

EMBL Conditional Edit

EMBL Favicon

EMBL Logo


EMBL Blocks

Simple components from EMBL like sections headers, galleries and so on.

EMBL Breadcrumbs

EMBL Content meta properties


EMBL Containers

More complex EMBL components that sometimes have specific layout, like page intros, mastheads, news sections and so on.

EMBL ContentHub Loader


EMBL Boilerplates

Whole-page templates that are a collection of many components.


Deprecated

These components are no longer maintained.

Deprecated pattern

Sass utilities