# Css Grid replacing Bootstrap grid?
**URL:** https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546
**Category:** Random
**Created:** [August 15, 2021, 4:47pm UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546 "2021-08-15T16:47:45Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [August 15, 2021, 4:47pm UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546/1 "2021-08-15T16:47:46Z")
Back to concentrating on CSS grid. Bootstrap grid did seem easier. [Bootstrap 5.1.0 | Bootstrap Blog](https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/#css-grid)
---
### Author:  [@Terry44](https://forum.pinegrow.com/u/Terry44)
#### Post date: [September 12, 2021, 3:07am UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546/2 "2021-09-12T03:07:57Z")
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.
---
### Author:  [@Terry44](https://forum.pinegrow.com/u/Terry44)
#### Post date: [September 12, 2021, 3:20am UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546/3 "2021-09-12T03:20:04Z")
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.
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [September 12, 2021, 4:12pm UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546/4 "2021-09-12T16:12:54Z")
I’ve been watching Wes Bos’ free CSS Grid course [https://cssgrid.io](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.
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [September 12, 2021, 8:14pm UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546/5 "2021-09-12T20:14:54Z")
Froggy for Flexy… it does BOTH rows and columns…
> [@FLEXBOX Tutorial - with FROGGY! and a Kitty](https://forum.pinegrow.com/t/flexbox-tutorial-with-froggy-and-a-kitty/2859):
>
> Here, this. I found really good. It starts of and you just go yes ,yes, next question please…yawn …then you have to wake up! challenging towards the end and so rather educational. and here is Rocketship tour through the solutions if it drives you mad, by our very own @itsmeleo, And WHERE? I hear you ask is the Kitty?.. gah! so impatient! here you go, with a kitty too. -youtube tutorial
which youll also find here
> [@CSS Grid System](https://forum.pinegrow.com/t/css-grid-system/1971):
>
> Hello all, At my work are moving away from bootstrap (flexbox) in favor of CSS grid system. I know there is a lite basic support in PG on this technology mainly of some input fields . Do you think PG will fully suport this new technology with visual tools any time soon? Thanks
along with your [css.io](http://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 🙂
---
### Author:  [@Terry44](https://forum.pinegrow.com/u/Terry44)
#### Post date: [September 13, 2021, 9:40am UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546/6 "2021-09-13T09:40:20Z")
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.
---
### Author:  [@Larry7933](https://forum.pinegrow.com/u/Larry7933)
#### Post date: [November 12, 2021, 10:22am UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546/7 "2021-11-12T10:22:37Z")
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[.](https://www.tellthebell.run/)
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [November 12, 2021, 3:31pm UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546/8 "2021-11-12T15:31:09Z")
> [@Larry7933](#):
>
> Twitter _Bootstrap_
What is Twitter Bootstrap?
Isn’t Bootstrap grid gradually being eliminating, replaced by CSS grid?
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [November 14, 2021, 10:18am UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546/9 "2021-11-14T10:18:29Z")
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.
> **[You Probably Don't Need Media Queries Anymore](https://dev.to/kathryngrayson/you-probably-dont-need-media-queries-anymore-a4j?ref=devawesome.io)**
>
> With screens available in any size you can imagine, it's time to shift our approach towards responsive design – the era of breakpoints is over and the era of fluid design is here. Modern CSS has fantastic support for responsive design that ensures...
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [November 14, 2021, 10:36pm UTC](https://forum.pinegrow.com/t/css-grid-replacing-bootstrap-grid/5546/10 "2021-11-14T22:36:33Z")
> [@schpengle](#):
>
> [You Probably Don't Need Media Queries Anymore - DEV Community](https://dev.to/kathryngrayson/you-probably-dont-need-media-queries-anymore-a4j?ref=devawesome.io)
So good!!!
Twitter…Bootstrap – does this mean Twitter stock is going up ; )