Is CSS Grid system really worth to learn?

Is CSS Grid system really worth to learn?
0.0 0

#1

Hi!

I’m fairly new at coding, and I’m currently doing the beta of FCC, where I’m currently learning about the CSS Grid system. But since I’ve seen so many people use basically only bootstrap for the layout of their webpage, I was wondering if it’s even worth it to stick on to something like pure CSS grid system?

What do you think?


#2

@AlexakaCardi I think it’s worth it. That being said, it’s not something I would get hung up on learning if you find yourself stuck.

Jen Simmons has a great series called Layout Land on youtube about Grid and new css features. I highly recommend watching the Basics of Grid or Incredibly Easy Layouts with CSS Grid. She does a better job articulating the topic than I ever could.


#3

At this point, I really don’t even know if I’m “stuck”. I have a problem with understanding a good amount of layout-related stuff at the moment, but I’m really enjoying and opening my eyes when working with this CSS Grid system.

But thank you, I will definitely watch that video!


#4

@AlexakaCardi I’d say if you’re still new to coding and getting your feet wet with CSS, you may want to hold off on learning Grid until you’re comfortable with laying out things in CSS without Grid. Grid is awesome because it makes laying out items on the page so much easier than native CSS, but it takes understanding of native CSS to really see its benefits. When you’re at that stage, I recommend Wes Bos’ CSS Grid course.


#5

Bootstrap is great, but I’ve been feeling like it’s impeding my progresses with CSS since it’s more just memorizing their class names instead of actually writing CSS. I find using flexbox to build my layouts works out pretty well. I too am curious about CSS grid system. How is the browser support for it?


#6

Ive been using flexbox for several weeks and i think it works the same way with grid… I think learning flexbox first is the best way since grid, as i have read on most forums, is a bit more advanced than flexbox! ILOVE FLEXBOX


#7

I assume the browser support for grid isn’t as good as flexbox. Does building a layout with grid and then using flexbox as a fallback seem like a good strategy?


#8

This is a good set of videos that relates to that: https://hacks.mozilla.org/2018/03/how-to-write-css-that-works-in-every-browser-even-the-old-ones/

Regards grid fallbacks; yeah, you could use flexbox to fall back, it has wider support. Grid support came to every modern browser at the same time though, so unless you need to support older Android or IOS browsers [for example], it’s generally ok (IE support is certainly usable even though it uses the old syntax). They’re supposed to be used together though: flexbox is for one-dimensional layout (menus or navbars for example), and grid is for two-dimensional layout (the overall page itself for example).


#9

okay yeah it looks like grid is more widely supported than I originally thought. Might just use it on my next project. Thanks for the info :+1:


#10

I just started learning and its been very simple and useful --> https://www.youtube.com/watch?v=HgwCeNVPlo0


#11

I watched that video already aswell, really useful material!


#12

Yes its worth learning CSS grid. I would go first for flexbox then grid so after you can combine them and benefit for the best strong points of each one


#13

I can also recommend the CSS Grid interactive course on Scrimba https://scrimba.com/g/gR8PTE


#14

sweet. I’ll have to check that out


#15

I think CSS Grid is the future! I wrote a short guide to CSS Grid that should help you get started with it.

It’s not as widely supported as Flexbox, but it’s well supported, and in the next few years those are the 2 technologies that will be the building blocks of any web page :slight_smile:


#16

There was never a proper layout method until Grid. There have been several layout methods throughout the history of HTML/CSS:

  • the use of tables (UGHH)
  • the use of divs and floats (UGHH!)
  • some will try with flex box
  • css grid

Flexbox is not the same as Grid and they are designed for different purposes.
Grid is for laying out items.
Flexbox is for arranging elements within those elements.
They both do different things and I think they should be used in conjunction with each other.

At some point you should learn and continue to use grid. It will take over eventually. There’s a lot of old stuff on the internet. If you find old sites, you’ll still find table layouts. It’s a little challenging to learn but worth it.


#17

Absolutely, Grid is not in competition with bootstrap. It is not a framework, so no having to preload bootstrap and bootstrap.js. Having said that it does dovetail amazing well with bootstrap, so by using both together, you can achieve some amazing page layouts.
If your designs use purely rows and columns then bootstrap is the way to go, but if you need to overlap items, be it rows or columns then you need Grid. I believe Grid will become a major force in web design/development both stand alone and used in conjuction with bootstrap, and possibly google’s materialize, if that takes off. Take a look at Jen Simmons and Rachel Andrew’s work, probaly the two foremost experts on CSS Grid Layout.


#18

Also CSS grid was add to FCC beta.