DEV Community

CSS Grid: illustrated introduction

Mustapha Aouas on September 12, 2019

This post is the first of a two-part series. Introduction I remember the first time I was learning CSS, and how I was excited to lea...

Read full post

Chris Achard • Sep 13 '19 • Edited

This is a great post, and I love the visuals/illustrations!

I appreciate the comparison to flexbox too - I have a lot of experience with flexbox, but none with grid, so it's good to know they aren't really replacements for one another.

I do find the css grid syntax to be a bit... funny. Do you get used to it after awhile? I probably just need to play with it for a bit, and see how it feels 🙃

Thanks!

Mustapha Aouas • Sep 13 '19 • Edited

Thank you, appreciate it.

Well, the grid-template-areas syntax is really weird at first, but if you think of CSS grid as a framework on its own it gets easier (at least it did the trick for me :p).

Mohammed Faizan Ahmed • Oct 11 '22

Awesome post!

Mustapha Aouas • Oct 11 '22

Thank you Mohammed! 🙏

kct3937 • Oct 1 '19

Very good post.

There are some things that you will be interested in....mostly by Morten Rand-Hendriksen; check him out on codepen. He also has a very good presentation on Grid on Youtube at youtube.com/watch?v=txZq7Laz7_4

In relation to @supports for Grid he makes a good point and suggests using @supports (grid-area: auto) rather than simply @supports (display: grid) because some older browsers support an early version of grid which will be triggered by the simpler version.

You will also notice in his pens that he illustrates a working solution to stacking grid items for which you state in your post...

Notice how we did not use grid-area for .meta element. That's because, for now, there isn't a way to superpose elements using this method. At least not that I'm aware of.

Since I am an old school (really old) programmer. I am interested in simpler methods of writing HTML, CSS, and javascript and am experimenting extensively now with HTML/Pug, SCSS/SASS, and ES6.

Flexbox and Grid provide a lot of the features that have been on my wishlist for a long time.

It seems to me that the more these languages develop, the more they seem to be getting back to way programming once was. Pretty soon, I might be current again.

I look forward to more posts

Agathe Badia • Apr 21 '20 • Edited

You're like my hero of CSS! Thank you so much for the clear explanations and all the illustrations :D

Just realised you are French, merciiiii pour tout, c'est du super contenu! Etant junior et en télétravail, j'apprécie tout contenu qui est clair, direct et m'aide pour pratiquer dans mes sides projects. Merci merci merciiii!!!

Mustapha Aouas • Apr 21 '20

Hey, Merci pour ton retour !
Ça me motive à continuer :)

Brian Quinn • Jan 12 '20

Excellent post. I worked with the tutorial within a React app. Called to mind grid layouts from back in my ASP.NET web forms days. I think I use columns and rows in bootstrap most of the time. I'm open to any option so long as the controls adjust to orientation and devices. I also have to stick to patterns that are common or that my clients use. I would like to see this CSS grid layout filled with working controls. I'll drop some in just for poops and giggles.

Nando • Sep 14 '19

Hi Mustapha! you are great, your explanation is amazingly clear and complete! thank you very very very much :)
a little question: is it accurate the statement "Or we can use grid-template where we first define the grid-template-rows then the grid-template-columns" in the "Rows & Columns" paragraph? it seems to me that this does conflict with the example given above ...
have nice days!

Mustapha Aouas • Sep 14 '19 • Edited

Hey Nando, thanks for the kind words, means a lot to me.
You are absolutely right. I inverted them in the article, but it actually is rows then columns:

.grid-container {
  grid-template-columns:  1fr 1fr 1fr 1fr;
  grid-template-rows:  1fr auto 2fr;
  // equivalent to
  grid-template:  1fr auto 2fr  / 1fr 1fr 1fr 1fr;
}

I made the correction, thanks so much for pointing out this error, you are awesome!

Puleta • Sep 13 '19

awesome post, love the illustrations! I now get the difference between flexbox and grid, what I would suggest is to add column/row-line number on other illustrations as well not just on il. 1.2, cheers! :)

Mustapha Aouas • Sep 13 '19

Hey Puleta, thanks for the feedback. Great idea, I'll make sure to add them 🙂

Danjel • Sep 13 '19 • Edited

I wouldn't say it's not supported by IE(11). Funny enough, I learned that IE11 was the first browser to have support for CSS grid (but back then with an alternative syntax and/or prefixes).
Check this article series from CSS tricks on how you can support IE11 with grid and what the caveats are.

css-tricks.com/css-grid-in-ie-css-...

Mustapha Aouas • Sep 13 '19

IE10 and IE11 support an older version of the specification, so i can't say that they support it. But i get what you are saying, it is great to know that we can also use it on IE.

Thanks for sharing.