DEV Community

Cover image for CSS Interview Question: Create Responsive Design (1 Column / 3 Column)
Let's Code
Let's Code

Posted on

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

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode
// CSS Grid
@media (min-width: 500px) {
  .columns { // parent
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Enter fullscreen mode Exit fullscreen mode

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)

For those who prefers video format

Top comments (1)

Collapse
 
frontendengineer profile image
Let's Code • Edited

Should CSS Technical Questions or CSS Coding Challenges be skipped on a front-end job interview? Why?