DEV Community

Cover image for CSS Grid: illustrated introduction

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...
Collapse
 
chrisachard profile image
Chris Achard • 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!

Collapse
 
mustapha profile image
Mustapha Aouas • 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).

Collapse
 
mdfaizanahmed786 profile image
Mohammed Faizan Ahmed

Awesome post!

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you Mohammed! 🙏

Collapse
 
kct3937 profile image
kct3937

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

Collapse
 
agathebadia profile image
Agathe Badia • 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!!!

Collapse
 
mustapha profile image
Mustapha Aouas

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

Collapse
 
bofcarbon1 profile image
Brian Quinn

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.

Collapse
 
fc250152 profile image
Nando

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!

Collapse
 
mustapha profile image
Mustapha Aouas • 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!

Collapse
 
danjelvdwal profile image
Danjel • 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-...

Collapse
 
mustapha profile image
Mustapha Aouas

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.

Collapse
 
puleta profile image
Puleta

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! :)

Collapse
 
mustapha profile image
Mustapha Aouas

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

Collapse
 
nathanaeldsb profile image
nathanaeldsb

Wow! This is great content alongside a great presentation! You made everything very clear, I will go and read the second part straight away!

Collapse
 
fsuffieldcode profile image
Fabian

Great post. I love CSS Grid. This will serve me well as a reference, thank you!

Collapse
 
sujeetpaandey profile image
Sujeet Pandey

Wow, what a great post with nice examples. Will definitely going to try and use this in my next assignment.

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you, glad to hear that 🙂

Collapse
 
jangelodev profile image
João Angelo

Hi Mustapha Aouas,
Top, very nice and helpful !
Thanks for sharing.