DEV Community

Why you should already be using CSS Grid

Will Soares on July 03, 2018

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...
Collapse
 
patricklafferty profile image
Patrick Lafferty

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.

Collapse
 
willamesoares profile image
Will Soares

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 ;)

Collapse
 
bgrgndzz profile image
Buğra Gündüz

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.

Collapse
 
willamesoares profile image
Will Soares

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 ;)

Collapse
 
rdricco profile image
renato ricco

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.

Thread Thread
 
willamesoares profile image
Will Soares

I'm glad to hear that! And thanks for the suggestion, will do that :)

Collapse
 
unicorndough profile image
Kyara.

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 !

Collapse
 
willamesoares profile image
Will Soares

Thanks for the feedback! I'm sure you'll have fun playing with it. Let us know how it goes :)

Collapse
 
unicorndough profile image
Kyara.

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.

Thread Thread
 
willamesoares profile image
Will Soares

Nice! Try using grid-template-areas to easily reorder your layout components when on mobile/desktop. That, together with media queries, should help you in making the site more responsive.

Collapse
 
rodrigovallades profile image
Rodrigo Vallades • Edited

Thanks for the article. On second example (codepen.io/willamesoares/pen/WymGGx) you say you have specified a height of 10rem for the first row. This makes no sense to me, the code does not have any mention to a 10rem height. Maybe you updated the pen and the article is outdaded? Is there something I'm missing here, perhaps?

Collapse
 
aksarben profile image
Dick Adams

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)?

Collapse
 
willamesoares profile image
Will Soares

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

Collapse
 
adao profile image
Anthony

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?

Collapse
 
adao profile image
Anthony

I found a great answer.

Collapse
 
seanrparker profile image
Sean

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 not tags.

Collapse
 
doniyor2109 profile image
doniyor2109

I still could not understand difference between justify-content and align-content

Collapse
 
willamesoares profile image
Will Soares
Collapse
 
bgalvao profile image
Bernardo

As a non-webdeveloper, this was quite a sweet read :p

Collapse
 
jameshubert_com profile image
James Hubert

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.