Grid

The CSS Grid Layout Module has been designed for setting up grid layouts without the need to use older pseudo grid layout systems that use table cells, floats or flexbox. The first version of the CSS Grid specificaction was implemented in a few web browsers in 2017, and CSS Grid is now found in all major web browsers.

CSS Grid layout is capable of any number of layouts, but we provide a simple, robust two dimensional grid system (or 'three dimentional', because you can position grid items so that they overlap).

The grid in theory

A grid consists of vertical and horizontal lines with square or rectangular spaces in between. We call the lines grid tracks and the spaces grid cells. The grid is not actually drawn on the browser screen, though it can be visualized e.g. by dashed lines in a browser’s code inspector (dev tools).

Place elements (grid items) on the grid. The CSS Grid engine “snaps” the elements to the grid tracks, and can sit on one grid cell or to span multiple cells.

Grid cells can have any width, dependant on the width of the viewport, or dependant on the width of the Grid controlled area within a design. Grid cells can have any height, dependant on how much content (or, the height of the content) in an element that is places on the grid.

Our simple grid system has utility classes for controlling up to six column tracks and six row tracks.

Grid items are immediate child elements of an element that has the grid CSS class. By default, grid items occupy one grid cell (the smallest rectangle). Our grid system has CSS classes for:

• Controling tracks at grid wrapper level:
  • Grid – grid initializes the CSS grid. It adds display: grid; but it doesn’t provide information about how many columns wanted.
  • Gap – also known as a gutter between grid items:
    • gap (optional) adds vertical and horizontal whitespace along internal grid tracks.
    • col-gap (optional) adds vertical whitespace along internal grid tracks – between columns.
    • row-gap (optional) adds horizontal whitespace along internal grid tracks – between rows.
  • Column control:
    • auto-{x}-cols (optional) – specifies how many columns the layout has (up to six), where each column width can be different. The width depends on the width of the placed element’s content, or can be controlled by specifying the width (on a per-column basis).
    • equal-{x}-cols (optional) – specifies how many columns the layout has (up to six), where each column width is equalized. E.g. if there are two columns each will have width 50%; if three columns each will be 33.3...%; and so on. (If using gap, these column widths are automatically recalculated by the CSS Grid engine.)
• Controling positioning and spanning at per-grid-item level:
  • Positioning: col-{x} and row-{x} – for positioning each grid item over the grid cells.
  • Spanning: cols-{first}-{last} and rows-{first}-{last} – for handling column and/or row spanning.
• Grid layouts at different media query breakpoints:
  • Our grid system has five tiers of media query breakpoints, for creating different grid layouts for different sized devices: (all), xs, sm, md, and lg. @TODO - UPDATE BREAKPOINTS

The singular named col- and row- classes are used to instruct the grid which grid cell the grid item is placed on (up to six columns and/or six rows). The plural named cols- and rows- classes can be used to make grid items to span up to six columns and/or six rows.

Our grid in practice

The grid class does not specify or predict where the grid items will be positioned. It just supplies the style display: grid; to initialize the grid area. The layout will still only be in rows:

<div class="grid">
  <div> ... </div>
  <div> ... </div>
  <div> ... </div>
</div>

Grid item wrapping

Grid items will automatically wrap onto a new row if the layout requires it. (Unlike flexbox, where we have to command a flexbox to wrap using a style rule.)

<div class="grid">
  <div class="grid-col-1"> ... </div>
  <div class="grid-col-2"> ... </div>
  <div class="grid-col-3"> ... </div>
  <div class="grid-col-1"> ... </div>
  <div class="grid-col-2"> ... </div>
  <div class="grid-col-3"> ... </div>
</div>

When rows wrap like this, col- classes aren't needed to add to grid items that drop to the next row. CSS Grid will automatically position the subsequent row’s grid items consecutively in the same columns as specified in the first row.

The grid-col- classes on subsequent rows are redundant but harmless – but can be included if it helps explain intention to colleagues.

<div class="grid">
  <div class="grid-col-1"> ... </div>
  <div class="grid-col-2"> ... </div>
  <div class="grid-col-3"> ... </div>
  <div class="grid-col-4"> ... </div>
  <div class="grid-col-5"> ... </div>
  ...
</div>

Auto-width or equal-width columns

Both grid-cols-auto-{x} and grid-cols-{x} specify how many columns the grid will have, before items will wrap to a new row.

• Use gridcols-auto-{x} if you need columns that have their widths controlled additionally to the grid layout itself (e.g. you are setting a particular width on a sidebar).

• Use grid-cols-{x} if you are setting up a traditional “constrained columnar width” layout or a gallery of images or videos.

• auto-3-cols:

  <div class="grid grid-cols-auto-3">
    <div>Lorem</div>
    <div>ipsum dolor sit</div>
    <div>amet consectetur adipisicing elit.</div>
    <div>Explicabo enim</div>
    <div>velit veniam reiciendis vel inventore sequi quasi</div>
    <div>fugit sunt aliquam!</div>
  </div>

  Lorem

  ipsum dolor sit

  amet consectetur adipisicing elit.

  Explicabo enim

  velit veniam reiciendis vel inventore sequi quasi

  fugit sunt aliquam!

• equal-3-cols:

  <div class="grid grid-cols-3">
    <div>Lorem</div>
    <div>ipsum dolor sit</div>
    <div>amet consectetur adipisicing elit.</div>
    <div>Explicabo enim velit veniam reiciendis</div>
    <div>velit veniam reiciendis vel inventore sequi quasi</div>
    <div>fugit sunt aliquam!</div>
  </div>

  Lorem

  ipsum dolor sit

  amet consectetur adipisicing elit.

  Explicabo enim velit veniam reiciendis

  velit veniam reiciendis vel inventore sequi quasi

  fugit sunt aliquam!

Adding gaps along grid lines

Add a gap (also known as a gutter) between grid items using gap classes. Grid gaps run in two dimensions:

• vertically along column tracks: use col-gap
• horizontally along row tracks : use row-gap
• vertically along column tracks and horizontally along row tracks: use gap

grid gap grid-cols-3:

grid col-gap grid-cols-3:

grid row-gap grid-cols-3:

Controlling grid item positioning on a per-item basis

If the number of columns aren't specified on the grid-wrapper level (using grid-cols-auto-{x} or grid-cols-{x}), but you use col- positioning classes on your grid items, the CSS Grid engine can usually figure out what you want, if your layout is relatively simple.

Similar to the behavior of grid-cols-auto-{x}, grid item col- classes do not have a percentile or other max-width built in. So, if you don't constrain columns, they will expand depending on their content:

<div class="grid">
  <div class="grid-col-1"> ... </div>
  <div class="grid-col-2"> ... </div>
  <div class="grid-col-3"> ... </div>
</div>

Now, if you want the grid item widths to be equalized, use grid-cols-3 on the wrapper.

<div class="grid grid-cols-3">
  <div class="grid-col-1"> ... </div>
  <div class="grid-col-2"> ... </div>
  <div class="grid-col-3"> ... </div>
</div>

Grid item reordering

You can use grid-col- and or grid-row- classes to display grid items in different positions, and even overlap them. However, with this added complexity, you will need to control both columns and rows so that CSS grid layout can figure out what you want to do.

In the example below, the grid items are rearranged into different columns. But we want still want them to be all in one row, therefore we must specify grid-row-1 on each item, so that the CSS Grid engine gets it right.

<div class="grid">
  <div class="grid-col-2 grid-row-1">First item</div>
  <div class="grid-col-4 grid-row-1">Second item</div>
  <div class="grid-col-3 grid-row-1">Third item</div>
  <div class="grid-col-1 grid-row-1">Fourth item</div>
  <div class="grid-col-5 grid-row-1">Fifth item</div>
</div>

You can also overlap grid items by specifying that they occupy the same grid cell (whether entirely or in part).

Spanning multiple columns and/or rows

By default, one grid item sits on one grid cell – the grid item spans one column track wide and one row track high. But you can make grid items span up to six columns and/or up to six rows using the classes col-span-{x} and/or row-span{x}.

Thinking about one row: the first grid item can span up to six columns (columns 1 to 6). The second grid item can span up to five columns (columns 2 to 6). And so on. And it’s similar for spanning rows.

Example: the second column spans three grid cells, from 2 to 4.

<div class="grid grid-cols-4">
  <div class="grid-col-1"> ... </div>
  <div class="grid-col-span-3"> ... </div>
</div>

Spanning multiple rows works the same way.

<div class="grid equal-3-cols">
  <div class="col-1 rows-1-3"> ... </div>
  <div class="col-2"> ... </div>
  <div class="col-3"> ... </div>
  <div class=""> ... </div>
  <div class=""> ... </div>
  <div class=""> ... </div>
  <div class=""> ... </div>
</div>