HTML Academy
Summary of “Creating layouts using grids”
Introduction to Grid Layout21/32
Back to the list of tasks
  • 1. The grid item’s position: grid-row-start and grid-column-start
  • 2. The grid item’s position: grid-column-start and grid-column-end
  • 3. The grid item’s position: grid-row-start and grid-row-end
  • 4. Negative values for grid-column-start and grid-column-end
  • 5. Negative values for grid-row-start and grid-row-end
  • 6. Grid item overlay
  • 7. Overlaying grid items and the z-index property
  • 8. Summary of “Grids: positioning grid items”
  • 9. Test: Building bridges
  • 10. Named grid areas: the grid-template-areas property
  • 11. The grid-template-areas property and empty grid areas
  • 12. Automatic coordinates of the grid items: columns
  • 13. Automatic coordinates of elements in the grid: columns and rows
  • 14. Combining automatic and explicit coordinates
  • 15. Combining automatic and explicit coordinates, part 2
  • 16. Unfixed column width
  • 17. Unfixed column and row widths
  • 18. Grid spacing: the gap property
  • 19. Grid spacing: the row-gap and column-gap properties
  • 20. Summary of “Creating layouts using grids”
  • 21. Test: Laying out a park
  • 22. Laying out a simple page: creating a grid
  • 23. Laying out a simple page: the header
  • 24. Laying out a simple blog page: the promo block
  • 25. Laying out a simple page: the sidebar
  • 26. Laying out a simple blog page
  • 27. Laying out a simple page: the final step
  • 28. Laying out the online store catalog: creating an internal grid
  • 29. Laying out an online store catalog: the “Sort by” block
  • 30. Laying out an online store catalog: the filter block
  • 31. Laying out an online store catalog: the final step
  • 32. Test: The grid layout of a page
Laying out a simple page: creating a grid
  • Sign up
  • Log in

Register to take up challenges

Registration will only take a minute and let you save your study progress. You can register with your email and password or login via social networks.

or
Log in and continue
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test: Laying out a park</title> <link href="world.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="world world--exam"> <div class="land land--rectangle land--pattern"> <div class="element element--grass element--simple element--1">1</div> <div class="element element--grass element--simple element--2">2</div> <div class="element element--rocks element--simple element--3">3</div> <div class="element element--rocks element--simple element--4">4</div> <div class="element element--water element--simple element--5">5</div> <div class="element element--water element--simple element--6">6</div> <div class="element element--sand element--simple element--7">7</div> <div class="element element--lava element--simple element--8">8</div> </div> </body> </html>
CSS
.land { display: grid; width: 540px; gap: 20px; } .element--1 { } .element--2 { } .element--3 { } .element--4 { }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

100%
  • Goal
  • Result
  • Overlay
  • Differences
  • ?

Press Compare to send your code for review.

Failed to load the goal. Try later.

Goal — the interface you need to get.

Result — the way the server sees your code. Can differ from what you see in the mini-browser. The comparison is made between this result and the goal.

Overlay — semi-transparent result is shown above the goal.

Differences — the map of differences between the goal and the result.

Done 0%.
The code has been changed

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

VISAMastercard