The repeat() function in CSS Grid simplifies layouts by allowing you to define repeating track patterns with a specified number of rows or columns.

Initial CSS for this problem is already written for you. Your task in this problem is to apply css on the .container element (of 500px) as per the instruction table below. This will result in the layout as shown in the screenshot.

INSTRUCTIONS

Explanation : Applying repeated space of 200px twice will make the grid to have two columns.
because the div.container is 500px, the extra 100px gets left out.
Now, whatever is added as the third child of div.container element, will fall in the second row of div.container element.
this example is a simple step towards building intuition about how css grid works.

CSS Selector	CSS Styling
div.container	display:grid;
	grid-template-columns : repeat(2,200px);

- Final








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!