CSS Flexbox & Grid Review Q&A

[00:00:00]
>> Speaker 2: How come you didn't have to name the other areas?
>> Jen Kramer: Because we haven't used the grid area syntax before. So this is a way that I can define regions of my page. Whereas with some of this other syntax here we're defining in this case this is by line, line number.

[00:00:18]
Okay? And this we're just saying, wherever grid lays down these boxes, make this one span across two. Make this one span across three.
>> Jen Kramer: Okay? Which syntax is better?
>> Jen Kramer: What's your million dollar consulting phrase, everybody? Yes? It depends, yes. And what does it depend on?
>> Speaker 3: Browser support.

[00:00:45]
>> Jen Kramer: Browser support, maybe. Although in your case she's gotta support IE 10, that's a big deal. Yeah, I know, we feel bad for her. [LAUGH] But what are some other choices? Assuming browser support isn't a thing?
>> Jen Kramer: Whatever your development team knows, that's a good place to start, okay?

[00:01:06]
That one. How often are these things gonna change? If you suddenly decide to add another column and you have to go back and recode all your numbers again, that would kinda be a bad thing, right? Which is gonna take you the least amount of maintenance to change if the layout changes.

[00:01:25]
The other thing that's really nice is that with grid area here in particular, this is really easy to put in spans across rows and columns. You just spell it all out really really quickly. Plus with this lovely little diagram you have here, you can see exactly the way the page is supposed to look.

[00:01:41]
So a lot of people like this methodology for that reason. The documentation maybe is a little bit cleaner and easier to understand. But any of them work in this particular scenario including Flexbox. Yes?
>> Speaker 4: So let's say you're supporting a product that some of your users are on Evergreen browsers and others are are on IE 11 or IE 10.

[00:02:03]
How would you go about, would you recommend adding both display options where newer browsers that support grid would would show it as grid? Older browsers would fall back to Flexbox.
>> Jen Kramer: Okay, so you can do that. Absolutely you can do that. The disadvantage to that is now you're basically maintaining two code bases.

[00:02:25]
One is for grid, one is for Flexbox, say for example, or floats or whatever it happens to be. So while that's possible, people generally stay away from it. The other thing I'll point you to is Rachel Andrews's resources on this topic. At her gridbyexample.com website. And there she's got a whole bunch of different ways you can work through browser compatibility issues but still work with grid.

[00:02:48]
And that's probably your best way, and see what she's saying about that lately.
>> Speaker 2: Can you repeat that resource?
>> Jen Kramer: Yep. gridbyexample.com. I'm gonna go ahead and pull it up here gridbyexample.com. Again this is Rachel Andrews resource. She talks a lot here about grid, grid patterns, a lot of code.

[00:03:10]
She's got videos. Over here in the resources I think these are some of her latest blog posts here and here we go, supporting browsers without grid. So here's an article about how you might go about doing that.
>> Jen Kramer: Fabulous, other questions? Any questions online, yeah?
>> Speaker 3: It was actually a question online that I would like to hear the answer for it was back with Flexbox.

[00:03:43]
>> Jen Kramer: Yeah.
>> Speaker 3: This person used margin to space rather than justify content and said that their flex basis values are the same and is their preferred option between.
>> Jen Kramer: I'm so glad you asked that question, person online. Thank you so much. We're going to talk a lot about that today.

[00:04:01]
And I have used margin in my Flexbox in the past. If you watch the previous course from two years ago two, yeah, two years ago, I use a lot of margin. I'm big into doing it this way now because again, Flexbox is all about being flexible and when you specify your margin in a percent like that, you've actually specified that that is essentially an absolute value.

[00:04:26]
Even though you may be using a percent that is a relative unit of measure, two percent is always going to be two percent with a margin. It's never two point one it's never one point nine. With this type of methodology here using justify content with space between that is going to allow that space to shift just a little bit.

[00:04:46]
And that may be helpful in lining up your web page. And we're gonna see this in action when we get to chapter four. That's where the good stuff starts.