Submitted about 3 years ago

Responsive HTML using CSS Grid

Antonio TS• 60

@antoniotullyspinozzi

Preview site View code

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Gradually teaching myself HTML / CSS, first time handling Grid.

My main complication I encountered was with the container shadow. The only way I could figure out how to do it was to create it in its own div. The end effect is fine but I am sure there must be another way of coding it, so would appreciate a heads up with that please.

Also would like some feedback on how I handled the site's responsiveness.

Thanking you.

Community feedback

drallas• 375

@Drallas

Posted about 3 years ago

Hello Antonio

Nice solution... I'm working on this one at the moment, also using grid layout...

I noticed a view things border-radius: 0.4375rem 0.4375rem 0.4375rem 0.4375rem; could be shortened to border-radius: 0.4375rem; The mobile version keeps on expanding vertically if i increase the viewport, i think it would be better to fix it like the desktop version.

better to use rem over px unless you have good reason for px!
box shadow code is a bit long 0px 15px 30px 0px rgba(0,81,171,0.15); will do fine. I'm a bit lazy so used a cssboxshadow generator with the values from the Figma file, just aplied it on the grid container.

I hope it helps.

Antonio TS• 60

@antoniotullyspinozzi

Posted about 3 years ago

@Drallas thanks for all your tips. I really need to investigate how to set-up responsiveness properly as it's not sitting right with me yet.

drallas• 375

@Drallas

Posted about 3 years ago

@antoniotullyspinozzi research is part of the fun of web-design; there are so many different ways to technically approach a project. Good luck improving your solution.

Antonio TS• 60

@antoniotullyspinozzi

Posted about 3 years ago

@Drallas that's one of the very interesting reveals. Something so simple can be delivered in so many different ways... just like all languages.

Account Deleted

hi @antoniotullyspinozzi, Excellent the final work of your project. Let me comment something

The respinsive is missing. This is to help display on mobile devices.
Your container must not cover the entire screen space (in my project I did it using flexblox). And this is where the shadow property comes in, which applies to a box, in this case your container and as it has a defined size, it will be more favorable for you and you will no longer create another div.

Antonio TS• 60

@antoniotullyspinozzi

Posted about 3 years ago

@zerogame4 thank you for your advice. Duly noted about the responsive command in the index.html, updated. Will need to research Flexbox and try implementing it. Is that as a replacement for Grid or in tandem?

Account Deleted

Flexbox and Grid help us to better implement our project. I implement both in my projects, because they help you in certain cases. In this project to put it in the center I have used Flexbox to the container and inside this I use Grid to be able to divide the sections. I leave you this simple flexbox game https://flexboxfroggy.com/ and from grid https://cssgridgarden.com/ which will help you understand how it works. Happy coding.

Antonio TS• 60

@antoniotullyspinozzi

Posted about 3 years ago

Thank you @zerogame4, I'll be sure to play/learn.

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