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...
For further actions, you may consider blocking this person and/or reporting abuse
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!
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).Awesome post!
Thank you Mohammed! 🙏
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
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!!!
Hey, Merci pour ton retour !
Ça me motive à continuer :)
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.
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!
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:
I made the correction, thanks so much for pointing out this error, you are awesome!
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-...
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.
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! :)
Hey Puleta, thanks for the feedback. Great idea, I'll make sure to add them 🙂
Wow! This is great content alongside a great presentation! You made everything very clear, I will go and read the second part straight away!
Great post. I love CSS Grid. This will serve me well as a reference, thank you!
Wow, what a great post with nice examples. Will definitely going to try and use this in my next assignment.
Thank you, glad to hear that 🙂
Hi Mustapha Aouas,
Top, very nice and helpful !
Thanks for sharing.