All comments

• 

  shemjay• 140

  @shemjay

  Submitted over 2 years ago

  How can I improve on my grid for the image gallery?

  Any other site improvement recommendations are much appreciated.

  

  Loopstudios landing page CSS grid and flexbox

  1

  40

  

  Joshua Manansala• 265

  @T4R0TARO

  Posted 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

  This comment has received 1 replyShow
• 

  Shofiya• 60

  @Shofiya2003

  Submitted about 3 years ago

  Feedback on improving code will be embraced.

  

  HTML,CSS,CSS-grids

  1

  10

  

  Joshua Manansala• 265

  @T4R0TARO

  Posted about 3 years ago

  if you want to remove the default focus outline surrounding your <input> apply the css property { outline: none; }. Happy coding 👋

  0