William Penn’s CSS layouts

Reading time: 7 minutes
philadelphia-layout-cover

In 1683, William Penn designed the layout of Philadelphia based on a rectangular grid pattern in an attempt to create the perfect geometric utopian city. He envisioned a city segmented into four quadrants, which current locals now know as Franklin, Logan, Washington, and Rittenhouse Squares. With perpendicular city streets lining the 1,200-acre plot, Penn’s desire was to organize his town in such a way as to enhance commerce, transportation, and other civic-oriented activities. His gridiron street model became a staple for future American city planners across the continent much like the grid-pattern has been for web designers throughout our industry. With that said though, grid design is not the end-all-be-all, as residents of Boston would be quick to point out.

Skyview of Philly and Boston

Regardless of your opinion of grid-based design, CSS is making it easier than ever for us to implement both grid and non grid based layouts.

Multi-column

Like Emmy winner Jim Parsons, multi-column has been out for awhile but without much of a big bang (I’m here all night folks). It’s quite stable and has already been adopted in all major browsers (except IE9 and below) making it an attractive option for many designers. Similar to what you often see in magazine and newspaper layouts, it makes it easy to divide content into columns. You might be saying “but I can already do that with tables or by floating columnar shaped divs side by side.” The difference here is that CSS based columns using this multi-column layout are flexible enough to allow content to automatically flow from one column to the next as opposed to needing to manually designate which cells contain what content (avoiding the risk of becoming a visual nightmare for dynamic content).

Think of it as a content canal.

Additionally, with the multi-column layout, the number of columns can automatically vary based on the viewport size, thus making it ideal for responsive design for various devices and screen widths. Removing the table markup in favor of these CSS based columns also makes content more easily presented on speech synthesizers. And anything we can do to improve accessibility is a great thing.

Multicolum Layout

It’s very simple to style using the following properties:


/* Number of columns set to 6 where each column will expand and contract its width accordingly to fit its container */`
Column-count: 6;

/* Width of each column set at 12em where the total number of columns are dependent on the width of the container */
Column-width: 12em;

/* Defines the spacing between columns */
Colum-gap: 3em;

/* Applies a column-rule in the middle of gaps */
Column-rule: 1px solid black;

With a little thinking outside the box, Chris Coyier shows us how we can use the multi-column layout to build a responsive image gallery, because images are like text in that they’re inline elements, thus behaving similarly. And let’s face it, who doesn’t like puppies and kittens:

Responsive Image Gallery

Grid Layout

Proposed by Microsoft and currently only supported on IE10, at first notice, one could view this as merely an overly convoluted way to replicate table based layout, but when you look more closely, you begin to see the major advantages that this CSS grid layout method offers.

The concept is a container acting as a grid element divided into rows and columns, and yes I realize so far that sounds just like a table. However, HTML tables are markup dependent and not very flexible. With this CSS grid layout, there is no need to define widths, heights, floats, inline-blocks, or margins simply for spacing columns apart from one other. Consequently, these grid layouts are easily adjustable for responsive design.

Grid Layout

It relies on a relatively new property called “fr,” which equates to a fraction of the available length divided by width.


#container {
  display: grid;
  grid-columns: 1fr 3fr 2fr;
  grid-rows: 10em auto 50px;}

To place element A in the 2nd column of the 2nd row, your code would look like this:


#container A {
  grid-column: 2;
  grid-row: 2;}

Such grids can be created very quickly in CSS rather than HTML releasing you from the bounds of HTML source order and giving you a much more efficient way to create responsive grid patterns.

Grid Patterns

Grid Template Layout

Not to be confused with Microsoft’s Grid layout, Grid Template Layout simply uses a series of string characters to create what are called slots that are similar to what cells are in tables. This method is also source independent, meaning the display order is independent of the source order.

Quite simply, a grid template layout can be created in CSS where each string represents a row and each letter depicts a column of the grid like this:


#container {
  grid-template:
    'aaa'
    'bcc'
    'bdd';}

Grid Template Layout

Box Alignment

While not a foundation for layout, this concept that was proposed by the box alignment module is important and highly sought after by designers because vertical alignment via CSS without table cells is not possible for dynamic heights.

To undertand how it works, realize that each on-screen element has two axes (vertical and horizontal), thus it takes two CSS properties to position your content:


Vertical: align-*
Horizontal: justify-*

Here are the common positioning properties and illustrations depicting the result:

Box Alignment

A container’s property values are also inherited by all of its child elements like so…


#container {
  align-items: end;
  justify-self: start;}

…while still affording the designer the opportunity to apply different styles to designated child elements as such:


#container A {
  align-self: end;
  justify-self: start;}

The end value value means align to the end of the axis in the direction it is going, whereas the start value predictably means align the element to be flush with the starting edge from which it’s coming.

Positioning

Similar to the box alignment module, there has already been an amendment to the Positioned Layout module, which both vertically and horizontally centers an element within its container. It sounds simple, but to make it happen it relies on the CSS Exclusions module, which is also being implemented to account for the updated wrapping options:


#container A {position: center;}

Flexbox

You could think of Flexbox as the Miley Cyrus (without the tongue) of layouts—been around for years now, although its look, or syntax in this case, has changed dramatically from when you may have first seen it. Originally rooted in Firefox’s UI language XUL, it was created for laying out user-interfaces, but has gained enough browser adoption and community acceptance to be used for less complex general page layouts as well. It is supported by all major browsers except IE9 and below and is source code independent.

Flexbox model

So what can you do with Flexbox? For starters, beginning with the centering theme we’ve been on, Flexbox also makes it easy to vertically and horizontally center elements within a container. But where the real value of Flexbox lies is in a container having the ability to alter its child elements’ height, width, and even order to best fill the available space to accomodate any screen size. Along those lines, Flexbox is also direction agnostic as opposed to most other layouts.

Another Flexbox model

So how does it work?

First, you need to place a flex value on the display property of a container:


#container {
  display: flex;
  width: 500px;}

Now let’s say your container has two child elements, A and B, which can be assigned the following values:

  • Flex-grow
  • Flex-shrink
  • Flex-basis

In shorthand, that code would look like this:


#container A {flex: 3 1 150px;} /* flex-grow flex-shrink flex-basis */
#container B {flex: 1 2 190px;} /* flex-grow flex-shrink flex-basis */

The “flex” in this example works as such: We’ve assigned the container a width of 500px, which contains two elements whose widths total 340px when added together. That leaves an extra 160px with which to flex. So based on the flex-grow ratio of 3:1 for child elements A and B respectively, we would divvy up those 160px accordingly by allocating 120px to element A and the other 40px to element B (3:1 ratio).

The flex-shrink property works similarly. Imagine in responsive web design that a media query has reduced our container down to just 250px, which is 90px less the combined width of child elements A and B (340px). The flex-shrink ratio of A and B is 1:2. So as their container shrinks, child element B shrinks three times as much as child element A in terms of width. In other words, we’re reducing element A by 30px from 150px to 120px while simultaneously reducing element B by 60px from 190px to 130px for a total of 250px for the both of them.

It takes a little planning and thinking ahead, but it’s actually quite straight forward. However, please note that Chrome, IE10, and Safari each have their own implementation of Flexbox, while older browsers may be using a dated syntax, but the general concepts remain consistent.

CSS Regions

If everything we’ve been talking about so far has been the Philadelphia of web design, the next two layouts are the Bostons of it. First, let’s talk about a more flexible layout that you might typically see in magazines, textbooks, and newspapers called CSS regions. Recall that in typical HTML pages, for content to be displayed in different areas of the page, you would need to manually fit said content into predetermined regions of the page (inside of a div for example). So you might have several divs of content on the page with each div’s content being independent of each other, which isn’t necessarily helping matters when it comes to being responsive or working with dynamic content generated by a content managment system. Perhaps you’d like to have the content naturally flow from one div to another when necessary as dictated by screen size. CSS regions gives that to you.

CSS regions

Now I must preface this by saying CSS regions can be as complex as you want it to be, but at its simplest, you would define the source of your content and the regions it is permitted to flow into like so:


#source {flow-into: theContent;}
A, B, C {flow-from: theContent;}

Like many other new CSS layout methods, CSS regions are source order independent. What makes this special, though, is how it enables you to define the order of regions in which content flows. Rather than flowing content sequentially into the “next” column, content can be flowed from any region into any other region regardless of their position on the page or the HTML source order.

CSS Exclusions and Shapes

CSS Exclusions

If you’re a web designer and familiar with CSS floats, you can probably best understand CSS Exclusions and Shapes as an extension of content wrapping that was previously limited to left and right floats. This so called extension gives way for a much more expressive web design by defining arbitrary areas around which inline content should wrap or flow. Whereas with floats that only allow you to flow content to the left or right of a floated element, here you can literally wrap content in such a way as to completely surround any positioned element:


#container A {shape-inside: circle(50%, 50%, 50%);

-OR-


#container A {wrap-flow: both;}

CSS Exclusions

Summary

So we’ve looked at multi-column, grid-layout, grid-template layout, box alignment, positioning, and Flexbox, which are all great for column or grid type layouts. We also looked at CSS regions, CSS exclusions, and CSS shapes, which really get us thinking outside of the “box” (see what I did there) in ways that can rival print design.

Do you use any of these CSS layouts already? If so, share an example of your work in your comments. I’d love to see how you’re applying these CSS methods in practice.

7-day free trial