Skip to content
Submitted almost 3 years ago

CSS Grid

sass/scss
Nikita Toropov•350
@tossik8
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I used CSS grid for this task and came across a problem. When I made the grid layout for 375-px-wide screens I changed the number of columns to 1. For desktop devices I had 2 columns, and expected that setting grip-template-columns to 1 would change it. However, it did not work. All my sections are in 1 column as I intended them to be, but there is another column, which does not contain anything, and it creates extra redundant space on the right which I don't know how to remove. The question is, how do I remove that column?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Anton•515
    @antarya

    Hi 👋,

    Good work on this challenge 🚀.

    CSS

    [1. Regarding your question. You have width: 50% on body main .elements which sets elements width to 50%. The grid works as expected; it is not an extra column but one with elements width set to 50%. In Chrome, there is a grid badge/toggle under the Elements tab of DevTools for the elements with display: grid; by toggling it, you will see the outline and additional info about the grid.

    [2. Use CSS reset to have a good starting point, for example:

    [3. You will have issues if you customize styles for specific text lengths. You need to make a layout adaptable to any text length, as the length of the text is unpredictable. Start by removing fixed widths, allow elements to grow and restrict using (max|min)-(width|height) when needed; remove unnecessary margins.

    HTML

    [4. Do not use main tag as a wrapper of your panel, instead add div tag for your panel <main><div class='panel'>...</div></main> as a child of main tag.

    General

    [5. Take a look at a different approach where you first define default styles for narrow screens and add features for wider screens.

    [6. To name your classes consistently, check BEM, and to structure it in a reusable way, take a look at CUBE CSS. It will allow to reuse styles or make them easily customizable without deep nesting. Imagine a situation where you need to inject another element before body main .elements:nth-of-type(2) button { this will require changes that are not straightforward, compared to if you had .panel__subscribe button, or even better to style .button so it can be reused. Check these resources for additional information:

    I hope this will be helpful.

    Keep up the good work 🚀. Cheers!

    Marked as helpful

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