CSS Interview Question: Create Responsive Design (1 Column / 3 Column)

#css #show #tutorial #programming

I went on numerous job hunting 💼 this year and noticed that most of the interview questions revolve around javascript and it is totally understandable.😞 No CSS/HTML.

Those other interviews that contain CSS technical questions 🤔, I was asked to write a responsive layout - 1 column for small screens and 3 columns for wider screens.

Just like any given problems, there are many solutions to this question. Hopefully, you do not present the old way of doing things which is to use table, or float like below 🚫.

// CSS Float
@media (min-width: 500px) {
  .column {
    width: 33.33%;
    float: left;
  }
}

My recommendation would be either css flexbox or grid which would like below.

// CSS Flexbox
@media (min-width: 500px) {
  .columns { // parent
    display: flex;
  }
  .column { // child
    flex: 1;
  }
}

// CSS Grid
@media (min-width: 500px) {
  .columns { // parent
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

CSS is a skill that needed by every front-end developer/engineer although it is not the favorite skill. One should be able to write elegant and minimal CSS rules.

What is your take on this? Should CSS questions or challenges still be asked on a front end interview or we can assume that engineer should know it as it is not a programming language?

Codepen: https://codepen.io/collection/pgbEQM (If you want to play around these three approaches)