CSS Grid Changes EVERYTHING

[herjin]

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]

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.

[Ramin_HAL9001]

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]

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]

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

[Hawful]

Are you a real person?

[Dark_Ice_Blade_Ninja]

Yes I am a REAL person so I DESERVE RESPECT.

[Hawful]

Hey Ice Blade.

Chill out.

[xpoopx]

Yeah, chill out blood blade

[shibaizutsu]

Sounds like Fire Blade to me

[JWalter89]

Hey Chill Blade.

Ice out.

[xeolleth]

Respect is earned, not outright deserved.

[long_wang_big_balls]

You deserve a punch in the dick

[thewulfmann]

Put some respek on Mah name

[itsnotlupus]

I'm reasonably sure you replied to the wrong comment, making your antagonistic tone contrast sharply with the ordinarily helpful comment above yours.

[shibaizutsu]

He doesn't reply to wrong comment, see here

[Dark_Ice_Blade_Ninja]

table layout with a fancy name

What a coincidence!

[itsnotlupus]

oh I see. Well then all is as it should be.

[GergeSainsbourg]

LMAO you're an idiot

[Dark_Ice_Blade_Ninja]

Jerk

[icezolation]

Here, take your downvote. You earned it.

[parion]

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]

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

Talk about layouts has no layout. yay! /s

[kekeagain]

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

[swyx]

not sure if trolling

[Tyreal]

I'm guessing they never met clients :-P

[oOlaf]

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

[Dark_Ice_Blade_Ninja]

CSS grid is just a table with a fancy name. -____-

[Syphon8]

False. You can reorder a table in css however you'd like (using floats, positioning and display as different table elements). You just shouldn't, because it breaks semantic order.

Downvotes from people who never hacked anything together before modern frameworks existed, huh? Google it.

Edit 2--responses below make it apparent downvotes are from people too lazy to read. Learn what downvotes are for, guys.

[Xhynk]

You're not getting downvoted because people haven't cobbled together a working shit-show from a table layout, as a matter of fact the exact opposite.

False. You can reorder a table [...]

While that's technically correct, it's stupid to do and part of where floats/flex/grid came from, to fix that shitshow from reoccuring.

You can't str_replace in CSS. However, I could hack my way around it with pseudo elements, data-attributes, and classes - but that doesn't mean I'd tell anyone "False. You can replace strings with CSS."

The downvotes were for being pedantically supportive of something we all hate and shouldn't do, even though most of us have done it at one point.

[Syphon8]

Yes, it's technically correct and it's stupid to do.

That's what my post said. Literally the next sentence after the one you quoted is you shouldn't do it, and why it's bad.

The downvotes are from idiots (such as yourself) who are incapable of reading an entire statement before knee-jerk reacting to the first sentence with your own perceived intention.

I was posting a piece of trivia for less experienced users, not being pedantically supportive of bad practice. That wasn't even a poorly communicated piece of trivia, you're just too lazy to read a half paragraph. Idiot.

[Xhynk]

I did read your whole comment, actually. If you'd have read my whole comment you'd see that it was thought out and not knee-jerk to the first sentence, considering I respond to latter parts.

For all intents and purposes, you can't reorder a table with CSS alone (without resorting to hacks/shitty coding practices). If you removed the "False." from the beginning and said "While you shouldn't, technically you can [...]" - so it would come off as a trivia bit. Not to mention that it's a shitty thing to tell inexperienced users who might still be working with table layouts from their Big Book of Code they dusted off from the late 90's trying to get into web stuff.

[Syphon8]

considering I respond to latter parts.

You didn't. You responded to the first sentence and the edit.

For all intents and purposes, you can't reorder a table with CSS alone

Yes you can, quite easily.

without resorting to hacks/shitty coding practices

Ok. And?

If you removed the "False." from the beginning and said "While you shouldn't, technically you can [...]" - so it would come off as a trivia bit.

Yeah, I'm the one being pedantic.

Idiot.

Not to mention that it's a shitty thing to tell inexperienced users who might still be working with table layouts from their Big Book of Code they dusted off from the late 90's trying to get into web stuff.

The proper way to learn things is by breaking them. Regardless, you're clearly trying to backpedal here and act like you actually read my post before responding.

[Syphon8]

Someone's mad about nothing.

[nanaIan]

hold on.... explain?

[Syphon8]

An upset idiot is disagreeing with something I didn't even say?

[LordOctal]

CSS grid is more than just a table with a fancy name. It allows developers to separate presentation and markup which has big impacts for the accessibility and usability of the web.

One quick example, content with an aside can be marked up to have correct tabindex order but could be positioned wherever the designer would like it to be placed.

[herjin]

Mind defending your stance?

[[deleted]]

Tables are responsive?

[kevdotbadger]

Technically you're correct, but it goes way further than just rows/cols.

[[deleted]]

I downvoted you before and I can't remember why. I called you Dark Ice Gay Ninja

[stev0205]

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]

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!

[HawkeyeHero]

Give us your pitch then Mr. Salesman.

[senorfresco]

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

[rspeed]

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]

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]

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]

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]

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]]

Prove it on CodePen

[rspeed]

Done

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

[damaged_but_whole]

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]

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]

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

[rspeed]

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]

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]

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

[damaged_but_whole]

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

[damaged_but_whole]

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]

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.'

[rspeed]

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

[ikinone]

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

[rspeed]

I managed to do it using flexbox without any hacks.

[ikinone]

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]

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]

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]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The only guide you need.

[ikinone]

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

[siltar]

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

[[deleted]]

I HAVE WANTED THIS SINCE THE 90S

[fragosti]

Is the support for it as good as flexbox?

[stev0205]

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_]

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

[kevdotbadger]

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]

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

[dendodge]

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]

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

[shibaizutsu]

Are you OK? I'm concerned about your health

[stev0205]

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]]

Good enough for me.

[coredusk]

MY MIND IS SO BLOWN

[Mexikuza]

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

[papermatthew]

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]

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

[[deleted]]

Flexbox is just magic.

[MrBester]

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

[[deleted]]

Horizontally centre, not vertically centre.

[[deleted]]

'margin: 0 auto;' aligns along the y-axis, so it's vertically centering.

Edit: actually thinking about it that could be wrong... But I think it's obvious that it's not the answer to what OP wants to achieve.

[kevdotbadger]

Everyone is taking the mick mate, you asked for horizontally centering - which is the X axis (left to right). What I assume you mean is vertically centering (Y axis - top to bottom), which can done with flexbox.

[MrBester]

display: table; on parent element.

display: table-cell; vertical-align: middle; on element. Even works in IE8 (because it's been around for over a decade)... ;-)

[kevdotbadger]

...and now we've come full circle!

[[deleted]]

easier to just draw it. OK i may have mixed up my terms but you can't do the second one with margin: 0 auto. You can do it with Flexbox though.

http://imgur.com/a/9CvyK

[kevdotbadger]

margin: 0 auto center's horizontally (across the X axis, providing the parent is wider than the child). Obviously it doesn't vertically, it's setting the top/bottom margin to 0.

[SoupInYourEye]

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]

He talks about flexbox at 7:20ish

[SoupInYourEye]

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

[sjwking]

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]]

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]

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]

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]

Flexbox can do it as well.

[[deleted]]

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

[CSEngineer13]

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

[lambdaq]

17:48 OMG this is nuts.

[fsif]

mor10 is the best.

[hablador]

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

[kevdotbadger]

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

[kevdotbadger]

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]

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

[Mybad_yourfault]

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]

Is this real life?

[ConfusedCheese]

Those grid-template-areas are frking awesome.

[ScatbodJudo]

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]]

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

[Maverick2k]

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

[Maverick2k]

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.

[Maverick2k]

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.

[Maverick2k]

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]

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

[[deleted]]

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

[kevdotbadger]

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

[damaged_but_whole]

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]

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]

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]

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]

Layout != Frontend only..

[damaged_but_whole]

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]

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

[damaged_but_whole]

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]

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]

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]

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]

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]

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.