An internet radio show about the internet starring Dave Rupert and Chris Coyier.

Subscribe on iTunes or RSS

Twitter:

262 CSS Grid

01:17:17 Download

Guests

Jen Simmons

Web // Twitter

Designer Advocate at Mozilla. Host & executive producer of The Web Ahead podcast.

Rachel Andrew

Web // Twitter

Web developer, writer, speaker, runner. Half of the company behind Perch CMS.

Show Description

Grid is getting a ton of support in modern browsers and so we've got a couple of grid experts in Jen Simmons and Rachel Andrew on to help us navigate the grid - what is it? When can we use it? How do flexbox and grid play together? What about Bootstrap?

Show Sponsors

Interested in sponsoring?

Time Jumps

Comments

  • Jörn Zander

    I loved Daves swiss accent – good job. Awesome show, lots of inspiration.

    But I still miss the soundboard. I really do.

  • David Hicken

    I disagree; websites should look the same with the same size viewport regardless of browser. Stating the contrary sounds like the developer is just being lazy. That would be like saying “it’s ok if our logo has completely different colors on a printed ad vs our product packaging”, which seems nuts to me. Screen size should make a difference, but not the browser.

    On a phone a site would look different than a desktop/laptop, which may look different from a tablet, or even a small size browser window on the desktop … and even then, only because they have a different amount of real estate to work with. But on the same size viewport, it should look the same regardless of browser.

    Why? People learn what a site looks like, but if they use a different browser (same size), and suddenly the site looks different, that sets off warning bells. “Did they change something?”, “Am I in the wrong place?”, “Is some sort of man-in-the-middle attack happening?”, “Is the site is messed up on this computer?”, etc. People do expect something different when they look at the same site on different sized devices because we’ve trained them to expect that, but not when they use Chrome, then view the same site with Firefox.

    • Andrew Malcolm

      I don’t think it’s about “being lazy” as much as recognising that there are differences in the way browsers implement things, and it’s okay to have a slightly different solution for each if that’s necessary. More importantly, we really need to consider whether there is significant value added for the cost of achieving 100% uniformity across browsers, both for our clients and their customers. In many cases there really isn’t. So yeah, you could call it lazy, but you could also call it sensible – it depends on the situation.

      • asecondwill

        Yes it does, and in many situations looking “different” is just not going to cut it.

  • Sten

    People dont believe you because ur a woman? Really?

  • Scott Rod

    For those who haven’t listened all the way through this insightful podcast (but should) the Firefox CSS Grid Layout Add-on is no more. Since, Firefox 52+ the implementation is built in. Inspect the item where `display: grid` has been applied and click on the waffle-ish icon next to it. https://cloudup.com/csdYDAK41T5
    Also, there’s a CSS Grid Layout overlay extension for Chrome: https://chrome.google.com/webstore/detail/nitty-griddy-a-css-grid-o/gdcdncfophbnjbcnfcdennikmcjbpgln

Job Mentions

Check out all jobs over on the Job Board. If you'd like to post a job, you can do that here, and have it mentioned on ShopTalk for a small additional charge.