Skip to content
Submitted almost 2 years ago

3 Column Preview Card

Garrett Fiorito•10
@garrett-fiorito
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How can I make the three column layout easier using CSS grid, I feel like I was working against myself this project.

Community feedback

  • Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    I see you must have updated the project - it looks better. But still I have some advices.

    first you can use on your body :

    display: flex;
justify-content: center;
align-items: center;

    It will make all items on your website centered.

    And then - please make a semantic html! in body use <main> - which will be centered by body and then in main you can use:

    display: grid;
grid-template-columns: repeat(3, 1fr);

    And in <main> instead of div class="sedans" you should in my opinion use <section> Also there should be only one <h1> tag per whole website. - I think you should use <h2> instead.

    And lastly - the mobile design.

    The change is really really simple just for your grid class put media queries e.g. like this :

    @media (max-width: 768px) {
    .grid-container {
    grid-template-columns: 1fr;
   }
}

    Or you can reverse that if you prefer mobile-first (recommended) design

    1
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted almost 2 years ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • You shouldn't use the body element as your component, let the body occupy 100% of the whole screen, within the <body> tag, you should have a <main> element and consider this element your component.

    e.g.:

    <body>
    <main>
        <div></div>
        <div></div>
        <div></div>
    </main>
</body>
    • You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires that Sedans, SUVs and Luxury are headings, but you can use the <h2> tag instead of the <h1> tag. You can read more about this here 📘.
    • You should use the <a> tag instead of the <button> tag because the Learn More button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here 📘.

    • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

    • Unfortunately, your solution is not adapted for mobile devices :(, you should use media query to change the design of the solution, you can even learn mobile first approach so that the solutions are completely responsive.

    I hope you find it useful! 😄

    Happy coding!

    1
  • S MD suleman•3,530
    @sulemaan7070Posted almost 2 years ago

    hey @garrett-fiorito😄, good work on completing the challenge.. here is how you can proceed 1.place your 3 divs in main element. and give the width of 50% to 60% to themain.

    1. make the body grid
    body{
display:grid;
place-items:center;
}

    that is how you can use the grid and proceed further..let me know if you have any further queries!! happy coding🔥🔥

    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