When to use flexbox vs CSS grid

Photo by CoWomen on Unsplash

For everyone that is interested in applying for a frontend engineer position(including me at the moment), there is an interesting question that I thought about today:

When do we use css grid vs flexbox?

Answer:

• CSS Grid is good for two dimensional layouts. If you need explicit positioning of where each item is placed, CSS grid supports that via grid-template-area, grid-template-row, grid-template-column. A sample css file that utilize these properties can look like this:

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    ".  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

Over here, we have a page element where we describe the grid-template-areas. Think of it as a way to specific which items goes to which order. Here we say for elements that have page as a class, their child element that is a “header” goes on top of the layout. Second is nav main and so on, with each of the elements appearing in the order specified by “grid-area”.