Bento Grid - Vanilla HTML and CSS

Community feedback

• 

  mashofa•350

  @mbank14Posted 3 months ago

  Hello, great job earlier! Using CSS Grid can indeed be a bit tricky sometimes. Before diving into the grid, my suggestion is to set the media query at min-width: 1200px and create a .container class with max-width: 1440px:

    .grid-container {
      display: grid;
      justify-content: center;
      grid-template-columns: 300px 300px 300px 300px;
      /* add new properties */
      grid-template-rows: repeat(4, auto);
    }
  
    .social-media {
      grid-column: 2 /4;
      grid-row: 1 /2;
    }
  
    .multiple-accounts {
      grid-column: 2 /span 1;
      grid-row: 2 /4;
      overflow: hidden;
    }
    
    .consistent {
      grid-column: 3 /span 1;
      grid-row: 2 /4;
    }
    
    .create {
      grid-column: 1 /span 1;
      grid-row: 1 /3;
    }
    
    .ai {
      grid-column: 1 /span 1;
      grid-row: 3 /5;
    }
  

  Great job, I hope this helps!

  0