All comments

• 

  Yeni•180

  @YeniUvwoSubmitted 12 months ago

  my middle boxes kept getting squashed when scaling down between my screens

  

  Responsive design using css flexbox

  2

  30
  

  P

  jumiranda5•280

  @jumiranda5Posted 12 months ago

  Hi! I couldn't figure out why the middle column is shrinking more than the others... but have you tried using flex-grow: 1? w3 flex-grow

  Marked as helpful

  0
• 

  Josh Michael•1,050

  @joshmichael23Submitted 12 months ago

  I've been using flexbox a lot for my project and used the flexbox for the main container of the cards to have flex-direction: row. As for the middle part I used flex-direction: column. Could this be done using display: grid?

  Any feedback would be appreciated. Thank You!

  

  Responsive Four Card using Flexbox

  1

  40
  

  P

  jumiranda5•280

  @jumiranda5Posted 12 months ago

  Hi, Josh! Yes, you can use grid... I finished this challenge a few days ago and I used grid layout with grid-template-area this way:

      .cards-container {
          margin-top: 4rem;
          grid-template-areas: 
              '.  c2  .'
              'c1 c2 c4'
              'c1 c3 c4'
              '.  c3  .';
      }
  
      .card1 { grid-area: c1; }
      .card2 { grid-area: c2; }
      .card3 { grid-area: c3; }
      .card4 { grid-area: c4; }
  
  

  You can read more about grid-template-areas on MDN: grid-template-areas

  All the best!

  2