Base Code - Grid

Introduction

This is our primary layout tool. It’s extremely flexible, lightweight, and utilizes CSS Grid. It shares some resemblance to those grids of the past, but it has more options for designers to use.

In the past, we’ve used a 12-column set up that used either floats or flex-grid as their base technology. However, you can now define how many columns are in each row inside the HTML itself, and that makes it easier to wrap one’s head around.

Basics

Our grid system is composed of two elements: a wrapper element<div class="grid">and as many container elements<div class="grid__col">as necessary.

If not otherwise specified, the grid will layout 12 columns in every row. This allows you to treat it like those grids from the past, if you so choose, and it should make it easier to update old code if necessary. However, you can change how many columns are in each row on the grid wrapper itself. The pattern is as follows: <div class="grid --[breakpoint]-[# of columns]">.

<div class="grid --sm-2 --med-3 --lrg-4">
	<!-- ... --->
	<div class="grid__col">
		<!-- content goes here -->
	</div>
	<!-- ... --->
</div>

The breakpoints follow the same pattern and sizing rules as the old, homegrown flex-grid that was utilized among a scattering of developers on campus; it goes as follows: sm, med, lrg, xlrg, xxlrg. It uses shorthand sizes specifically to avoid conflicts with the existing foundation grids which you can still use even if you include this library.

Using these modifiers can occasionally create “dead cells” (cells that don't get filled in by a container) in the grid. You can use a modifier we explain later (--dense) in order to fill those dead cells in.

Spanning

In our grid system, you don’t only have control of how many columns will go inside of each row, but you can also set how many columns and rows a specific <div class="grid__col">will take up with the following modifiers:

--[breakpoint]-[# of columns]-[cols]--[breakpoint]-[# of rows]-[rows]

You can make a grid__coltake up both extra rows and columns. You are not limited to applying only one modifier or the other.

Making use of spans gives you greater flexibility in how you layout content on the page. Used properly, you will be able to cut down on unnecessary empty space on the page.

<div class="grid --sm-1 --med-2 --lrg-3">
	<div class="grid__col --med-2-cols --lrg-2-rows">
		<!-- content goes here -->
	</div>
	<div class="grid__col">
		<!-- content goes here -->
	</div>
	<div class="grid__col">
		<!-- content goes here -->
	</div>
</div>

HTML

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis et sint itaque labore veritatis. Consectetur ex omnis nobis, soluta asperiores totam quidem odit similique id eaque distinctio suscipit iure veniam.

CSS

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur suscipit sed sit quod? Nam, ex quis! Culpa molestiae facilis necessitatibus illum consequatur tempora voluptates distinctio cum, dicta voluptas aperiam sint?

JS

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur suscipit sed sit quod? Nam, ex quis! Culpa molestiae facilis necessitatibus illum consequatur tempora voluptates distinctio cum, dicta voluptas aperiam sint?

Manual Layout

Using these modifiers often creates “dead cells” (cells that don't get filled in by a container) in the grid. You can use a modifier we explain later (--dense) in order to fill those dead cells in.

These modifiers let designers specify which cells the .grid__colwill take up manually. For example, --lrg-col-start-3 --lrg-2-colssets a grid__col to start at the third cell in the row and end at the fourth cell.

Modifier	Element	Effect
--[size]-col-start-[x-cell #]	.grid__col	Sets a grid column to start at a set horizontal cell number
--[size]-col-end-[x-cell #]	.grid__col	Sets a grid column to end at a set horizontal cell number
--[size]-row-start-[y-cell #]	.grid__col	Sets a grid column to start at a set vertical cell number
--[size]-row-end-[y-cell #]	.grid__col	Sets a grid column to start at a set vertical cell number

Other Modifiers

Grid Sizing

These options affect how much space the entire grid can take up. Unmodified, the grid maxes out at 80rem.

Modifier	Element	Effect
--smaller	.grid	Sets the grid to take up no more than 60rem
--larger	.grid	Sets the grid to take up no more than 100rem
--full	.grid	Sets the grid to take up all of the space

Spacing

These options allow you to choose whether or not there will be a space, or gap, around the grid columns. The spacing can be turned on or off at the standard breakpoints; it is on by default.

Modifier	Element	Effect
--[size]-collapse	.grid	Removes the grid spacing from the given size and up
--[size]-uncollapse	.grid	Adds the grid spacing back in from the given size and up

Grid Flow

This modifier allows the grid to move around the columns to try to find a best fit. This can be especially useful when using span or the manual layout modifiers, because it fills in “dead columns” that those methods can create.

Modifier	Element	Effect
--dense	.grid	Automatically flows the columns around the grid for a best fit