Basics of CSS Grid: The Big Picture

Thanks. If you'd like some more book and video suggestions I sent this to a friend back when she was looking to get into front-end development a few months ago: Here are some book and video links (with Amazon affiliate tags snuck in). I've read all of these books cover-to-cover save for the RxJS one. They approach front-end as a set of technologies that should be understood and mastered rather than the "CsS hAckS to GET YoU pAiD!" style of most web tutorials. Not sure where to point you with React but if you decide to use Angular or Vue I have some suggestions. CSS/Sass: "CSS: The Definitive Guide": link "Pragmatic Guide to Sass 3: Tame the Modern Style Sheet": link This Sass book has the best structure of any introductory tech book I've ever read. "TypeScript": Mastering TypeScript 3: link "Programming TypeScript": link RxJS: Reactive programming the most significant development in UI technology in 20 years. Once you get the hang of it managing asynchronous events (user generated, network generated, time based, etc) become a breeze. "Build Reactive Websites with RxJS: Master Observables and Wrangle Events": link RxMarbles - Interactive RxJS visulizations: link Angular: "Angular Development with TypeScript": link "Architecting Angular Applications with Redux, RxJS, and NgRx: Learn to build Redux style high-performing applications with Angular 6": link Videos: I watched most of the Layout Land videos when I was getting a grip on the state of CSS. Jen Simmons is a developer advocate at Mozilla and has the best overviews I've seen. Basics of CSS Grid: The Big Picture: ▶ this video Using Flexbox + CSS Grid Together: Easy Gallery Layout: link

Good stuff. Keyboard clacking during screencasts is a non-starter for me tho. I really like Jen Simmons's videos on CSS layouts. (link) Before this month, the last time that I made a layout with CSS floats were still in style. When I decided to really learn modern CSS this month even starter videos like "Basics of CSS Grid: The Big Picture (▶ this video)" were over my head.. I'm a back-end developer, I'd never used Flexbox let alone Grid. As I watched Jen's videos I scribbled down what she was excited about and then started reading "CSS: The Definitive Guide (link)" cover to cover. I'm really glad that I watched Jen's videos first. Having some best practices in my head before I learned the mechanics of Flexbox and Grid helped crystallize everything. Now that I'm basically through CSS: TDG I'm re-watching her videos and getting even more out of them.

Checkout Jen Simmons videos "layout land", mozilla designer advocate. ▶ this video . She answers all the questions from a historical perspective who just gets what webdesign really is. Inforgraphics predated website designs, and art before that, she explains how this all ties into flexbox vs grid vs tables vs floats etc. You still use all 4 of them, but to different degrees depending on the situation. ------------------------------------------------------------------ Generally speaking, these are the rules I gather from my own personal experience and also Jen Simmons - Tables are inflexible for responsive webdesign, due to display:table-cell default values. Your table should be small, or be have horizontal support on lower viewport sizes - Floats are still useful for singular items, but sometimes can be replaced by using position absolute / position relative items. Floats are really good at dealing with existing CSS files or structure where you have no control over the backend (e.g. custom wordpress theming comes to mind, floats made most sense for post excerpt images when I remade my blog) - CSS Grid only shines on larger "macro" type of elements, where many nested child components will be inside. CSS Grid also is the only of these 4 for "stack overlapping" certain elements with each other. CSS Grid replaces the use of media queries and is less verbose. You can use CSS grid with @support for older browsers but most browsers are going to support CSS grid due to how fast it has been adopted over the past year. CSS grid is absolutely terrible for small-micro components though, CSS grid suffers from dealing with multiple different style pages rendered on backend (e.g. ecommerce product landing page, on the asides page), or things of unpredictablility. Using a combination of Flexbox, media queries, floats, position relative/absolute is much better here. You need to first and foremost think of what good HTML for a blind-impaired reader should look like for a screenreader perspective. CSS Grid you think in 2D mostly - Flexbox is still superior to CSS grid on smaller item sizes and subcomponents. Flexbox you think in 1D, but you treat flex-wrap as an added bonus. Flexbox is the most versatile for managing complex components ------------------------------------------------------------------ Basically, you use all 4. You pick one over the another in certain situations. Normally, if you adopt CSS grid, you do so from the beginning. You will almost always be using flexbox at somepoint or another for handling more complex subcomponents/wrappers, get used to it, unless your project is not complicated, then css grid suffices. Floats are great with mixing with flexbox and media queries, you can do almost everything CSS grid can minus the stackable layed out elements. Floats are far superior for doing theme editing after the fact and for quick-hacking on a wordpress theming layout etc. Tables just shine on tables that do not need responsive webqueries and for keeping the header and body reflowing at the same rate at different viewport sizes. But truthfully, tables offer no advantages over flexbox. Bulma I personally do not like, because classnames are too long, I'd rather go with bootstrap because of all the addin support / stackoverflow/ everything else resource I have access to over bulma. This is personal opinion of course, you choose what you want When you pick a CSS framework like Bulma, you need to decide how much you are going to use it. Personally, when I load in bootstrap, I use it for micro-components like buttons, panels etc because I simply am too lazy to write these myself. If you adopt Bulma's grid/rows/columns etc you might not be using much CSS grid at all, BUT you still will probably use flexbox every now and then Hopefully this naswers your question