Single price grid component

Hey Momin,

To answer your question about using grid in flex or vice-versa, yes you absolutely can. They work extremely well with each other actually!

I strongly recommend you taking a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes so you can help bring your projects to life.

Good job!

Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

The body has a wrong background-color. Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

There is no need to style the main, to center .card on the page using grid, add min-height:100vh; display: grid place-items: center to the body

body{
min-height: 100vh;
display: grid;
place-items: center;
}

Give .card a fixed max-width value , display: grid and grid-template-columns:1fr 1fr; in the mobile design change the value of the grid-template: column to 1fr; max-width: 600px.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hi! To my knowledge you can totally use grid inside flexbox elements. Think of each element as a container, the flexbox -grid attributes only modify the disposition and size of the element. But still, each conserves the state of being a simple container.

One recommendation I would give you is to use Mozilla as your browser when debugging flex-grid items. Mozilla devtools is better optimize for dealing with them, look into it, best luck!