So i got this this in my email from Quincy Larson.
It’s about learning grid.
Anyway, the article talks about using wrappers to grid our pages.
I thought we’re supposed to use divs with cols to grid our pages? Or is that just a Bootstrap thing
Grid is a new way of doing things that is on the bleeding edge right now. It’s probably going to be the way of the future.
1 Like
Yes, that’s Bootstrap. Grid is a new addition to CSS that gives us sane 2D layout without needing a framework. IMO it’s the most important improvement ever to CSS and I think it will become the standard way of doing things. If you want to know more, any of Rachel Andrew’s talks or examples are another great place to start: https://gridbyexample.com/
2 Likes
Yea I get that whole “wave of the future” thing @iamknox @r1chard5mith, but is it mobile responsive?
- and now that you mention it I could def do without the framework. The new grid looks simpler and less to code.
I mean, that’s the hole point of the bootstrap grid system right?
And tx for those links @r1chard5mith. I’m gonna check those out tomorrow.
On its own, it’s not mobile responsive. You still have to use media queries for that.
It’s mobile responsive in the sense that you can build mobile responsive layouts without a framework like bootstrap at all if you know CSS well enough. @Zip
1 Like
Bootstrap and other CSS frameworks have been trying to solve CSS’s layout difficulties for years.
Flexbox was a good development in this regard, but CSS grid looks to be the thing that finally makes layouts on webpages reasonable!
People that know about such things have been going nuts for grid for a while as it’s been getting wider adoption in browsers.
Future devs will never have to know the pain of layouts using floats, nor will they need to download a whole framework to comfortably have some columns and the occasional centred div 
4 Likes
There are many different ways to do things as code is always evolving to solve new problems. Css-Grids is a recent development that is easier to use than some other solutions because it’s part of CSS and designed from the start to create grids (instead of floating images like float).
From Wikipedia:
There have been other webpage layout methods used previously including tables, the box model, and CSS flex box.
This introduction to CSS Grid also talks about it:
“But wait! I can already create layouts with floats/hacks/tables/frameworks.”
This is true, but CSS Grid Layout is a two-dimensional grid system that is native to CSS. It is a web standard, just like HTML, and it works in all modern browsers.
I’m sure in a few years there will be some new way to format things. It’s probably for the best to understand the advantages a new technique has and be able to explain why you’re using it, while also being somewhat familiar with alternatives.
1 Like
Here’s a great tutorial that explains CSS grids very well:
1 Like
tx guys.
Will I still have to use bootstrap to get things mobile responsive like images?
Myb I should check that grid stuff out first. I might answer my own questions there.
So do yo think this will essentially replace bootstrap or will that still have other relevant features?
1 Like
That’s what I was wonderin’ @MarcelPenn.
The Net Ninja is the shiznit and his vids are reaaaaly gd but I only watched the first two.
I think grid has it’s own way of handling mobile stuff.
You subscribe to his channel.
1 Like
Vanilla CSS has media queries, which is why I said you don’t need a framework for mobile websites. Bootstrap just makes it incredibly simple to get a basic template going. So no jQuery, no bootstrap. Anytime you think of a framework remember that CSS can do responsive on its own. Frameworks make things easier, they aren’t necessarily a requirement. @zip
2 Likes
Oh @iamknox.
I didn’t know CSS could do mobile all by it’s lonesome?
Well, that’s that then. HTML and CSS w/Grid.
Gotta tell ya guys…I’ve been looking at the derivation of stuff, from flexboxes (which looks suuuuper hacky lol to grid, and it all come back down to HTML and CSS.
And JS. That’s all the front end is, HTML, CSS, and JS. There are library and frameworks but they are all built with the basic tools to help streamline processes that are annoying or time-consuming.
1 Like
Bootstrap is essentially a bunch of nice looking defaults for styling all HTML elements, it’s not just for position.
There is also extended functionality with bootstrap.js (such as the collapsible menu animation).
Grid only replaces the col layout system Bootstrap uses. So you might want to use grid for layout, and still use bootstrap because you like its Nav bar and form styling.
That said, bootstrap is so ubiquitous on the internet now everybody’s bootstrap powered sites look the same! You can add themes using bootswatch, which helps, but it does still lock you into someone else’s design.
Ultimately, everything Bootstrap does can be replaced with CSS and JS, because that’s all it is!
Bootstrap is good for getting a prototype up and running, but if you want fine grained control over all the design, you eventually want to know CSS well enough that you can do it yourself.
2 Likes
Noooooow I get it.
Didn’t know about Bootswatch though.
Constantly learbing on this forum lol.
Love it!
Like @r1chard5mith, I highly recommend Rachel Andrew’s set of short videos (each around 2 mins) explaining CSS grid: Learn Grid Layout Video Series.
1 Like