Hey everyone!
In this post I'm going to share with you some of the things I gathered about CSS Grid and how you can use it to build cleaner mark...
For further actions, you may consider blocking this person and/or reporting abuse
Instead of thinking of Grid vs Flexbox, think in terms of Grid + Flexbox. Use grid for the global page layout and use flexbox for smaller localized areas. This gives you the best of both worlds. That being said, Grid is absolutely wonderful and you should definitely start using it when possible.
Hey Patrick, you are right! Both CSS Grid and Flexbox have their advantages and use cases. Trying to get the most out of those two technologies it's surely something to bear in mind. Thanks for pointing that out ;)
I think Grid is a great CSS feature, really easy to learn and use, but I don't think the 85% support means it's okay. My phone running ios 9 doesn't support the grid system, for example, and I have many other friends that haven't updated from that version. Because of this, I can't really test websites I made with CSS grid on my phone, and that's a huge drawback for me.
Hey Buğra, I understand the current support for CSS Grid is not something like the support we have for Flexbox for instance, which is ~94%, but for me, all the great advantages CSS Grid has to offer, make me a huge supporter, even if I have to add a couple of fallback rules for cases like yours. Also, the support it's growing really fast so if you still think the ~85% is a no-go, make sure to keep checking the support periodically ;)
Insert this link for fallback rules on the article, it is very useful and can change the decision about using or not CSS Grid. Thank you for the tips, you changed my mind about css grid.
I'm glad to hear that! And thanks for the suggestion, will do that :)
Such a good and clear explanation! I will definitely try this out at work tomorrow! I have my first project at work as an intern front end developer and I hadn't worked with grid just yet so this is awesome, thanks man !
Thanks for the feedback! I'm sure you'll have fun playing with it. Let us know how it goes :)
I used it today and it was fun! The site is not quite responsive so I'll have to figure that out at some point but I enjoyed css grid to easily devide the main with the sidebar. Before reading this I was quite worried about how I was going to make that with flex box heheh.
Nice! Try using
grid-template-areasto easily reorder your layout components when on mobile/desktop. That, together with media queries, should help you in making the site more responsive.Thanks for the article. On second example (codepen.io/willamesoares/pen/WymGGx) you say you have specified a height of
10remfor the first row. This makes no sense to me, the code does not have any mention to a10remheight. Maybe you updated the pen and the article is outdaded? Is there something I'm missing here, perhaps?I'm on day one of a project to make a very large Web site mobile friendly. Site has been online for over 20 years (hymntime.com/tch - check out the Portuguese section!). I'm trying to understand whether CSS grid would work for me, and have done some initial reading.
One issue I haven't seen covered is: What happens if one or more grid columns have no corresponding HTML markup?
For example, my HTML pattern has a div called "preface." It contains text in the middle, with 0, 1 or 2 images on the left & right. In pseudo-HTML, it looks like this:
div // Start of preface. This would be my grid container.
div // Optional left side image (if none, this div isn't present).
div // Text. Always present.
div // Optional right side image (if none, this div isn't present).
div // End of preface
To avoid changing markup in over 10,000 Web pages, I'd like to define a single grid for my preface div, with 1 row & 3 columns.
But what does the browser do if the CSS defines 3 columns, but the HTML markup only has 2 columns? Or 1 column? Does this cause an error? Or is the missing column ignored & doesn't take up any screen real estate (as if it was display:none)?
Hello Dick,
Thanks for reaching out. Sorry for the delay in answering you.
So, I went through your question and for the scenario you gave me, the markup for the column that is not rendered will not take any space, which makes total sense. So if you define that the grid should start from left to right and let's say the first column is not rendered, then the second column will take the space that was supposed to be allocated to the first column.
Check this out codepen.io/anon/pen/oKvKYV
You can try to remove the first and/or third inner div in there and see what happens :)
I noticed that the content of the grid items causes them to grow larger or smaller in comparison. In your last two examples, the 'Main Content' section and the 'Posts' sections are different sizes, even though they are each 1x1 grid items. That seems counterintuitive. Is there a simple fix for that?
I found a great answer.
Awesome article! I use Grid for layouts and flexbox for content within those layouts, though sometimes nesting a grid makes more sense. To overcome the lack of browser support I serve my mobile view inside of
@supports nottags.I still could not understand difference between
justify-contentandalign-contentCheck this medium.freecodecamp.org/the-comple...
As a non-webdeveloper, this was quite a sweet read :p
What a clean, concise and detailed explanation of grid's overall concept, main features, and competitive space. Thanks for putting this together. Definitely smashing that follow button for your posts.