Development Web

Simple, Responsive CSS Grid Page Layout

June 25, 2019
Simple, Responsive CSS Grid Page Layout

I’ve laid pages out many dif­fer­ent ways, but my favorite is using CSS grid along with a few oth­er tricks. The exam­ple below is vanil­la HTML/CSS; how­ev­er, the con­cept can be adapt­ed to any SPA framework.

Before going into the full exam­ple, I’ll point out a few inter­est­ing tidbits.

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
}

This ensures the body occu­pies the full screen height, allow­ing us to stick the page foot­er to the bot­tom if the con­tent isn’t tall enough to push it off­screen. The vh unit is view height” and 100vh means 100% of the view height.”

.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, nam­ing each line of the grid (names fall nice­ly between the [ ] brack­ets). In the full exam­ple, you will see how we restruc­ture the grid through media queries. As long as all of our line names are present, the page will reflow seam­less­ly, offer­ing a clean entry point into high-lev­el, respon­sive design.

.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 head­er should occu­py using the named lines from the grid definition.

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

The above approach allows the head­er to remain at the top of the page when scrolling. You can choose a dif­fer­ent val­ue for top to get it to stick to a dif­fer­ent point. The ben­e­fit of position: sticky over fixed or absolute is that it allows the head­er to con­tin­ue to be a part of the lay­out of the grid. With some­thing like position: fixed you would need to add some top mar­gin to the con­tent to com­pen­sate for the height of the head­er. Less than ideal.

.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 sim­ply a way to lay out the box­es to give the con­tent the nec­es­sary height.

And, final­ly, the full exam­ple is here.

Phone

Wide Screen

Nar­row 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.

MichiganLabs named #1 iOS Development Company by MobileAppDaily
Business iOS Press Release

MichiganLabs named #1 iOS Development Company by MobileAppDaily

January 28, 2020

The report features leading iOS companies of the mobile app industry, who have made themselves known because of their exceptional app development services.

Read more
MichiganLabs to double workforce as part of expansion
Team Press Release

MichiganLabs to double workforce as part of expansion

October 10, 2019

“As our clients continue to grow and evolve, we intend to serve them best by growing along with them,” explains Michigan Software Labs co-founder and managing partner, Mark Johnson. “Organizations are increasingly seeing how technology can serve their customers and grow their businesses. Developing the right custom software gives companies a clear market advantage.”

Read more
App Architecture Series: Building a Better User Interface
Development

App Architecture Series: Building a Better User Interface

October 21, 2019

At Michigan Software Labs, we don’t simply write code to satisfy requirements. We find ways to solve problems efficiently and effectively. Knowing that a well-structured application comes down to a set of techniques and patterns, I have been exploring design pattern theories and how they shape our thinking.

Read more
View more articles