CSS Grid

Two-dimensional layouts with rows and columns.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

CSS Grid lays out content in rows and columns at the same time.

display: grid turns an element into a grid container.
grid-template-columns: 1fr 2fr 1fr; defines three columns; fr means a fraction of the free space.
repeat(3, 1fr) is shorthand for three equal columns.
repeat(auto-fit, minmax(150px, 1fr)) creates a responsive grid with no media queries.
grid-column: span 2 makes an item cover two columns.
grid-template-areas lets you name areas and draw the layout with words.

Key Takeaways: CSS Grid

Mastering CSS Grid helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Grid Code Example

CSS

<style>
  .layout {
    display: grid; gap: 8px; color: white; font-family: Arial;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "head head" "side main" "foot foot";
  }
  .layout > * { padding: 14px; border-radius: 8px; }
  header { grid-area: head; background: #071A2F; }
  aside  { grid-area: side; background: #14B8A6; }
  main   { grid-area: main; background: #2563EB; }
  footer { grid-area: foot; background: #0B2441; }

  .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-top: 12px; }
  .gallery div { background: #DBEAFE; padding: 20px; text-align: center; border-radius: 8px; }
</style>

<div class="layout"><header>Header</header><aside>Sidebar</aside><main>Main</main><footer>Footer</footer></div>
<div class="gallery"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

Free sign-in required · Google login available

CSS Grid Practice Exercises

Check what you learned in “CSS Grid”.

/ 3 solved

Fill in the blank

Create three equal columns.

.grid {
  display: grid;
  grid-template-columns: ;
}

✓ Correct! Not quite. Try again.

Multiple choice

What does the fr unit mean?

A fraction of the free space A fixed number of pixels Font-relative size A frame

✓ Correct! Not quite. Try again.

Code challenge

Make .grid a grid with 2 equal columns.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS Grid

💡 Key Takeaways: CSS Grid

CSS Grid Code Example

CSS Grid Practice Exercises

Key Takeaways: CSS Grid