Four cards section solution using mobile first approach

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  Hi, @kanuos. It's a good solution. Keep coding. I have some suggestions for you.

  Yes, I know how this feels. When I start a project, I think it'll be easy, but these projects are really hard. I spent too much time on these projects, and at some point I just wanted to finish them as soon as possible, like using position: absolute :) But now, I don't even remember how I built the grid layout for this project :)

  Anyway, you can use grid-template-areas for the page layout:

      grid-template-areas:
        "col1 col2 col3"
        "col1 col4 col3";
  

  And you should give the name to the items:

    .card-item--1 {
      grid-area: col1;
    }
  

  Everything will be easy with modern CSS properties.

  Another little thing is, I would prefer article over ul>li for semantic meanings. I have seen a lot of implementations with ul>li. There are lots of fans here but article is more modern than that. We can use article for iteration areas.

  I hope these will help you to improve your perspective. Keep coding. All the best.

  Marked as helpful

  0

  ---

  

  Sounak Mukherjee•560

  @kanuosPosted over 1 year ago

  @adonmez04 Really appreciate the feedback. Yes, I was thinking of going with the article tags initially but I refrained from doing so thinking - these are not articles or list of articles. They are merely some cards in a list - they don't provide sufficient details to be marked as individual articles themselves. At best, they could be identified as segments or sections on the page. If this page was part of a bigger project, maybe these cards would be expandable to corresponding pages or modal displays or something. But yeah, I get your point.

  I'll however go back and implement the grid-area approach to code the alignment as I am definitely not happy with the position:absolute solution. Thanks for the kind words and suggestions. :)

  1