Written by: Keith McGuffey | IANR Media

The 5.0 framework uses 'dcf' grid classes. This is a quick guide to grids in 5.0. For more information, see the 5.0 documentation and band examples provided by the Web Developer Network.

Grids allow us to layout the content of our webpages so that they are mobile responsive.
To set up a grid, we need a grid <div> which will tell its children how to layout and when to break into a single column on mobile devices. For example:

<div class="dcf-grid-thirds@md">

This gives us a grid with three columns. These columns will break into a single column at the medium (@md) breakpoint.
We can add Grid Utility Classes to our <div> to specify the gap size between rows and columns:

<div class="dcf-grid-thirds@md dcf-col-gap-vw dcf-row-gap-6">

Children of this <div> will lay out in thirds across the page. Let's add two paragraphs and an image to our grid:

<div class="dcf-grid-thirds@md dcf-col-gap-vw dcf-row-gap-6">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <img src="pictures/Grids/pets111.jpg" alt="Picture of pets" />
</div>

Paragraph 1

Paragraph 2

Picture of pets

By resizing the page, we can see how these elements break into a single column as the screen gets narrow. This allows mobile users to view content without having to zoom in.

If we add more than three children, they will automatically move to the next row. In this example, we have five children:

<div class="dcf-grid-thirds@md dcf-col-gap-vw dcf-row-gap-6">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <img src="pictures/Grids/pets111.jpg" alt="Picture of pets" />
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
</div>

Paragraph 1

Paragraph 2

Picture of pets

Paragraph 3

Paragraph 4

The grids in 5.0 support up to sixths. You can nest grids within other grids.


Was this article helpful?