web: grid layout with 4 unequal columns

A single page responsive site that is content driven, sophisticated, and simple.

Play project that will be used for a live site

I started this project to get more practice using css grid, background effects, and responsive typography.

The plan was simple: use content from the real website to create a simpler and more efficient layout. I made the logo just text so it would be easier to read, removed an outdated blog, and made the site one page.

The html file includes the css for quick development. This project was all typed in TextWrangler because it’s quick for me. I started with the content sections and css grid plan. If the browser doesn’t support css grid, the viewer sees stacked content blocks like the mobile version of the site.

View the page here: http://sullivanlehdesigns.com/play-examples/gridlayout-stripes.html

Screenshot of Illustrator art.
Design and grid plan drawn out. There are 4 columns plus outside margins and a gutter between the left and right sections.
Three rows, each with a bold background color and white or light colored text.
The site as seen on an ipad
Screenshot with css grid lines showing.
Grid lines shown for the header. Most content fits within lines 3-6 but having the extra lines allows more variation.
Showing the addition of grid row lines.
Some sections also get grid rows. Using 2 rows keeps the headings uniform in different sections.

To set up the structure, I created a class:

.grid {
 display: grid;
 grid-template-columns: minmax(2rem,5rem) 1fr 1.6fr minmax(1.5rem,2.5rem) 3fr 1fr minmax(2rem,5rem);
 }

The first and last columns set the clear area to the edge of the screen so padding doesn’t need to be added to elements. This also allows background colors and images to extend the width of the screen. The columns are set proportionally to screen size using fraction units (fr). Because there is only one column gutter, grid spacing couldn’t be set so the gutter is handled as if it is a column. This comes in handy for article titles that align to that side of the gutter without using negative margins.

The header holds the navigation, logo, and a tagline. Each of these should be on its own line and take up just the right amount of space, so the area had grid rows applied, as well:

.masthead {
 display:grid;
 grid-template-rows:3rem auto auto;
 }

Which is really cool to apply to a section like this because not all sections need rows, and the ones that do need different heights.

Elements are then set to the grid. The nav is last in the html but is moved to the top right of the screen:

header .logo {
 grid-column: 2/4; grid-row:2;
 }
 nav {
 grid-column: 5/7; grid-row:1;
 }
 .site-tagline {
 grid-column: 5/7; grid-row:3;
 }

The logo is displayed as text:

.constructive {text-align:right;}
.marketing {text-align:left;font-weight:900;}
.group {text-align:center;}

The first 2 columns could have been assigned a width to ensure the logo always has nice spacing but that would limit the layout and involve some math I didn’t want to do. Instead, the logo div is targeted to specific maximum widths:

.masthead .logo {max-width:35ch; margin:0 auto;}
 @media screen and (min-width: 600px) {
 .masthead .logo {max-width:50ch; align-self:center;margin:0;}
 }

After the grid was set up, I worked on text and found this great article Viewport Unit Based Typography and used this approach for smooth scaling of the text within the responsive layout. I have not tested this in anything other than mac Firefox and Chrome, so don’t know if this will make it to the final live site.