Grid layout HTML CSS Grid Flexbox

Community feedback

• 

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  Nice work @b4n1y4

  I recommend taking a look at grid. It is a good candidate for this type of challenge(when dealing with both column & rows at the time).

  However you may need to change your markup, all your cards will be under the same parent so that grid can control them nicely.

  Here is how:

  display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-areas: "a a b c" "d e e c";
      gap: 2rem;
  

  Let me know how it goes if you give it a try.

  Marked as helpful

  1

  ---

  

  Ritesh_Gupta•520

  @b4n1y4Posted over 3 years ago

  @jmnyarega Thanks man!! Really appreciate it... I have not really worked much with grids.... I tried using using this code, it doesn't seem to work... You can fork the source code and try it out.... If it works, send a PR.. Thank you so much man!! ✌

  0

  

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  @b4n1y4 I have created a PR with a grid configuration using grid-areas.

  btw, I have never used GitHub forks before, don't know if I did it right :)

  0

  

  Ritesh_Gupta•520

  @b4n1y4Posted over 3 years ago

  @jmnyarega I merged the request. There were issues with the minmax widths you had set for columns so i just changed them to 4 frs.... Thanks for the help man!!! It works now ✌

  0

  

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  @b4n1y4 I am glad you now understand the concept of grid-layout.

  0