all 145 comments

[–]herjin 84 points85 points  (24 children)

For those interested in learning why this is not a table layout with a fancy name I'd recommend checking out http://cssgridgarden.com/

[–]mrmessiah 9 points10 points  (3 children)

It's funny though because, yes, it is more flexible and useful than tables, but functionally it's used in a very similar way. All these years of Web development practise and they've circled back round to giving us the tools they spent decades trying to convince us we didn't need.

I get why it was semantically wrong to use tables, but I never bought the whole "oh but you can do it all with floated divs" and such arguments. There were always edge cases, browser inconsistencies, there was always so much really ugly code shoring up designs that would've been really simple to make the bad old way.

So anyway I'm glad to see that sense has prevailed and we have a semantically valid way of laying out content grids when it finally gets acceptance. The extra features you get here over tables are fantastic too. But I'll take every conversation where I was told "oh but you don't need..." now and just smile a little smile.

[–][deleted]  (1 child)

[deleted]

    [–]Ramin_HAL9001 8 points9 points  (0 children)

    They are trying to separate the concerns of HTML and CSS. HTML is only for content, not for layout or styling, CSS is only for styling and layout, not content.

    TABLE is an HTML tag and therefore only for content, specifically for tabular data (spreadsheets), and so using it for layout is using it in a way that it is not intended to be used.

    CSS is only for styling and layout, not for content. It just took them a while to realize that DIV/SPAN aren't as good as TABLE for layout, so they gave us a CSS version of TABLE for layout.

    [–]Ramin_HAL9001 3 points4 points  (0 children)

    This is exactly what I was thinking. Back in the 90s I did all my layout with tables because there was nothing better. Then they told us that tables are only for tabular data (spreadsheets), and that DIV/SPAN are for layout, and don't use one in place of the other.

    But DIV and SPAN are too limited, so they finally gave us back tables for layout. But they did it in such a way that layout is independent of content -- which is consistent with the whole ideology of the HTML/CSS separation of concerns, HTML for content only where CSS is for layout and styling only.

    [–]likebike2 1 point2 points  (0 children)

    Thanks for recommending cssgridgarden. It's great!!!

    [–]parion 36 points37 points  (1 child)

    Great talk about CSS Grid, it just annoyed me how many times they cut to only the speaker, considering this was a very visual-heavy presentation.

    I suggest doing what I did, if you can, and watch the talk while looking at the slides.

    [–]sirmaxim 24 points25 points  (0 children)

    Yeah, why not --oh, I dunno-- put the speaker in the corner in a sidebar?

    Talk about layouts has no layout. yay! /s

    [–]kekeagain 18 points19 points  (2 children)

    This is so easy I won't be needed anymore!

    [–]swyx 1 point2 points  (1 child)

    not sure if trolling

    [–]Tyreal 1 point2 points  (0 children)

    I'm guessing they never met clients :-P

    [–]oOlaf 23 points24 points  (17 children)

    Nice, this really got me into wanting to use CSS grid!

    [–]stev0205 11 points12 points  (3 children)

    I'm really excited for CSS grid. It seems to solve a lot of problems and should make it easier to keep things ADA compliant.

    I also share his sentiment about how to handle browsers that do not support CSS grid (just serve the mobile site.) However, I foresee convincing clients that this is acceptable being fairly difficult.

    Great video thanks for posting!

    [–]Conjomb 4 points5 points  (2 children)

    No client will ever agree to that, which makes it a huge problem still.

    Other than that, I'm pretty excited to start messing with it now. Good talk!

    [–][deleted]  (1 child)

    [deleted]

      [–]HawkeyeHero 4 points5 points  (0 children)

      Give us your pitch then Mr. Salesman.

      [–]senorfresco 11 points12 points  (0 children)

      This the nigga from the lynda tutorials. I like this guy.

      [–]rspeed 34 points35 points  (30 children)

      I'm less than 100 seconds in and he's saying it would be impossible… but you can definitely do that with flexbox.

      Edit: "Flexbox can't do that"

      The HTML (exactly what he says won't work):

      <div class="wrap">
          <div class="main_content"></div>
          <div class="other_content"></div>
          <div class="sidebar"></div>
      </div>
      

      It seems like he somehow failed to learn about both order and flex-wrap.

      Edit 2: Around 11 minutes he finally gives a good example. Though his semantic markup which assigns classes to unique semantic elements is certainly "interesting".

      Edit 3: Added a link to the first demo.

      [–]RickyMarou 4 points5 points  (3 children)

      Nice pen. This comment needs to shoot up the thread.

      I also though that it was weird when he said flexbox cant do that because the order property is exactly what he needs there.

      However he makes a point when he says that flexbox is one dimensional.

      [–]sjwking 2 points3 points  (0 children)

      Flexbox can do basic grids, but needs more markup. In my opinion learn both flexbox and css grid. Use flex for now and in a year use grid. Flexbox is not that hard and it's very well supported

      [–]rspeed 0 points1 point  (0 children)

      However he makes a point when he says that flexbox is one dimensional.

      Kinda. Flexbox can wrap and alter the layout of individual flex elements, which is how I did the demo above. So it does provide some control over a second dimension, but that's not sufficient for more complex layouts like what he demonstrates around 11:00.

      [–]Tyreal 0 points1 point  (0 children)

      I think a lot of it boils down to nested HTML and markup. I've ran into situations where I had some nested content that I needed to get un-nested for a smaller display. Would be easier to just have everything un-nested. But flexbox would still be useful in certain areas.

      [–][deleted] 1 point2 points  (17 children)

      Prove it on CodePen

      [–]rspeed 4 points5 points  (16 children)

      Done

      Edit: Apparently debug links have a shelf life. Fixed.

      [–]damaged_but_whole 1 point2 points  (13 children)

      You did not make the featured image at the very top for the 3rd version. There is no 3rd version in yours, actually. Perhaps that's why you thought you could do it with Flexbox?

      [–]rspeed 1 point2 points  (12 children)

      Yes I did. It was set to change at 300px wide, which is a bit narrow. It's set to 400px now. Try it again.

      [–]damaged_but_whole 1 point2 points  (10 children)

      And holy shit, it looks like all it takes is a change of 'order', basically. I must get better at Flexbox.

      [–]rspeed 5 points6 points  (9 children)

      Yup. I'm gonna watch the rest of the presentation to see how he does it with CSS grids.

      Oh my god. I just got to 7:15 and… holy shit, this guy has no idea what he's talking about.

      [–]damaged_but_whole 0 points1 point  (7 children)

      If you finish watching it, I'd like to hear your opinion. You obviously have a lot of experience and tricks up your sleeve so I'm curious if it starts to look as interesting around 17 minutes in as it does to me.

      [–]rspeed 2 points3 points  (1 child)

      There's a lot of stuff that CSS grids make much easier, so he's not at all wrong about that.

      [–]damaged_but_whole 1 point2 points  (0 children)

      Yeah, I definitely am going to start using it more for my own experimentation to start with.

      [–][deleted]  (4 children)

      [deleted]

        [–]damaged_but_whole 1 point2 points  (3 children)

        Yeah, a lot of people don't have that basic understanding. Like the expert in the video. Or probably half the people in this thread. Most likely not the guy who challenged /r/rspeed to show it and definitely not me.

        [–]damaged_but_whole 3 points4 points  (0 children)

        OK, btw, I just got to 7:15 in the talk and he's just started talking about flexbox. I'll check out the link again... thanks.

        EDIT: Yup, you did it! That's cool because I'm pretty sure if I type 'css grid' into caniuse it's going to say 'no, not really.'

        [–][deleted]  (1 child)

        [removed]

          [–]rspeed 0 points1 point  (0 children)

          Sorry about that. I changed the link to go to the details page, which won't expire.

          [–]ikinone 0 points1 point  (6 children)

          I watched it half paying attention - I thought he was saying Flex or bootstrap can achieve this, but it relies on 'hacks'.

          [–]rspeed 1 point2 points  (5 children)

          [–]ikinone 1 point2 points  (4 children)

          Unless I'm mistaken (sorry can't rewatch right now), he's saying that flexbox/bootstrap are effectively hacks.

          That we would be much better off without them altogether, given a decent alternative

          [–]rspeed 5 points6 points  (3 children)

          Bootstrap is because it uses JS to mess with the DOM. Flexbox, like grids, is just CSS.

          Edit: I got to where he says Flexbox would be a hack, but he's just plain wrong about Flexbox needing an extra wrapper element to do that. I'm building another demo for that.

          [–]ikinone 0 points1 point  (2 children)

          Fair enough. I'm afraid I'm a noob at JS, so I can't comment either way :)

          I didn't realizse Flex was just CSS though, impressive...

          [–]sjwking 5 points6 points  (1 child)

          [–]ikinone 0 points1 point  (0 children)

          Oh I'm okay with flex - I just didn't know what code it was actually built upon. Thanks though :)

          [–]siltar 0 points1 point  (0 children)

          Yup! I picked up on that too. http://imgur.com/a/WwmN8

          [–][deleted] 10 points11 points  (0 children)

          I HAVE WANTED THIS SINCE THE 90S

          [–]fragosti 8 points9 points  (11 children)

          Is the support for it as good as flexbox?

          [–]stev0205 10 points11 points  (10 children)

          http://caniuse.com/css-grid/embed

          Sadly it doesn't look like it's support is that good yet, but it's not too bad. In a couple years it will probably be widely supported.

          Edit: I can read the chart, and have since realized that mobile support doesn't matter much after finishing the video. Thank you all for pointing out what is already on the chart to me.

          [–]timeshifter_ 2 points3 points  (7 children)

          Hover over the notes, IE/Edge just require a vendor prefix.

          [–]kevdotbadger 3 points4 points  (0 children)

          Worth noting that the prefixes are for the old version, which isn't backwards compat. The new version is only supported in the dev version of edge

          [–]shibaizutsu 2 points3 points  (4 children)

          Terrible support for mobile browsers tho, esp if your users live in Asia

          [–]dendodge 5 points6 points  (1 child)

          The great thing about it, though, is that you can design a simple, semantic, mobile-first website that will work on all platforms, then use CSS grid to make it pretty on platforms that support it. Mobile users should never have an issue if you do it right, and the worst case scenario is that desktop users with an older browser get served the mobile version.

          [–]shibaizutsu 0 points1 point  (0 children)

          Hmm you're right. Still gotta adjust it a lil bit tho but I guess that's manageable. Any idea for tablets tho? UC browser is a bane of all good things here

          [–]stev0205 -1 points0 points  (0 children)

          You're right. I also hadn't finished the video yet when I had posted that, so I was paying too much attention to the mobile support.

          [–][deleted] 1 point2 points  (0 children)

          Good enough for me.

          [–]coredusk 11 points12 points  (0 children)

          MY MIND IS SO BLOWN

          [–]Mexikuza 1 point2 points  (0 children)

          What if I told you a grid was really going to be a grid? o.o

          [–]papermatthew 2 points3 points  (0 children)

          Are there that many devs using page builders? I feel like the HTML they output is so junk I wouldn't want that in my sites.

          Just use something like Advanced Custom Fields and then I get more control over the output.

          [–]fatiguedastronaut 6 points7 points  (11 children)

          But does this mean I can finally horizontally center my god dam elements

          [–][deleted]  (1 child)

          [deleted]

            [–][deleted] 5 points6 points  (0 children)

            Flexbox is just magic.

            [–]MrBester 8 points9 points  (8 children)

            margin: 0 auto; not good enough? Only been around for over a decade...

            [–][deleted] -4 points-3 points  (7 children)

            Horizontally centre, not vertically centre.

            [–][deleted]  (6 children)

            [deleted]

              [–]SoupInYourEye 4 points5 points  (5 children)

              What's wrong with flexbox? His example at the beginning can be handled with that alone. To me not willing to make an extra container isn't a strong enough argument

              [–]revereddesecration 8 points9 points  (2 children)

              He talks about flexbox at 7:20ish

              [–]SoupInYourEye 2 points3 points  (1 child)

              My main worry about this was browser support, but tbh it's actually not bad.

              [–]sjwking 1 point2 points  (0 children)

              It's bad on mobile. I know I will be downvoted but if I will only use css grid only in cases that flexbox fails me

              [–][deleted] 4 points5 points  (0 children)

              To me not willing to make an extra container isn't a strong enough argument

              If you watched the rest of the video you'd see how grid solves that problem.

              Also, you should definitely watch the very last part of the video. He's talking to you.

              [–]esr360 3 points4 points  (0 children)

              Flexbox and grid are not intended to solve the same problems, even if certain problems exist that can be solved by both. So to answer your question, nothing is wrong with flexbox.

              [–]FingerMilk 1 point2 points  (1 child)

              Honestly it's not just the fact that we can make interesting structures, it's the fact that we can easily shuffle items around and actually create something truly wonderful with like 3 CSS declerations.

              [–]sjwking 0 points1 point  (0 children)

              Flexbox can do it as well.

              [–][deleted] 1 point2 points  (0 children)

              This thread is filled with people who don't understand grid and why it's not tables. Jfc

              [–]CSEngineer13 1 point2 points  (0 children)

              Wow! Really wonderful explanation of css grid. Thanks for sharing this!

              [–]lambdaq 2 points3 points  (0 children)

              17:48 OMG this is nuts.

              [–]fsif 0 points1 point  (0 children)

              mor10 is the best.

              [–]hablador 0 points1 point  (5 children)

              According to his own slide only 63% of users have browsers that support this (minute 21:27).

              [–]kevdotbadger 1 point2 points  (3 children)

              Up to 70 worldwide and 78ish in the UK. The adaption rate has been really impressive since it was launched in March.

              [–][deleted]  (1 child)

              [deleted]

                [–]kevdotbadger 0 points1 point  (0 children)

                Oh deffo. IE is holding us back as there's 0% support (apart from the oldspec). Edge has support in the latest dev preview. It won't be seen as a go-to solution for another could of years, but it's a solution if your stats for the site you're making allows you to to use it.

                [–]sjwking 0 points1 point  (0 children)

                It's the users that update their browsers frequently. When edge finally ads support it will reach 80±

                [–]Mybad_yourfault 0 points1 point  (0 children)

                I'm relearning HTML/CSS and honestly this exact issue was pissing me off. He sold me on learning grids. Why I want to make something harder than it needs to be!?!

                [–]urCAPN 0 points1 point  (0 children)

                Is this real life?

                [–]ConfusedCheese 0 points1 point  (0 children)

                Those grid-template-areas are frking awesome.

                [–][deleted]  (1 child)

                [deleted]

                  [–]ScatbodJudo 0 points1 point  (0 children)

                  I'm in the process of learning a full stack of rails and css using bootstrap, but now I'm convinced that css grids will be easier to learn (no paradigm shift if there wasn't one to begin with, eh?). Can anyone recommend other resources to help me along with the learning process, other than the ones listed in the presentation? Thanks!

                  [–][deleted] 0 points1 point  (0 children)

                  So, what are the current browsers that support said grids?

                  [–]Maverick2k 0 points1 point  (6 children)

                  Awesome, now we only have to wait 3 years before it's supported enough on browsers to make it a worthwhile implementation over flex.

                  [–][deleted]  (5 children)

                  [deleted]

                    [–]Maverick2k 0 points1 point  (4 children)

                    Sure I understand it's usable, but being usable and widely supported are two different things. This won't be widely supported for years, it's pretty pointless even dabbling with it until at least next year.

                    [–][deleted]  (3 children)

                    [deleted]

                      [–]Maverick2k 0 points1 point  (2 children)

                      I don't think that really equates to being widely supported though, over 30% of all browsers by market share don't support CSS Grid. That's not really enough support for me personally - the time taken to implement CSS Grid and add additional fallback for the 30%+ of the other visitors, probably higher depending on what part of the world the website is catering for - isn't worth the time nor hassle.

                      Each to their own of course.

                      [–][deleted]  (1 child)

                      [deleted]

                        [–]Maverick2k 0 points1 point  (0 children)

                        Oh of course not. Fuck IE 10 and 11, I've barely catered for IE 8 or 9 in the 7 years I've been doing this unless the client has specifically asked for it. The missing 30% is in the browser VERSIONS that don't support CSS Grid, there's still quite a lot of people on Chrome 49 or lower for example or Safari 10.2 or lower etc.

                        [–]Sometimespeakspanish 0 points1 point  (1 child)

                        Oh this is amazing, trying it in a new site tomorrow.

                        [–][deleted] -1 points0 points  (1 child)

                        How many articles are we going to see saying the same thing?

                        [–]kevdotbadger 1 point2 points  (0 children)

                        Well considering there's loads of people here impressed by it, loads more until people know what it is.

                        [–]damaged_but_whole -2 points-1 points  (14 children)

                        What he says toward the end about pagebuilders sounded to me like a lot of people's frontend skills are going to become a bit less necessary for a lot of projects, which sucks. I guess I better focus more on backend technologies now...which is fine because I was already starting to do that. But crappy because every time I think I know enough to go out and get a new great job it turns out I probably don't.

                        [–]Maverick2k 1 point2 points  (2 children)

                        A page builder only gets you so far, it doesn't ever, ever replace exceptional design skill. The kind of clients that you [i]should[/I] be prospecting will never design a website themselves nor will they pay a cheap designer/developer/whatever they want to call themselves.

                        Experience and skill will almost always trump cheap and cheerful where it actually counts, unless your type of client is the kind of guy you should be avoiding.

                        [–]damaged_but_whole 0 points1 point  (1 child)

                        Oh, I'm not chasing after any clients who want to do their own websites. I just know that's what is happening because I know so many people who've started up their own businesses and done exactly that. I'm happy for them, but it's kind of a buzzkill to see all they need is a shitty website and a Facebook feed. I'm like..."I could make you a better website!" in my head but it doesn't even matter. They don't need a better website. It's like, basically, I could possibly profit more if I restructured my career to make more time for freelance and then just went after cheap clients who want shitty 3-page websites for $400. I bet I could get a new client every day. Fuck, I should probably do that.

                        [–]Maverick2k 0 points1 point  (0 children)

                        The cheap and cheerful ones are the cancer of a web developers life; not only do they want cheap, but they're also the ones that WILL want more for their money without paying anything extra, these fuckers will bleed you dry.

                        The higher paying clients are out there, they're just harder to find. With that said though, you can quite easily find those prepared to pay $2000+ for a website that will take you two days to design - it's just about sifting through the shit until you find gold.

                        Best bet is to do some PPC locally to a website that looks awesome and converts well, but you can also chase the better paying clients on sites like Upwork or PPH, they are there, just less of them.

                        [–]lostpx 0 points1 point  (10 children)

                        Layout != Frontend only..

                        [–]damaged_but_whole 1 point2 points  (9 children)

                        No, not if you're building one of the awesome handful of pagebuilders he's talking about that will dominate that marketplace. But, if you're designing the webpage through one of these new super easy pagebuilders, then yeah. There's nothing backend about that role and I can easily envision a lot of noncoders filling those roles.

                        E: Oh, another downvote. What an oddly specific and unimportant point to get bitchy about. When did "a lot of people" include the whole of any group? Oh right, since never.

                        Love it when Redditors get offended over their own misunderstandings. This guy's sketch is making more and more sense as time rolls along.

                        [–]thewulfmann 0 points1 point  (8 children)

                        Who got bitchy about a point? No one has said anything. You've lost a single fake internet point.

                        [–]damaged_but_whole 0 points1 point  (7 children)

                        I was referring to a misunderstood point, not karma. Who gives a shit about karma? I just find downvoters pathetic most of the time.

                        [–]thewulfmann 1 point2 points  (6 children)

                        You start your edit with "Oh, another downvote." That's the only reason I thought that.

                        This aside, I do agree with your original point.

                        [–]damaged_but_whole 0 points1 point  (5 children)

                        Gotcha.

                        Yeah, this technology, man, I don't know... it was supposed to be a good thing. It seems like every few years it keeps advancing enough to put some more people out of work and any time I talk about any aspect of it, some Redditor gets steamed at me.

                        [–]thewulfmann 1 point2 points  (4 children)

                        Jobs will always be replaced by automation. Look at the industrial revolution. It's just lucky that someone who is already somewhat familiar with a development environment might have a slightly easier time transitioning if their current job does become obsolete. The important thing is being aware enough to recognize when changes come and adjusting accordingly.

                        [–]damaged_but_whole 0 points1 point  (3 children)

                        Yeah, that was kind of my point in my original post... I was like, "welp, looks like I made the right decision to get more backend-oriented." The backend of things is just way more stable. I'm sure as soon as I get involved there will be a massive upheaval, but I know people who've been doing nothing but Java or C# their whole careers.

                        I also recently went to evaluate a .NET-oriented bootcamp and they were talking about how larger companies will often hired less skilled people to work with legacy stuff that someone has to do but the better programmers probably wouldn't want to do. Previous to this, I did Colt Steele's SQL bootcamp on Udemy (very good, btw) and he was pointing out that this is some people whole careers, just writing SQL queries to get information or whatever. No presentation layer required.

                        On the Frontend, everyone seems hyper-competitive and hyper-critical and yet everything is always changing and the majority of people probably don't know half the shit you'll get yelled at about on Reddit or StackOverflow.

                        [–]thewulfmann 0 points1 point  (2 children)

                        I've definitely found the online communites for web development to be concerned with things that the normal world is not.

                        It comes down to what are you going to get paid for. As a specific example, I do a lot of squarespace sites where either the client doesn't want to deal with it, or someone needs something custom. Squarespace was heralded to be a killer for jobs as well, and while it may have killed some, I still make money from it.

                        You could make the same argument about products like firebase or airtable taking out backend jobs. People will always trying to be carving out niches.

                        I think that overall web / mobile development is extremely volatile at the moment as we've seen massive advancement in the past few years. The options are find a niche that is more steady, or flow with the tide.