Using CSS Grid to Layout a Page Feels Like Cheating

I have 4 things on a page. I give each thing a name - header, main, sidebar, footer. Then I get to precisely describe the space I want each thing to take up visually. It's like drag and drop, it's like paint by numbers. It's simple, it's clear...dare I say elegant.

But it was not always possible to describe CSS layout this directly. A history lesson - there were HTML table layouts, floats, positioning, and all kinds of hacks - using some property not exactly as intended to make it work, because there were no better options.

Consider this - when designers/developers were coding CSS layouts with floats and such, there were also beginners trying to learn the same approach. The beginners probably felt the same frustrations that the experienced folks did when they couldn't get the layout to work as desired. But they likely had different mindsets.

For experienced folks, it's easier to have the mindset that it's not me it's the tool/language/system/process. For beginners that mindset is a reach. It is really easy, as a beginner, to think I can't make this work. I don't get this. There are so many things I don't understand. I am not cut out for this programming thing. I should stop.

But know that if some concept doesn't make sense intuitively or if some method of doing something feels wonky, it's likely not you. It's the process of iteration that hasn't converged to an elegant solution yet (software industry is still pretty young). That doesn't mean you get to sit back or give up. Instead solve problems with what you have available, make things works with what you know and be part of the process to help figure out better solutions. At least that is a more productive mindset.

Back to that grid! Here is the CSS that makes it go:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}