April 2, 2018 @ 2pm
An Event Apart Seattle
March 2017 the implementation of CSS grid happened very quickly across browsers. She’s been teaching about this emerging spec for years but when it shipped, she (or anyone else) had never shipped a grid website.
For people, Grid is:
Exciting – a real game change
Confusing – it doesn’t seem to do what I thought it would
Scary -there are so many new properties to learn! People are worried about falling behind or doing it wrong.
It’s exhausting and overwhelming to keep up with new things…
She wants everyone here to be the amazing CSS layout person on their team and not need someone else to tell them whether they’re doing the right or wrong thing. How do we get there? We need to navigate real understanding of these new things so we can become confident with using this stuff when it’s appropriate.
There will certainly be lots of code, which can be found on her CodePen.
You do need to understand CSS, but you don’t need to know every single property and value by heart. You need to know core ideas that help CSS layout make sense.
CSS: Cascading Style Sheets
You NEED to understand the cascade:
- Inheritance – which properties will inherit values from their parent. You don’t need to apply font-face: Helvetica; on every single element on a page, you can apply that to
- Specificity – which rule winds when two things could apply to the same element. This tells us which rule wins when there is more than one rule applied to an element.
Block and inline dimensions:
- In any writing system with a horizontal writing mode, the inline dimension is along the rows of text from Left to Right or Right to Left. And in that case the block dimension/axis runs vertically from top to bottom.
- If something’s aligned on the block axis it’s aligned from top to bottom.
- If you’re not writing in a horizontal writing mode, everything changes (flips).
- In Grid these are referred to as Inline/Row Axis and Block/Column Axis.
- In Flexbox, you can have a flex direction of row (Main Axis horizontal) or flex direction of column (main axis vertical).
- What has become apparent recently is that no one understands how BIG anything actually is – how big things inherently is on the web. Now we’re kind of letting the content work out what size they should be when in the past we were controlling the size of things on the page.
- If you want to create a grid out of floats, you’ll end up with something that LOOKS like a grid… but it’s not. We use percentages and floats and clears to do this. As long as you don’t get over 100% in a row, you’ll be fine…
You know what’s great about grid? We don’t have the figure this stuff out, we don’t have to do the math! But then we realize that there are some under the hood sizing issues we don’t really understand.
You can fake a grid in flexbox the same way you can fake one with floats. You do this by applying percentages to everything. Flexbox ‘fake grids’ are a bit of an improvement over floats, but you’re still not using a grid.
Past layout methods create the appearance of a grid by lining things up. Using a grid layout means you actually have a grid you put things into.
CSS Intrinsic and Extrinsic Sizing
Let’s look at this new world of sizing. To do this we need to look at the intrinsic size of things (the size content would have them be if nothing on the outside were to affect it) and their extrinsic sizes.
We have a <div> on a page with some text in it, and we’ll add a border so we can see it. Without any sizing constraints, a div stretches across the entire viewport.
We can actually set width: min-content; meaning it takes all the soft wrapping opportunities it can and becomes as small inline as it can be (as small as the longest word). You can also set width: max-content; and it becomes as long as it can be. It will stretch out and it may be inside something that has a width, forcing it to push out into an overflow (which is generally what you want and why CSS typically causes wrap and avoids overflow unless you ask for one).
Understanding this min-content and max-content size is really important when dealing with flex and grid layouts. A lot of confusion with layout and sizing comes from not understanding this.
Let’s look at some content in flexbox. Items START by trying to display at max-content size. But if you have too many items / too much content to display in max-content, and it takes away width from everything. Items with the most text lose the least amount of space, and the smaller items go down to min-content width.
In CSS basically we just try to not make your stuff disappear. HA.
With flex-basis of 0, space is distributed from 0, making equal with columns.
Flexbox is starting from max-content and taking space AWAY (with a min width of min-content). Grid starts at min-content and ADDS space (with a max width of max-content).
Width: max-content WILL overflow… by the way.
Then we have ‘fit-content’ which you can pass a value to! Example: width: fit-content(15ch);
So it acts like max-content but puts a limit of 15 characters on it.
You can absolutely still make a 12 column grid if you want, and it will be more simple than the other methods we saw. You could make a grid using fr units and fixed width gaps.
You can still use percentages for the gaps if you want. So don’t worry too much about which method you’re using if it works for the context you’re in. You don’t HAVE to use a fixed width gap.
Also, you don’t have to stick to the 12 column grid either! You have way more flexibility than that with Grid.
You need so much LESS CSS with Grid Layout.
You can also create very specific layouts with content that expands when needed. You do this using minmax. Example: minmax (100px, auto)
Grid is a 2 dimensional layout pattern so expansion will happen along the track.
When you’re dealign with the real world of content, you rarely know how much content is actually going to be in the final design, so this flexibility is very very helpful.
This is not exciting, but it will let you do exciting things. You can be more creative with your designs once you’ve figured out how you can use it. Understanding CSS sizing is kind of the equivalent of eating your vegetables and getting enough sleep.
Why is it so complicated?
People want fully featured but also very easy… How complex do you make something and it still be useable? More capability & flexibility means more to learn.
It’s worth remember you’d on’t have to learn all of it at once. Many features of grid are different ways to do the same thing.
What it comes down to is it’s just a bunch of lines. Everything sits on a bunch of lines!
You can name some of your ‘lines’ (whether row lines or column lines) and then use those names to place the content. You can call them anything you like with the exclusion of the word ‘span’.
However, if you DO use something like ‘content-start’ and ‘content-end’, you’ll end up with an AREA named ‘content’.
This is the kind of stuff you can look at and say ‘this solves a problem, it’s helpful to have these line names’ or you can NOT use it. It’s YOUR CHOICE! You have a REAL CHOICE for the first time!
So many of the assumptions we’ve had as designers and developers in the past in terms of what is not possible is now possible! So let go of your assumptions and see what is now possible.
See if you can do something now with less CSS. You can think up patterns that aren’t usual and solve things in a different way. You can start with ‘in an ideal world how would we build this?’ and then see how we can make that happen.
This is so much better than ‘which patterns does our framework give us to use?’ which is what we had in the past.
However, most of us work on ‘old things’… so how does this help?
The existence of old CSS in your codebase does NOT mean you can’t use new CSS!
You can design a new page or a section of a page using new techniques. This is where understanding CSS comes in really useful so you know how this new technology will work with the old technology.
You can save time and do creative things with grid layout without worrying about replacing all the old code you work in.
Remember that other layout methods still exist. So if you need something that already exists, don’t try to make grid do it. You can still use floats, for example! Don’t get so excited about a new method that you stop using the old stuff. If you want the wrapping behavior of a float, use a float. If you’ve got a bunch of items and you just want to equally space them out, that’s what flexbox is really good at! Just make sure you’re using the right things in the right layout, and you’ll have to play around to figure it out.
Any off the shelf code has to be very generic because it has to solve a lot of problems, and those problems might not be your problems. You can now solve your own specific problems which will reult in lighter, easier to understand code.
You can build your own mini-framework using grid layout to keep consistency amongst a team which can be really helpful.
As you become more confident in CSS you’ll find it much easier to make a case for newer techniques… in fact you may not even need to make a case because things will just work and nobody will be complaining.
Old Browser Support:
It is completely ok to have a different (good) experience on older browsers!
When developing, it is typical to support the last 2 versions of desktop browsers. A lot of browsers that don’t support grid are mobile browsers and aren’t going to be updatable. These browsers are often in areas of the world that have limited data, etc.
Users aren’t A/B testing your website’s experience across 2 browsers, they’re just trying to achieve a goal or buy a thing!!
Feature Queries – use CSS to ask if the browser supports a feature before using it. We can use CSS alone to improve CSS!
By using your skills in layout, you can start out creating simple experiences for people on older devices, and then with a few lines of CSS create a new cool experience for those on browsers supporting Grid.
Making the web available to everyone is exciting.