Create diverse card layouts using a single grid or Flex: a practical guide

Question

I'm trying to make a responsive card layout as shown in the picture.

Currently what I'm doing is creating separate layouts for computers, tablets, and mobile devices. Then with the help of media query I set the display property of the other two views to display: none .

Example: If I'm in Computers view, the computer's card layout will not have the display set to "none", while the other two computers' display will be none.

This works, but results in a lot of redundancy. There is a way to achieve all three layouts using Flex or Grid.

Please guide me.

Answer 1

You don't have to set display: none every time you want a certain design for a screen size. Media queries brings something called breakpoints where you can specify the width of the screen (e.g. min-width: 768px). For mobile screen sizes, just put the css under media queries and set max-width: 600px. Additionally, you can use the orientation attribute to differentiate between landscape or portrait mode.
More information about queries and screen sizes

//for mobile
    @media query and only screen(max-width: 600px) 
    {
        display:flex;
        //some more css-code
    }
    
//for tablet
    @media query and only screen(min-width: 600px) 
   {

    display: flex;
   //some more css-code

   }
   
//for desktop size
   @media query and only screen(min-width: 768px) 
  {
     display: flex;
     //some more css-Code
  }

Make sure to follow
MDN Guidelines

Answer 2

Flex makes this easy.

Depending on the screen width, you can add media queries as shown below and you can adjust the box width and max width to resize the box.

/* tablet view */
@media only screen and (max-width: 768px){
    .parent-container {
        max-width: 320px;
    }
}


/* mobile view */
@media only screen and (max-width: 480px){
    .parent-container {
        flex-direction: column;
        align-items: center;
    }
}

You can viewhttps://jsfiddle.net/rx4hvn/wbqoLe0y/35/

Hope this helps!