Back to concentrating on CSS grid. Bootstrap grid did seem easier. Bootstrap 5.1.0 | Bootstrap Blog
I did not know until recently that css allows you to create loops similar to a for loop and variables that work to store values that can be used in calculations such as a timer or incrementor that previously had to be done in Javascript. Purely in CSS.
If you do game development sprite sheets can be animated 100% in CSS with no Javascript required. This was revelation.
1 Like
CSS Grid is for placing the large portions of your layout where CSS Flexbox is for the smaller elements within the layout. You will be using both, rarely do you see entire layouts in just one or the other.
CSS Grid and Flexbox are meant to work together, knowing where and how to implement each one in your layout is more an art than a science. Grid handles the big overall layout and Flexbox handles more individual items or small grouping within a container. Consider Flexbox as a laser for the finer work and Grid as the overall foundation of the layout.
In other words… Flexbox works inside of Grid not the other way around, if you are doing it that way you are using them wrong. Though like I said, art vs science when it comes to using them.
1 Like
I’ve been watching Wes Bos’ free CSS Grid course https://cssgrid.io.
Just getting to the real world examples, but I’ve begun to think of Flexbox as columns and CSS Frid as columns and rows.
Info below is very helpful. Thanks, Terry44.
CSS Grid and Flexbox are meant to work together, knowing where and how to implement each one in your layout is more an art than a science. Grid handles the big overall layout and Flexbox handles more individual items or small grouping within a container. Consider Flexbox as a laser for the finer work and Grid as the overall foundation of the layout.
Froggy for Flexy… it does BOTH rows and columns…
which youll also find here
along with your css.io course and the awsome chick from Mozilla foundation, and her tuturials.
she is really good.
Seems a little boring sounding, but her her explanations are very concise.
if you just search the forum (magnifying glass/loupe icon to left of your avatar, top right) for css grid, you will find a pile of good stuff on this forum alone.
good luck 
1 Like
Flexbox is 1D and CSS Grid is 2D.
Flexbox works either Columns OR Rows but not both at the sametime, which makes it specially suited for placement of indivudal elements or small groupings. Thus it is 1 dimensional, only able to do one or the other either up and down OR right and left. Just not at the sametime.
Grid works both Rows & Columns with ability to overlap and rearrange individual items however you want instead of the default linear cascade. It can go up and down, sideways, overlap, rearrange items in non-linear ways, use named placement mapping and all sorts of things.
Used with transforms, translatation, transitions and keyframing you can do anything you want.
You can of course build entire websites just with flexbox or just with grid but they were meant to work together. Professional web designers never use just one for an entire website layout, unless they are teaching.
The best thing I have done to learn these concepts is to look at various types of layouts usually magazines, newspapers, catalogs and websites. Decide on 3 or 4 and recreate them by hand coding the html, css and if you need it, javascript. Only way to truly learn the technologies is to get into the code and fiddle with it until what you see in the browser is what you see in the magazine or offline/online resource.
4 Likes
CSS grid layout is not attempt to supersede HTML tables, flexbox and grids in Twitter Bootstrap . CSS grid is a new way of creating markup.
What is Twitter Bootstrap?
Isn’t Bootstrap grid gradually being eliminating, replaced by CSS grid?
Hi Kat, I guess you’ve worked this out by now yeah?
Bootstrap CSS content formatting Code library was developed by …Twitter!
So whenever your using your Bootstrap Blocks etc…your using Twitter…Bootstrap…blocks.
Which is a bit of a mouthful.
Hence, just Bootstrap And Blocks if your using blocks as welll…written using Bootstrap Formatting.
And then back to the initial topic headline,
this is interesting.
A nice basic intro combining The Grid comparisons, with Flexbox and also the relevance and use cases for Media Queries… and their relevance for some stuff today.
1 Like
So good!!!
Twitter…Bootstrap – does this mean Twitter stock is going up ; )