HTML Academy
Aligning items on both axes I
CSS Grid #412/21
Back to the list of tasks
  • 1. Horizontal alignment property I
  • 2. Horizontal alignment property II
  • 3. Horizontal position of items I
  • 4. Horizontal position of items II
  • 5. Horizontal position of items III
  • 6. Vertical alignment property I
  • 7. Vertical alignment property II
  • 8. Vertical position of items I
  • 9. Vertical position of items II
  • 10. Vertical position of items III
  • 11. Aligning items on both axes I
  • 12. Aligning items on both axes II
  • 13. Horizontal alignment property for one item
  • 14. Horizontal position of one item I
  • 15. Horizontal position of one item II
  • 16. Vertical alignment property for one item
  • 17. Vertical position of one item I
  • 18. Vertical position of one item II
  • 19. Aligning one item on both axes I
  • 20. Aligning one item on both axes II
  • 21. Overall alignment and an exception
Horizontal alignment property for one item
  • Sign up
  • Log in

Loading…
Everything will be ready in a few seconds.

  • Challenge

Aligning items on both axes II

Recreate the target with code
DifficultyEasy
CategoryHTML/CSS
Current
Your current page
Target
The result to match
ResultAppears after the first checkAppears after checking
  • index.html
  • style.css
HTML
CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Challenge</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="local-12.css"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="scene"> <div class="grid grid--cells"> <div class="brick brick--six"></div> <div class="brick brick--one"></div> <div class="brick brick--two"></div> </div> </main> </body> </html>
.grid { display: grid; grid-template-columns: 120px 120px 120px; grid-template-rows: 120px; justify-items: {{justifyItems}}; align-items: {{alignItems}}; }
-2
Preview

The code has changed. Click “Reload” or turn on autorun.

You have left the challenge page.

Click inside the preview to focus this window.

100%
0
    Completed 0%.

    Challenge completed

    Extra moves
    Continue

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

    VISAMastercard

    We are using cookies to gather information which will help you use our website most effectively. You can read about this here or disable this feature if you want. By continuing to browse the site, you agree to our use of cookies.