CSS Challenge #4

Grid Auto-Placement Practice

Create a grid layout with 4 equal-width columns and a 10px gap between all rows and columns. Observe how grid items automatically place themselves.

1
2
3
4
5
6

Grid Placement and Overlapping

Use manual placement to position items in a 3x3 grid. Item 3 should overlap item 1 and item 2.

1
2
3

Fix the Broken Grid

An AI tool generated CSS in order to create the layout pictured below, however, the generated code is not working as intended. Identify and fix the mistakes in the CSS to nsure that the layout displays the correct structure.

intended layout

Header

Main Content