Codebase 6 Layouts: Grid

Normally in HTML, block elements span 100% of the available width and stack vertically, one under the other, starting from the top of the viewport. CSS grid styling enables blocks to be arranged and aligned according to a pre-defined grid. The Codebase 6 two-dimensional grid system has up to 4 columns and 4 rows.

The Codebase grid system

Let’s start with some basic concepts and terminology.

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 itself is not actually drawn on the browser screen – though its “guides” can be visualized using a browser’s code inspector (dev tools).

Web designers place HTML elements (called grid items) on the grid. The CSS Grid engine “snaps” the elements to the grid tracks, and you can design them to sit on one grid cell or to span multiple cells.

Web browser screens can be any size — from very small (phones) to very large (desktop or wall mounted displays). So, unlike with paper-based grids for poster or magazine page designs, and unlike squared math or graph paper, wenpage CSS Grid can be stretchy. This is good for layouts that need to be “responsive” to being displayed on any sized device. Grid cells can have adjustable widths dependant on the width of the browser screen, or the container in which they are placed (e.g. main content area, or sidebar). And grid cells can have any height, dependant on how much or how tall is the content of an element that is (or is placed inside) the grid item.

Note: since v.6.1.0, Codebase 6’s grid system has utility classes for controlling up to six column tracks (no utility classes for controlling column rows).

The Codebase grid system has CSS classes for:

• Controling tracks at grid wrapper level:
  • grid initializes the CSS grid.
  • gap (optional) adds vertical and horizontal whitespace along internal grid tracks.
• Column number control:
  • equal-*-cols (optional) – where * specifies how many columns your layout has (up to 6), where each column width is equalized. So, if you have two columns each will have width 50%; if you have 3 columns each will have 33.3%; if you have four columns each will have 25%. (However, if you include a gap-*, these column widths are automatically recalculated by the CSS Grid engine.)
  • Alternatively, simply specifying which columns you want your content items to be placed on will set (up to 6) columns whose width will merely depend on how much content you have within each item.
• Controling positioning and spanning at per-grid-item level:
  • Positioning: col-* – for positioning each grid item over the grid cells.
  • Spanning: cols-{x}-{y} – for handling column spanning.
• Grid layouts at different media query breakpoints:
  • The Codebase grid system has five tiers of media query breakpoints, for creating different grid layouts for different sized devices: (all), xs:, sm:, md:, and lg: prefixes.
• Extras:
  • Simple auto-width columns: auto-cols
  • Simple equal-width columns: equal-cols
  • Dense packing: grid-dense

Note: the singular named col- classes are used to instruct the grid which grid cell you want your grid item to be placed on (up to 6 columns). The plural named cols- classes can be used to make grid items to span (2, 3, 4, 5, or 6 columns).

The Codebase grid in practice

The grid class does not specify or predict where you will position or how you will span your grid items. It just supplies the style Grid to initialize your grid area. So far, your layout will still only be in rows. So, this is a grid, defaulting to one column wide and how ever many rows it requires to accommodate the grid items:

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

Responsive grid

You can use the xs:, sm:, md:, and lg: prefixes to cause the grid to take effect at different media query width breakpoint widths. So, with the base grid class, there are up to 5 grid system tiers.

Non-wrapping grid columns

Auto-columns

There are situations where you simply want to display a grid of items in a single row, and you don’t want them to wrap onto a new row. You can do this by using the auto-cols class on the grid wrapper. Then thenumber of columns depends on the number of grid-items you have:

<div class="grid auto-cols">
  <div></div>
  <div></div>
  <div></div>
</div>

Equal-width columns

Alternatively, you can use the equal-cols class to create a grid with equal-width columns:

<div class="grid equal-cols">
  <div></div>
  <div></div>
  <div></div>
</div>

Grid item wrapping

Grid items will automatically wrap onto a new row if your layout requires it. (This is unlike with flexbox, where you need to actually command a flexbox to wrap using a style rule.)

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

When you have wrapping rows like this, you actually don’t need to add col- classes to grid items that drop to the next row (and third row, etc.) because the CSS Grid engine will figure out what you want. After you have completed your required number of columns on your first row, CSS grid will automatically wrap and position the subsequent row’s grid items consecutively in the same columns as you specified in your first row.

The col- classes on subsequent rows are redundant but harmless – but you can include them if it helps you remember what you are doing, and to explain your intention to other designers in your collaboration.

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

Equal-width or auto-width columns

grid equal-*-cols specify how many columns your grid will have and. So, do you want equal-width columns, or not?

• Use grid equal-*-cols if you are setting up a traditional “constrained columnar width” layout or a gallery of images or videos.
• Alternatively, simply specify which of the up to 4 column you want your grid items to be placed in. This will generate the columns without giving them equal widths. And then the widths will depend on the amount of content that you’ve got in each grid item.

Example grid equal-3-cols:

<div class="grid equal-3-cols">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

A similar example but without equal-3-cols. This time the number of columns is specified by putting col-* on the first three columns. Different amounts of dummy text has been added to show you how the grid items expand or contract to accommodate it:

<div class="grid">
  <div class="col-1">Lorem</div>
  <div class="col-2">ipsum dolor sit</div>
  <div class="col-3">amet consectetur adipisicing elit.</div>
  <div>Explicabo enim velit veniam reiciendis</div>
  <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo enim velit veniam reiciendis, vel inventore sequi quasi fugit sunt aliquam! Incidunt eum alias illo ea laudantium animi possimus amet sunt?</div>
  <div>Lorem ipsum</div>
</div>

Adding gaps

gap-* — adds a horizontal and vertical gap (same as for flexbox layouts):

• gap-tiny — using --s-tiny
• gap-1 — using --s-1
• gap-2 — using --s-2
• gap-3 — using --s-3
• gap-4 — using --s-4

Gap examples:

grid equal-3-cols gap-tiny:

grid equal-3-cols gap-2:

Positioning and spanning of grid items

• Positioning of grid items will be either the default (depends on you specifying the number of columns using equal-*-cols), or using the singular col-* classes. x is either 1, 2, 3, 4, 5, or 6.
• Spanning grid items is done by plural cols-{x}-{y} classes. The x specifies which column the grid item starts from, and the y specifies how how far the grid item spans to.
• Dense packing of grid items may sometimes be required, where you are specifying grid item positioing and spanning, and you don't want to leave empty cells.

Not exemplified below: you can even overlap grid items by specifying that they occupy the same grid cell (whether entirely or in part). So, it’s a three dimensional grid system!

Grid item positioning

The following unlikely example will show you how positioning works.

You can use col- classes to display grid items in different positions, and even overlap them.

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

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

Grid item spanning

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 6 columns using the plural named classes cols-{x}-{y}.

Note: grid items can occupy grid cells to form any square or recangular shape, but cannot form e.g. irregular “L” shape.

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 through 4.

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

Grid item dense packing

The grid-dense utility class has been added, to provide an easy way to pack grid cells by moving later items to fill up any empty cells that have been created earlier in the grid layout. grid-dense reorders the appearance of grid items. using grid-auto-flow: dense;.

Notes on grid-dense:

1. If you use grid-dense, do not also try to control grid rows.
2. Do not use grid-dense where the order of grid items is essential — i.e. use it only where it does not cause a problem for accessibility.

Example grid with empty cells:

The same example grid with grid-dense added to the grid wrapper:

Same again, with a gap:

<div class="grid grid-dense equal-4-cols gap-2">
  <div>Item 1</div>
  <div class="cols-1-2">Item 2</div>
  <div class="cols-2-4">Item 3</div>
  <div class="col-4">Item 4</div>
  <div class="col-3">Item 5</div>
</div>

Grid layouts at different media query breakpoints

The grid class merely sets display: grid, without defining columns or rows or anything. Everything is controlled by gap, equal-, col-, and cols- classes.

Besides the exemplified classes above, each of these grid control classes has four more media query breakpoint tiers in Codebase (xs:, sm:, md:, and lg:).

There's alot you can do simply by multiple tiers of grid columns control. Here’s a simple example: a “gallery” layout with 6 items, displaying as a single column on phones, 2 columns on tablets in portait orientation, and 3 columns on tablets in landscape orientation, and up:

<div class="grid xs:equal-2-cols md:equal-3-cols">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

With control of up to 6 columns over 4 media breakpoints tiers (plus the base tier), this gives you a lot of layout versatility.