Four card feature section

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello Barney congrats on finishing the challenge! good job getting that grid practice out!

  First of all I would like to say that im impressed, this is probably the biggest grid I have ever seen man! haha, anyway, I think you could go for a simple way just using 3 columns with the same width, and 2 rows with the same height, you could try something like this:

  Setting up the grid as a 3 columns and 2 same rows.

  .cards-cont {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
    align-self: flex-start;
  }
  

  Supervisor uses 1 column and two rows, and then gets center between the two rows:

  .supervisor {
    grid-column: 1/2;
    grid-row: 1/3;
    align-self: center;
  }
  }
  

  Team Builder gets second column and only 1 row:

  .team-builder {
    grid-column: 2/3;
    grid-row: 1/2;
    margin-top: 0;
  }
  

  Karma gets the same column but the next row:

  .karma {
    grid-column: 2/3;
    grid-row: 2/3;
    margin-top: 0;
  }
  

  And Calculator goes the same as supervisor but goes at the last column:

  .calculator {
    grid-column: 3/4;
    grid-row: 1/3;
    margin-top: 0;
    align-self: center;
  }
  

  With align-self: center on the single cards that need to be positioned different you get the desired effect!

  And don't worry with time you will see the grid in the screen without even writing code first, it will come with time and practice!

  Hope my feedback helped you! Good job!

  Marked as helpful

  1