css grid - keep your older tools & tricks handy
CSS Grid has been announced somewhat recently so I figured I’d attempt to answer answer a very reasonable concern quickly. Sadly this isn’t a tutorial (no as I’ve said before I do intend in making one). And I make the assumption you’re aware of common web development and thus CSS trends.
Firstly, just a quick reminder as to what responsive means when referring to CSS layouts. Responsive simply means that the content shrinks appropriately to fit the browser, in that it “responds” to the site of the browser. If you’ve unfamilliar of responsive design, media queries, values of “display” (flex, grid, fixed etcetera), what a framework is, I strongly reccomend you research the terms I just listed.
We were super excited when Flexbnox was announced, as it meant we could display content responsively much more easier - and while this is partly true, its not the main reason for using a CSS grid (though you can make a grid responsive very easily).
So what is CSS grid, grid is a value for display (“display: grid”), which we can use to turn the nested content into grid-items. This mean we will be able to position them much more easier and use a literal grid for our website’s layout.
This means the grid-items can only use its grid’s to decide how it looks on the page - not the surrounding content that is not within the grid - though the grid itself may be concered with the surrounding content (such as other grids). Grids also allow you to “slice” the content it contains up into individually grid-items which can have their own behavior (such as the third row being the only row that stretches). Basically, it allows us to further modularize the sections of the website to use their own coordinate systems and thus behavior depending on their coordinates.
But, haven’t grids existed for ages you may ask? Well, slighly, but you had to “hack” yourself one together (or use a library such as FlexboxGrid) - the feature we are talking about in this post (CSS-Grid/s) are much easier to use. [Actually, I may do a tutorial on how to make an old fashioned grid using CSS3.]
So in conclusion, if you thought that CSS grid would be your only goto tool for responsive websites - you’re wrong (with the exception of simple websites), for example, you could use flex on the outer part of your website and grids for the individual containers - vice versa. Long story short, frameworks / libraries etcetera and other CSS properties are still going to be useful except you just won’t be relying on them as much - and your solutions will feel less “hackier”. So, don’t go removing all evidence from Bootstrap just for its grid-system on your Github account just yet.