Grid Part - 1

Static HTML

CSS styling

Responsive CSS

What are competencies?

EXP:

Problem statement

Lets get started with CSS! Control the items of flexbox container.

Welcome, developers! Your task is design a grid box having 9 children, also place all these 9 children into 3 column grid-layout. Focus on using CSS display grid to make gridBox container.

Task for students

Must to have
- element with 'gird-container' class contains 9 children each having 'grid-item' class.
- 'grid-container' class style the element with grid display, 10px padding, 400px width and height, orange background color, and place all the 9 children into three columns.
- 'grid-item' class style the element with bisque background color, 120px height and width and 20px text size.

UI reference

Use the given provided code and try to mirror the UI.

Evaluation

After submission, your solution will be evaluated automatically based on the tasks defined above.
Upon successful completion of all the tasks/requirements, you will get a full score, and there will not be any partial scoring.
You can work on your failed test cases & resubmit your solution.
Your problem will get evaluated instantly.

Do’s & don’t

Use the given code structure in editor and do not make any changes.
Do not modify existing classes or tags.
Focus on correct HTML structure and class names.

Query & feedback

In case of any query/feedback on this project, please fill this form & we will soon get in touch with you to resolve.

Best of luck, developers!