Codebase 6 Layouts: Grid

Normally in HTML, block elements span 100% of the available width and stack vertically, one under he 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. In web design, 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 in a browser’s code inspector (dev tools).

Web designers place HTML elements (called grid items in this context) 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 set grids paper-based poster or magazine page designs, and unlike with squared math or graph paper, CSS Grid can be stretchy, which is good for responsive layouts. Grid cells can have any width, dependant on the width of the browser screen, or dependant on the width of the Grid controlled area within a design. And 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.

Codebase 6’s grid system has utility classes for controlling up to four column tracks and four 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 rsquare or ectangle). 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 control:
  • equal-*-cols (optional) – specifies how many columns your layout has (up to six), where each column width is equalized. So, if you have two columns each will have width 50%; if you have 3 columns each will be 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 go into will set (up to 4) 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-* and row-* – for positioning each grid item over the grid cells.
  • Spanning: cols-{x}-{y} and rows-{x}-{y} – for handling column and/or row 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.

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

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 5 grid system tiers.

Below these breakpoints, the CSS grid layout will not take effect.

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></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-* or row-* classes. x is either 1, 2, 3, or 4.
• Spanning grid items is done by plural cols-{x}-{y} or rows-{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- and or 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 (be pedantic), so that CSS grid layout can figure out what you wanting to do.

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 row-1">First item</div>
  <div class="col-4 row-1">Second item</div>
  <div class="col-3 row-1">Third item</div>
  <div class="col-1 row-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 and/or up to 6 rows using the plural named classes cols-{x}-{y} and/or rows-{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>

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>

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-, cols-, row- and rows- 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 sm:row-gap md:col-gap equal-3-cols">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

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