Grid

Since v3.0 Codebase has included a responsive, fluid, real CSS Grid grid-system.

With the arrival of grid to CSS, web developer thought leaders such as Rachel Andrew have argued persuasively that there is no need for a CSS grid-based grid system – because you can create your own, directly in your CSS.

But you may find Codebase’s CSS grid system handy, anyhow!

As with all Codebase class-builder units, if you don’t want this in your outputted codebase.css you can toggle it to false in codebase/scss/01_basics/__default-variables.scss SCSS:

$include-css-grid: true !default;

Grid System Features

1. Unlike the traditional (columnar) 12 column grid systems based on floats or flexbox, with the Codebase grid you get to choose how many columns and rows you need for your layout: 2, 3, or 4 (max). That’s everything up to a 4×4 grid.
   • This versatility covers the majority of use cases. But if you really need more (e.g. you need 5 or 6 columns), then you can increase the $grid-max-cols and $grid-max-rows variables in the SCSS. (Don’t go too high here, because that could massively increase your outputted CSS from the SCSS preprocessor loops.)
   • By default, the grid area (grid cell) widths and are flexible – where they are depends on how much content you have in each area. But where necessary, you can do a “distribute columns evenly” by applying grid equalize classes.

<div class="grid grid-equalize-2">
  <div class="col-1">a</div>
  <div class="col-1-2">b</div>
</div>

<div class="grid grid-equalize-3">
  <div class="col-3">a</div>
  <div class="col-2-3">b</div>
  <div class="col-1-3">c</div>
</div>

<div class="grid grid-equalize-4 mb-3e">
  <div class="col-1">a</div>
  <div class="col-2 row-1-2">b</div>
  <div class="col-1">c</div>
  <div class="col-3 row-1-3">d</div>
  <div class="col-1-2">e</div>
  <div class="col-4 row-1-4">f</div>
  <div class="col-1-3">g</div>
</div>

2. Three grid systems are included:
   • Default – use this if you need a grid layout at all viewport widths.
   • -md becomes effective at minimum 768px viewport width.
   • -lg becomes effective at minimum 1024px viewport width.
3. Per grid-item justification and alignment.
4. Nestable.
5. RTL and LTR languages are supported.
6. No need for any of that offseting, push-pulling and re-ordering stuff you may be used to, if you’ve used float and flexbox grids. Instead, you can intuitively position your grid items wherever you want.
7. You can even use the grid in three dimensions – because grid items can be stacked by overlapping.

Fluid Grid Wrapper Classes

All viewport widths:	Viewport widths >= 768px:	Viewport widths >= 1024px:
.grid	.grid-md	.grid-lg

.grid instantiates the grid layout. Add (one or more of) these classes to the wrapper block element (e.g. a <div>).

That may be all you need, for setting up the wrapper – if you are not interested in having equal column widths. By default, the grid’s widths (and heights) all self-adjust depending on the size or amount of content in grid items – a behavior similar to the way table columns and rows adjust to their content.

Adding a Gap Between Grid Items

An optional .grid-gap adds a gap (gutter) in between grid items, both horizontally and vertically. This gap is equal to the margin-bottom on headings, paragraphs, lists and tables (default).

<div class="grid grid-gap">
  <div class="col-1">First grid item</div>
  <div class="col-2">This is the second grid item with a lot of content</div>
  <div class="col-3">Third grid item</div>
</div>

Additionally, if you wish to constrain the width of particular grid item(s), you can go ahead and specify their widths in your stylesheet (e.g. .sidebar {width: 200px;}) or by an inline style (e.g. style="width: 200%").

Equalizing Column Widths

• .grid-equalize-*
• .grid-md-equalize-*
• .grid-lg-equalize-*

The -equalize-* modifier class is used to equalize column widths (at different media query widths) – similar to a “distribute columns evenly” function in a word processor or spreadsheet software. (Note: -equalize-* only affects columns, not rows.)

With -equalize-* columns will each equally expand to occupy the available grid wrapper width. So, two columns will have half-width each; three will have third-width; four will have quarter-width.

E.g. .grid.grid-md-equalize-4 sets a grid with 4 columns of equal span (constrained 25% each) that kicks in at 768px viewport width.

After you have populated the first row of the grid with item(s) that complete your required number of columns, you can sometimes get away with not specifying the positioning of subsequent grid items – the browser will figure out where to place them.

Grid-Item Classes

All viewport widths:	Viewport widths >= 768px:	Viewport widths >= 1024px:
.col-* .row-* .justify-* .align-*	.col-md-* .row-md-* .justify-md-* .align-md-*	.col-md-* .row-md-* .justify-md-* .align-md-*

Column Tracking

Multiple permutations, e.g:

• .col-md-1 – item occupies a position in column 1 only.
• .col-md-2-3 – item spans columns 2-3 (i.e. starts at column track 2 and ends at column track 4).
• .col-md-3-4 – item spans columns 3-4 ( i.e. starts at column track 3 and ends at column track 5).

Row Tracking

Multiple permutations, e.g:

• .row-3 – item occupies a position in row 3 only.
• .row-md-1-2 – item spans columns 1-2 (i.e. starts at row track 1 and ends at row track 3).
• .row-md-2-3 – item spans rows 2-3 (i.e. starts at row track 2 and ends at row track 4).

Note: while you are building your your grid, rows may sometimes not appear to span correctly. E.g. if you have an item that spans multiple rows but you haven’t placed anything else on that row yet, your tall item may not appear to be tall enough (unless you place a lot of content in it). But when you add your other grid items, your layout will all take the shape that you want.

Justification (horizontal)

Within a grid area (which may span multiple columns) – multiple permutations, e.g:

• .justify-md-left
• .justify-md-right
• .justify-md-center
• .justify-md-stretch (default; you only need this if you unstretched it at a smaller viewport width)

Alignment (vertical)

Within a grid area (which may span multiple rows) – multiple permutations, e.g:

• .align-md-top
• .align-md-bottom
• .align-md-center
• .align-md-stretch (default; you only need this if you unstretched it at a smaller viewport width)

Using the Grid System

Here’s what you actually do:

1. Use .grid to instantiate your grid.
   • Optional: use .grid-gap if you need a gap between grid items.
   • Optional: use .grid-*-equalize-* if you need to constrain the grid layout to equal-width columns.
2. Place your items on the grid, according to their start and end tracks for .col-* and .row-* (at what viewport width you require).
3. Optional: set .justify-* and .align-* on an item within its grid area.

Do this for the default grid (as in the steps above) and/or for a grid that kicks in at md or lg.

Examples

Simple

This grid has 3 columns – on medium viewports and up. The first three grid items are used to define the layout. The remaining six items will wrap to a second and then a third row, all adopting the pattern set in the first row. Since the columns have not been equalized, column widths will expand or contract according to how much content they have.

<div class="grid">
  <div class="col-md-1">First grid item</div>
  <div class="col-md-2">Second grid item</div>
  <div class="col-md-3">Third grid item</div>
  <div>Fourth grid item</div>
  <div>Fifth grid item</div>
  <div>Sixth grid item</div>
  <div>Seventh grid item</div>
  <div>Eighth grid item</div>
  <div>Ninth grid item</div>
</div>

Row spanning

2 columns and 3 rows (on all viewports), with is a gap between columns. The first column will be occupied by the first grid item for its full height (spanning 3 rows). The second column will have 3 items on 3 rows. Column width had been equalized so that each column has half the available width.

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

Easy Layout

Full width header and footer on all viewports. On medium viewports and up: main section left 2/3 width. Sidebar right 1/3 width. And there is a gap between columns.

Header

Article

Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim. Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.

<main class="grid grid-md-equalize-3 grid-gap">
  <header class="col-md-1-3">Header</header>
  <section class="col-md-1-2">Article</section>
  <nav class="col-md-3">Sidebar nav</nav>
  <footer class="col-md-1-3">Footer</footer>
</main>

Complex Layout

Exemplifying grid nesting, column re-ordering and justifying.

Header

Article

Nested

Nested

Nested

<main class="grid grid-md-equalize-4 grid-gap">
  <header class="justify-center col-md-1 justify-md-stretch">Header</header>
  <nav class="col-md-2-4">Primary nav</nav>
  <nav class="col-md-1 col-lg-4 row-md-2-3">Secondary nav</nav>
  <section class="col-md-2-4 col-lg-1-3 row-md-2-3">
    <h1>Article</h1>
    <section class="grid grid-md-equalize-3 grid-gap">
      <div class="col-md-1">Nested</div>
      <div class="col-md-2">Nested</div>
      <div class="col-md-3">Nested</div>
    </section>
  </section>
  <footer class="col-1-2 justify-center col-md-1-5">Footer</footer>
</main>

Explanation:

1. Header
   • justified center on small viewports
   • left ¼ width (beside primary nav) on medium viewports up
2. Primary nav
   • full width on small viewports
   • right ¾ width (beside header) on medium viewports up
3. Secondary nav
   • full width on small viewports
   • left ¼ width on medium viewports
   • right ¼ width on large viewports
4. Main article
   • as full width block on small viewports
   • right ¾ width on medium viewports
   • left ¾ width on large viewports

Therefore, sidebar and main article switch places when going from medium to large viewports – exemplifying “column reordering”.

5. Three nested items (within main article)
   • stacked on small viewports
   • in a row on medium viewports up
6. Footer – full width but centered on all viewports

Grid CSS Classes

Block (Wrapper) Class	Element Class
.grid .grid-gap1 .grid-equalize-{1...4}2	.col-{1...4}(-{2...4}) .row-{1...4}(-{2...4}) Horizontal alignment within grid areas: .justify-left .justify-center .justify-right .justify-stretch Vertical alignment within grid areas: .align-top .align-middle .align-bottom .justify-stretch
.grid-md .grid-md-equalize-{1...4}	.col-{1...4}(-{2...4}) .row-{1...4}(-{2...4}) Horizontal alignment within grid areas: .justify-md-left .justify-md-center .justify-md-right .justify-md-stretch Vertical alignment within grid areas: .align-md-top .align-md-middle .align-md-bottom .justify-md-stretch
.grid-lg .grid-lg-equalize-{1...4}	.col-{1...4}(-{2...4}) .row-{1...4}(-{2...4}) Horizontal alignment within grid areas: .justify-lg-left .justify-lg-center .justify-lg-right .justify-lg-stretch Vertical alignment within grid areas: .align-lg-top .align-lg-middle .align-lg-bottom .justify-lg-stretch

¹ It is assumed that if you want to use .grid-gap, then you will want it to be applied at all viewport widths. (Thus, there is no .grid-md-gap or .grid-lg-gap)
² {1...4} can be 1, 2, 3 or 4.

---