Rachel Andrew is the one I go to when I need to learn about Grid. If she doesn’t have resources that cover the question, no matter what the question is, chances are resources don’t exist.
It’s time for us to hear from @rachelandrew on Graduating to Grid.
In March 2017, Firefox, Chrome, Safari, and Opera all shipped Grid. Edge caught up in October #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Suddenly everyone was talking about grid.
Grid is
– Exciting: real game changer
– Confusing: doesn’t seem to do what folks thought
– Scary: so many new properties to learnHow do you feel?
Excited but worried about falling behind, tired, worried of inconsistencies#AEADC— Anne Gibson (@perpendicularme) July 30, 2018
“Is this the right thing to do?” @rachelandrew can’t rubber stamp your work any more than anyone else without the context can
So she’s going to help us develop the skills to make the decisions ourselves.
This talk is about building confidence, becoming amazing at CSS#AEADC— Anne Gibson (@perpendicularme) July 30, 2018
If Grid is new to you I have lots of examples and a video tutorial at Grid by Example https://t.co/I7nsr6D9Zz #aeadc
— Rachel Andrew (@rachelandrew) July 30, 2018
Understanding CSS isn’t about learning every property and value by heart. “My main skill is ‘can use a search engine’” — amen sister.
But without understanding the core ideas, weird things happen and we can’t understand why#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Cascading style sheets *cascade*.
*Inheritance* – which properties will inherit values from their parent
*Specificity* – which rule wins when two things could both apply to an element
Learn these.— Anne Gibson (@perpendicularme) July 30, 2018
https://t.co/JGRdhXqwCR is a great source for those first topics #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Block and inline dimensions depend on the language. In grid layout block axis is the direction the paragraphs go and inline dimension is the opposite.
In Flex: the main axis is what you set, and the cross axis is the opposite.
CSS cares about writing mode#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
No one understands how big anything is anymore. Sizing matters. We’re moving from a world where we do the sizing to one where the browser does the work for us.
Float-based grid-systems mean a row-wrapper and we give everything a percentage.
Lots of math!#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Percentages are pretty ugly but they’re easy to understand and they resolve to a length. Can be calculated using a straightforward calculation. We know what will happen if they total >100%
Grid is supposed to take away the pain of calculation, but can be confusing#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
“You can do all this grid stuff in flexbox” – sure, by using the float method on flexbox. An improvement over floats, and proper alignment, but still faking appearance of a grid by lining things up and pushing them around #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
With grid layout we have a grid into which we can put things. Instead of faking it, it’s already there.
CSS Intrinsic and Extrinsic Sizing: https://t.co/OULap8xdt1#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Intrinsic is the size the content would have things be if there were no external influences
Extrinsic is that the size is defined by a parent. The container could define the size. Or we could define the size. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
If the content of the box sets the size intrinsically for max content, it’s exactly the size of the string. Or we can use min-content which means soft wrap everything possible and use that to set the size. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
You can still overflow things. If you max-content a box and then put that box in a fixed-width (smaller) box, you’re going to overflow. Generally we don’t want that. But the browsers won’t do this unless we cause it, they size things smartly in general #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
I’m not going to try to show @rachelandrew’s examples in twitter because I am not a masochist. If you’d like to see the examples please go to your local @aneventapart :) #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
If flex can’t fit everything as max-content, it’ll take space away from everything in a percentage-type manner. Flex-grow and flex-shrink help with that (flex-basis of 0 is “nothing has any size, give it all out equally”) #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Grid layout is very similar except it starts with min-size content and then adds to them, instead of starting with max-size and taking space away. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
How big is that box? Understanding sizing in CSS Layout #aeadc https://t.co/zkHunxWLRg
— Rachel Andrew (@rachelandrew) July 30, 2018
Fit-content: sizing keyword – allows you to pass a value like 15ch. This allows to wrap at a set character value. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Instead of worrying about fitting everything into a grid, we can make things fit what we want them to fit, and not force a grid on it. Fit-content gives you the ability to define the max, so smaller images still look good, and bigger images size down #aeadc
— Anne Gibson (@perpendicularme) July 30, 2018
Breaking out with CSS Grid explained #aeadc https://t.co/1IjlyOB3l2
— Rachel Andrew (@rachelandrew) July 30, 2018
Grid layout isn’t exciting in and of itself, but it will let you do exciting things with layout. It’s the CSS equivalent of eating your vegetables and getting enough sleep.
Put your time into understanding sizing. It will help you understand everything to come. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
“Grid is really complicated! Why is it being made so difficult?!” People want fully-featured and really easy. Difficult to match both of those things. CSS specs – you don’t need to use everything to be able to use the spec.
It really comes down everything is lines. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
5 column tracks and 6 row tracks means 6 column lines and 5 row lines (because there’s lines on both ends). We can define space based on the lines. Or we can name the lines and place items by line name. “Content-start” and “content end” make things easier to read. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
A content area could be named “content” and we can use either set of names (content-start/content-end, or “content”) to define where it is. This also allows for a lot of shorthand, like setting a “grid-area: content;”
We can also use an ascii-art layout #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
If things go weird, go back to see what *line* the grid thinks is happening.
You can just use numbered lines. Anything else is a choice that you have.
If you’re starting a new project, go look at what the best method is now available. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
How old is the oldest CSS in your project? 8% of folks Rachel surveyed had css in their codebase written 10 years or more ago. Old CSS in the code base doesn’t mean you can’t use new CSS. A new component for example #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
This is where understanding CSS comes in really useful. If you understand sizing, you can use it to ensure that your new CSS still aligns with your old grid #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Rachel is showing using Bootstrap 3 to show a grid component popped into a Bootstrap layout #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
If you can start a new thing or creating a system with a new layout, work out which layout methods work best. Other layout methods still exist. If you need a float, with its wrapping behavior, use a float. (If you need a data table, use a data table.) #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Use multi-column layout for where you have a load of checkboxes and collapse that down, or similar use cases. The basics work really well. Flexbox is great for spacing a bunch of things equally. You don’t need a grid-shaped hammer for every layout task#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Off-the-shelf frameworks are designed to solve *generic* problems. We end up absorbing solutions for problems we don’t have. You can start to build your own framework with your own layout utilities #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Solving your specific problems only will result in lighter easier to understand code.
Once nice thing about grid is you do most of the work on the container and don’t have to put things on the content #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Then there’s working with less-capable browsers. All the way back with YUI in 2006ish we were grading browsers on support. A lot of conversations about browser support go back to a lack of understanding on one side and a lack of confidence on another #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Progressive enhancement is possible, but it can be very difficult to explain that websites don’t need to look the same in all browsers. Yahoo was saying “this old browser is C-grade, it’s not important anymore”. Compelling data #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Becoming confident in CSS skills will help you to make your case to use newer methods. (Although quite often asking permission is optional.) Come up with a solution, demonstrate it works, and show it supports the business needs. that’s the goal #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
IE 10 and 11 have the -ms for support of some features. Other browsers generally are supported last 2 versions.
Grid version 2 is already in progress in the CSS Working Group. It includes subgrids#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Browser market share in India, UC Browser comes in 2nd to Chrome. Most browsers that don’t support grid are Mobile, data is expensive, and devices are less-powerful #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
People are searching for grid polyfills. Stop. They will make the experience *worse* for less capable browsers and devices. Progressive enhancement works better.
“The time it takes your customer to get the information she came for” – @zeldman
— Anne Gibson (@perpendicularme) July 30, 2018
Using Grid rather than a framework can help create a better experience even for browsers that don’t use grid because everything’s smaller.
Feature queries – use CSS to ask if a browser supports a feature before using it #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
CSS Grid: Supporting Browsers Without Grid #aeadc https://t.co/Hzc2ULFqdB pic.twitter.com/McYijWLrNY
— Rachel Andrew (@rachelandrew) July 30, 2018
There will always be the unknown browser that they can’t/won’t update for whatever version. Old android devices, old browser in-house at big companies, etc. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Adding support for Grid is just a few lines of CSS, the fallbacks don’t cause significant problems for other browsers. Start with simpler experiences for limited browsers, then add the Grid layout for the browsers that have support. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Making the web available to *everyone* has to be key. That’s exciting. There’s enough people making cool stuff for rich people. Let’s give people with access in short bursts a good experience. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
For @abookapart I wrote The New CSS Layout #aeadc https://t.co/qQ49NGNah4 pic.twitter.com/NoJJfSfEwI
— Rachel Andrew (@rachelandrew) July 30, 2018
My weekly newsletter on all things CSS Layout is at https://t.co/rokhGIQ63A #aeadc
— Rachel Andrew (@rachelandrew) July 30, 2018