Grid Challenge
Explore CSS grid techniques by placing and spanning zombie elements across rows and columns without changing HTML order. Understand grid-template, grid-row, grid-column, and alignment properties to create flexible, responsive layouts. This lesson helps you practice real-world grid challenges for advanced styling control.
We'll cover the following...
Challenge
Use grid properties to style the zombies’ positions and placement. The basic set of styling has been done for your ease.
The grid should consist of two rows and three columns with a total of four child elements. The first zombie Major Thomas J. McGillicutty should be on the left side of the first grid element. The second zombie Wayne J. Bebop should be on the right side of the second grid element. The third zombie Sterling K. Stealth should be on the bottom of the third grid element and this element should span vertically till the end of the second row. ...