Development Web

Simple, Responsive CSS Grid Page Layout

June 25, 2019
Simple, Responsive CSS Grid Page Layout

I’ve laid pages out many different ways, but my favorite is using CSS grid along with a few other tricks. The example below is vanilla HTML/CSS; however, the concept can be adapted to any SPA framework.

Before going into the full example, I’ll point out a few interesting tidbits. `css body { min-height: 100vh; margin: 0; display: grid; } `

This ensures the body occupies the full screen height, allowing us to stick the page footer to the bottom if the content isn’t tall enough to push it offscreen. The vh unit is “view height” and 100vh means “100% of the view height.”

`scss .app { display: grid; grid-template-rows:

[header-start]
  min-content
[header-end content-start side-start]
  1fr
[content-end side-end footer-start]
  min-content
[footer-end];

grid-template-columns:

[header-start content-start footer-start]
  auto
[content-end side-start]
  300px
[side-end header-end footer-end];

} `

The above sets up the page with a grid, naming each line of the grid (names fall nicely between the [ ] brackets). In the full example, you will see how we restructure the grid through media queries. As long as all of our line names are present, the page will reflow seamlessly, offering a clean entry point into high-level, responsive design.

`css .header { // ... grid-row: header-start / header-end; grid-column: header-start / header-end; // ... } `

The above allows us to define what part of the grid the header should occupy using the named lines from the grid definition.

`css .header { // ... position: sticky; top: 0; // ... } `

The above approach allows the header to remain at the top of the page when scrolling. You can choose a different value for top to get it to stick to a different point. The benefit of position: sticky over fixed or absolute is that it allows the header to continue to be a part of the layout of the grid. With something like position: fixed you would need to add some top margin to the content to compensate for the height of the header. Less than ideal.

`css .content { padding: 20px; grid-row: content-start / content-end; grid-column: content-start / content-end;

background: green;

display: grid; grid-template-columns: repeat(auto-fill, 500px); grid-template-rows: 300px;

grid-auto-columns: 500px; grid-auto-rows: 300px;

grid-auto-flow: dense;

grid-row-gap: 20px; grid-column-gap: 20px;

justify-content: center; } `

The above is simply a way to lay out the boxes to give the content the necessary height.

And, finally, the full example is here.

Phone

Wide Screen

Narrow Screen

Jeff Kloosterman
Jeff Kloosterman
Development Practice Co-Lead

Stay in the loop with our latest content!

Select the topics you’re interested to receive our new relevant content in your inbox. Don’t worry, we won’t spam you.

Michigan Software Labs breaks ground on new office
Press Release

Michigan Software Labs breaks ground on new office

June 19, 2020

Michigan Software Labs recently broke ground on a new office building in its hometown of Ada. The 16,500-square-foot, three-story building will have office space for the growing software company and support up to 75 team members. The company currently is hiring for developers, UX designers and project managers.

Read more
Why Agile Works to Provide Purpose
Process

Why Agile Works to Provide Purpose

December 23, 2019

As the Delivery Practice Lead, I have the opportunity to meet with executive leaders and stakeholders across a wide range of industries. I get to see the impact that an Agile process can make in the life of an organization and a team.

Read more
6 Tips for Facilitating Effective Roadmapping and Story Mapping Sessions

6 Tips for Facilitating Effective Roadmapping and Story Mapping Sessions

June 28, 2019

Roadmapping and story mapping are effective ways to align teams around a set direction. It can even help facilitate future conversations of prioritization and backlog grooming.

Read more
View more articles