Loopstudios landing page CSS grid and flexbox

Community feedback

• 

  Joshua Manansala•265

  @T4R0TAROPosted over 2 years ago

  Great job completing the desktop layout portion of the project! 👍 When you move on to the mobile layout, you can improve your grid to adjust to the size of the screen.

  // your code 
  .grid-display {
      display: grid;
      grid-template-columns: repeat(4, 250px);
      grid-template-rows: 1fr 1fr;
      grid-column-gap: 1em;
      grid-row-gap: 1em;
  }
  
  // REFACTOR
  .grid-display {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      grid-gap: 1rem;
  }
  

  • auto-fill: automatically fills the grid with grid-items
  • minmax: set the minimum and maximum size of the grid item
  • grid-gap: shorthand since your gaps are the same size

  Continue the great work! Happy coding 😊

  Marked as helpful

  1

  ---

  

  shemjay•140

  @shemjayPosted over 2 years ago

  @T4R0TARO Thank you so much! I had a hard time figuring that out

  1