Page Templates - CSS Grid Framework

This resource introduces a CSS Grid framework based on CSS Grid layout system.

It’s an alternative to ODS Layout system, suitable for expert users, looking for more advanced layout system, specially designed for 2 dimensions layouts instead of one.

CSS Grid is the most modern and performant way to structure pages.

A framework is a set of CSS classes to set into the HTML to easily develop nice looking pages.

This framework covers :

  • the split into 12 columns
  • the row positioning
  • the ordering of elements

Note: this framework is used by ODS Labs team for some resources. It is not intended to replace ODS default layout already used in pages. You should also consider that CSS Grid layout or Flexbox are already available in every browser and can directly be used on the platform without any required framework.

Benefits

Why should you use this framework ?

  • adaptive height between cells of a same row.
  • automatic gap management (ie. no need of complex margins, with negative paddings on rows coupled with positive margins on columns).
  • reduced HTML depth/complexity, specially for nested grids (ie. avoid deep HTML trees of a box in a column in a row in a column in a row… here the cell, the grid and the box can be the same element!).
  • mobile first, then force you to think about the mobile layout before the desktop one.
  • 2D grid instead of 1D row (flexbox, width %, float)

Why shouldn’t you use this framework ?

You shouldn’t use this framework if you are not familiar with CSS debugging, browser consoles, inspection tab etc…

This framework has a stiffer learning curve than ODS default layout system. Therefore, if you want to develop quickly without spending time learning more advanced techniques, you should skip this resource. On the other hand, if you are ready to learn new techniques to develop advanced and complex grids, it’s a good starting point !

Set the grid

Use grid-cols-{n} class to create grids with n equally sized columns. grid-{n} can be used as a shortcut.

If there are more children than the grid size, they will automatically wrap. Ex: 8 children in a grid-3 will render as a 3 rows grid.

Breakpoints for responsiveness are :

  • sm for 640px and above
  • md for 768px and above
  • lg for 1024px and above

They can be used as prefixes, for example: sm:grid-cols-2 lg:grid-cols-3

Columns position and size

Direct children of a grid are cells. Without a cell class, they will take 1 column and 1 row, and fill the grid automatically.

They can be set on a specific position, and span on several columns.

Use cell-span-{n} class to make an element span n columns, or simply cell-{n} as a shortcut.

Use cell-span-full class to span entirely (ie. the width of the grid), or simply cell-full as a shortcut.

Use cell-start-{n} and cell-end-{n} classes to make an element start or end at the nth grid line. Can be combined with cell-span-* classes.

CSS grid lines start at 1, and ends at the size of the grid + 1. [1, 4] for a 3 columns wide grid for example.

Rows

As for columns, a specific number of rows can be set to a grid. The main benefit is to have an equal size for all children (cells) in the grid. It’s then also possible to span cells on several rows.

Use grid-rows-{n} class to create grids with n equally sized rows.

Use cell-row-span-{n}, cell-row-start-{n}, cell-row-end-{n} classes to, respectively, make an element span n rows, set its start position, end position.

Gap

Use gap-{n} class to set grids gap. (Size of the gap is n * 0.25 rem). Can be 0, 1, 2, 4, 6, 10.

Use gap-x-{n} for columns gap, gap-y-{n} for rows.

Default gap is gap-4.

Auto and fit

Use simply grid to create a grid. The algorithm will automatically place cells depending on cell-* classes seen previously.

Use grid-cols-auto-flow, grid-rows-auto-flow classes to control how the auto-placement algorithm works for a grid layout. grid-auto shortcut stands for columns auto flow.

Use grid-cols-fit, grid-rows-fit classes to control the size implicitly-created grid columns and rows and make it fit the content.

Change the order, by device

Responsive layouts can lead to strange and mixed results when you organise the content by columns.

In this example, on desktop view, the first grid keeps main content in the center, and let secondary content on the side. When this grid is shrunk to a mobile view, from 4 to 2 columns, the idea of main and secondary content is lost.

To fix this, you need to force a new order. The second grid is therefore coherent for mobile users.

Use cell-order-{n} classes, with n from 1 to 12, to force the order of children within a grid.

Use cell-order-none to set the order to 0, cell-order-first and cell-order-last to push a child to the beginning or the end of the ordered list of elements.

Like every class, they can be combined with responsive prefixes. sm:cell-order-1 md:cell-order-2 for example.

Note that the HTML structure changes, if we think “mobile first”, the HTML structure has the main content in first, the secondary in second. The CSS Grid framework then re-order element for small and above.