Skip to main content

CSS Grid, explained.

Published 2022/05/26 12:00

Suppose you are a photographer and you’ve taken some photos you want to show the world.

So you decide to learn HTML and CSS so can create a website with all your photos.

It takes you a bit of time but eventually you manage to upload all your photos for everyone to see!

By default, a browser displays all elements one under the other. Your website is no exception.

It’s great that you have a place to show off your work, but the website doesn’t quite look right. You want it to look less than a long document, and more like a gallery of photos!

Essentially you want all your photos to be shown in rows and columns, like a grid. How can you do that?

This is where CSS Grid comes in!

Now suppose this is the HTML you created to place your photos:

<div id="myphotos">
    <img src="photo01.jpg" alt="">
    <img src="photo02.jpg" alt="">
    <img src="photo03.jpg" alt="">
    <img src="photo04.jpg" alt="">
    <img src="photo05.jpg" alt="">
    <img src="photo06.jpg" alt="">
    <img src="photo07.jpg" alt="">
    <img src="photo08.jpg" alt="">
    <img src="photo09.jpg" alt="">

It’s basically a div called myphotos with some images. As we saw, by default, the images are displayed one under the other. We want to display these photos as a grid. Here’s how.

First, in CSS, we set the “myphotos” div to display: grid:

    display: grid;

Next we’re going to tell our browser that we need a grid made up of 3 columns:

    display: grid;
    grid-template-columns: repeat(3, 1fr);

Now our photo gallery actually looks like a gallery!

As a last step to finalise our gallery, we can add some space between our photos by using grid-gap in CSS:

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;

Now it looks even more like a gallery!

This is essentially what CSS Grid lets us do. It lets us define columns and rows so we can organise elements in a grid. It works for every element, not just photos!

CSS Grid works best in larger displays so to find out more about how to accommodate for different screen sizes, see:

Responsive design, explained

Next steps

Now that you got a good first idea of what a grid is, these will get you up to speed:

Dev, Explained (43 part series)

  1. Javascript Scopes, explained.
  2. Javascript Promises, explained.
  3. Accessibility, explained.
  4. React, explained
  5. Should I use forEach() or map()?
  6. Should I use Flexbox or CSS Grid?
  7. Docker, explained.
  8. Unit testing, explained
  9. Git, explained.
  10. Typescript, explained.
  11. async/await, explained.
  12. The DOM, explained.
  13. Regular expressions, explained
  14. GraphQL, explained.
  15. Vue, explained.
  16. Svelte, explained.
  17. API, explained.
  18. Javascript Hoisting, explained.
  19. Immediately Invoked Function Expressions (IIFE), explained.
  20. ARIA roles, explained.
  21. Test-driven Development, explained.
  22. ARIA live regions, explained.
  23. aria-label in accessibility, explained.
  24. Type coercion in Javascript, explained.
  25. Variables, explained.
  26. if statements, explained.
  27. Arrays, explained.
  28. Currying in Javascript, explained.
  29. Memoization, explained.
  30. For loops, explained.
  31. Javascript Prototypes, explained.
  32. React Hooks, explained.
  33. Graph databases, explained.
  34. MongoDB, explained.
  35. Serverless, explained.
  36. Javascript Callback functions, explained.
  37. HTML, explained.
  38. CSS, explained.
  39. Responsive design, explained.
  40. Javascript, explained.
  41. The CSS Box Model, explained.
  42. CSS Flexbox, explained.
  43. CSS Grid, explained.
2022 Savvas Stephanides
Buy me a coffee
Some icons from Freepik