Submitted almost 2 years ago

Single-price-grid

od•80

@oguerid

Preview site View code

This is a solution for...Single price grid component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

HI all, this the first time i have used CSS grid can i get some feedback was not sure if i used it the best way to do thing.

-is it good practice to use css grid on mobile because in flexbox you can use flex-direction: column

Community feedback

Jeck•1,080

@j-tomajinPosted almost 2 years ago

HELLO! it is really a good practice using grid with this kind of projects

in mobile you can use grid-template-column: 1fr, just like in flex-direction: column; , all of your section will only keep 1 fraction of space.
in desktop, you can also use:

.container {
   display: grid;
   grid-template-area:
      'top-section top-section'
      'middle-section bottom-section';
}

// setting grid area
.top-section {
   grid-area: top-section;
}
.middle-section {
   grid-area: middle-section;
}
.bottom-section {
   grid-area: bottom-section;
}

or just simply:

.container {
   display: grid;
   grid-template-column: repeat(2, 1fr);
}

.top-section {
   grid-column: span 2;
}

if you want to know more about Grid, here's Kevin Powell's video about it...

Marked as helpful

Please log in to post a comment

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