Skip to content
Submitted over 3 years ago

Four Card Feature Section using (S)CSS Grid

Fraser Watt•1,790
@fraserwat
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. This was the first time I'd used CSS Grid (and I think it shows!). I'm sure there must be a more elegant way of positioning my card items than doing different grid row/col configurations in a bunch of media queries in SCSS. Any feedback on this v much appreciated.

  2. Issue with footer - setting position: absolute; bottom:0; positions it correctly in desktop but when the width of the page gets narrow enough to push the boxes down, my footer seems to break and it becomes a floating element. However, when footer set to position: relative; bottom: 0;, it fixes the issue of floating over the CSS grid, but on desktop its too high up (close to the feature cards, which I've kept as is the "least broken" result). Any ideas on this?

Aside from those two (quite minor) issues I'm quite proud of this one! 😊

Community feedback

  • Grace•31,270
    @grace-snowPosted over 3 years ago

    What happens between 640 and 768px? (I don't think you need that first media query 😉)

    Try adding min-height 100vh to your body see if that solves the footer issue you mention (which I can't see by the way, previewed on mobile)

    Anyway this is nice, good work ☺

    1
    Grace•31,270
    @grace-snowPosted over 3 years ago

    You might enjoy grid template areas instead of grid lines at each breakpoint BTW. I find it a lot simpler.

    And I wouldn't bother about ie. In a real project autoprefixer or similar would output what it needs automatically anyway.

    Last tip - use classes for styling, and consider nth child for the grid items

    Good luck

    1
    Fraser Watt•1,790
    @fraserwatPosted over 3 years ago

    @grace-snow ok cool thanks! on the "classes instead of ids" point, am i right in thinking that id's are mostly used for javascript identifiers?

    Just updated with grid-template-areas - what a great feature! Literally cuts the number of media queries i had in half.

    0
    Grace•31,270
    @grace-snowPosted over 3 years ago

    @fraserwat no I wouldn't use ids as identifiers in javascript, I use js- prefixed classes. That way there's no chance of javascript being broken accidentally (by me or other devs changing an ID) and means I can queryselectorAll

    IDs are unique anchors. So they are used for linking between places in the html. That could be navigational jump links, for label elements in forms, for aria- attributes etc

    1
  • Kofi Nartey•650
    @kofinarteyPosted over 3 years ago

    Hey, great stuff you have here. Not that it really is a problem, but the content get squished when you go beyond 300px . I suggest you consider adding a min-width of 375px, that way you can't squeeze the site beyond that.

    Great work however.

    0
    Grace•31,270
    @grace-snowPosted over 3 years ago

    @kofinartey what do you mean by 'go beyond'? You mean smaller than 375px?

    My phone is only 320px wide, so a min width that large would break layout on my mobile. Usually 280-300 is the minimum screen width we design for. Smaller than that would be specific media queries for devices like watches

    0
  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey good job working on that one. Regarding your questions

    1. Grid column and row configuration in different breakpoints is all okay, nothing wrong with that, that is what grid is made for, to create different layouts when you like in a certain breakpoint right.

    2. Your footer seems fine? It is okay when I view them, did you already fixed it? Then you don't have to position it relative and setting it to bottom, since nothing of your element is positioned to go out of flow. Your footer will work without having those 2 styling^

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord