Overlap on the Web, Graphic Design Made Easy with CSS Grid

[@MegaRonnie2]

Came here to learn grid, ended in falling in love with Jen. Can listen to her talk all day

[@zakourille]

me, drunk at 2:57am trying to figure out how to make my website, falling in love with Jen Simmons through these videos: 👁️👄👁️

[@thephrase22]

I stopped this video halfway, just needing to say that I love it! A design focused explanation of the new functionality in css. Super inspiring! Thanks a lot!!! Having typed this, now I can watch the rest of the video more peacefully .....

[@keithpurtell1213]

When I was a kid, I went through this phase where I could not stand to see any item of food on the plate touch any other item of food. That''s what we've been saddled with in web page layout for more than 15 years. It may seem trivial to simply have visual elements overlap, but CSS Grid opens up countless possibilities. Thank you Jen, for another outstanding tutorial.

[@jessicaelle4664]

This is the video that finally made CSS Grid click for me. One of my supervisors always shares Jen's videos and I'm so stoked to be on this layout traiiiiin

[@MrAlithom39]

never was interested in css until i started watching these videos. As a web developer I've put off learning it because I've found backend & logic much more intriguing, but these videos got me pretty psyched about it.

[@MarkusEicher70]

Hi Jen. Your videos are so helpful, thank you for sharing them! 🙏 After watching a lot of them, I start to understand how important it is to know as much as possible about grid. Happy I found your channel. 🍀 Gives us many new options, that were almost undoable without it. Very nice.

[@herosquadlivemusic4815]

Wow, this in the third time that I've been banging my head against a wall on a project, only to come across one of your videos and get the inspiration needed to solve my problem. Thank you so much and keep up the great work!

[@crooker2]

Love your videos, Jen. Thank you for being such an inspiration. Keep them coming! With the power of css grid and the forthcoming css shapes, I can see it won't be long before designing the Web will be done in desktop publishing apps, and will be identical to designing print publications (but responsive and dynamic)

[@harrycallahan712]

Thanks Jen. I'd been trying to overlay text over an image, without using a background image or absolute positioning, and this was a perfect explanation for me.

[@CattoRayTube]

Those transparent circles were a really cool example.

[@china113123]

thanks a lot, trying to make overlay with absolute value is a such a pain, I was struggle to find another solution till I found your video

[@Mel-mu8ox]

I'm so glad I found this channel :D

[@AmandaLucaseu]

Super video Jen - love your way of explaining things

[@daytonp]

I ❤ Jen Simmons.

[@rrahulgupta11]

Hi Jen, we love your info videos. I have request, please make a video, what should we follow best practices for website design. Graphics and css both. Please

[@Vaskamos]

I just found Your channel, and what's super helpful is the tools to inspect grids. I used grid before, but never quite used that line numbering. Thanks! Subscribed!

[@andrew.schaeffer4032]

Wow, thanks for this very well done video! Now I know I need to up my css grid game

[@AlannaRisse]

SO glad I found your videos! Thank you!

[@mehmetoguzkazkayasi1944]

Great video. Although, why do we see the circle with a lower z-index at 7:15? I can't see any opacity too.

[@mehmetoguzkazkayasi1944]

Oh okay, opacity is defined in the background property as 0.5

[@douglasfrb]

That's what was looking for. Thanks!

[@exodion4173]

Thank you for this. This is exactly what i was looking for !

[@ilarum555]

each video is nice... helpful to learn... thanks...

[@bryanbanda]

I can see this channel becoming my new favorite!

[@cadillacone.]

thanks for sharing, can you tell us what do you use instead of a mouse or trackpad? greetings :D

[@pnjegosh]

Excellent explanation, good job!

[@leskeen9866]

Please can you advise me, I have lust started a vertical learning curve using css Grid. Been following you on "You Tube" all good, THANK YOU. I have a couple of questions. 1) Is this tool slow in responce changes. 2) When I started to change an old existing web site from "div's" to "class" getting it ready for responsive / grid working, after i have been experimenting with placing items in various places, i had all sorts of issues. Then I noticed the tool did not change my overlay grid to . name from # name a . I do not know if I am at fault, i.e typo's or it's a bug that needs looking at. I am trying to make a large competition layout , a sports competition draw sheet. round 1 64 players round 2 32 player and so on till winner is shownas 1 name only. 3)Can grids do large numbers?

[@anareginacoronado1147]

It is probably a good tutorial for someone who already has some experience as a front end. I´m a begginer and I am struggling with this. Showing the detailed code is a better option for begginers.

[@ck0024]

*No need to worry. First learn basic **_Tags, Attributes_** & **_CSS property_*

[@teacherbuknoy]

I think that is Jen's target audience, people who are already experienced with fron-end stuff.

[@anareginacoronado1147]

@@teacherbuknoy It seems. I've been studying front end for 4 months now. I do know a little bit but also english is my second language so it is harder for me

[@teacherbuknoy]

@@anareginacoronado1147 English is my second language too, and it's sad that there's not enough study materials in my native language, so I had to learn English really well. Good luck on your front-end journey! :D

[@Hermans86]

This is a game-changer! Thank you so much!

[@martinchirino5455]

Hi Jen, I tried replicating your last example, the one with the big 9 on it. Could you please tell me why it is necessary to add margin-top: -4rem to place the 9 over the grid even we are using a higher z-index. Without that margin, the element seems to be in the specified grid-area, but the number shows way down. Why does this happen? Thank you so much for these videos, they are very helpful Cheers, Martin

[@cdavid0624]

Her voice is so calming.

[@filipevalentegomes2383]

awesome video again we have more power with css grid but so much more thinking involved now but its all fun

[@adrianojedaf]

wow... super informative! thank you. Great content.

[@Mashael_96]

Very helpful thank you 👏👏

[@Explore2Adore]

You are awesome, thank you for the ideas 🙂👍

[@lakshayverma791]

Is this a responsive overlapping layout? Like takes up complete edge to edge column space on mobile screen instead of overlapping?

[@youcanthandleme9999]

~Gratitude~ to you, Jen... I think you're awesome

[@QuandarNl]

Hello I'm the learning progress in webdevelopment (student). Would using grid be better for creating gradient or transparant overlays on images on hover or is the old way better? For example I did this: figure { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; img { grid-row: 1; grid-column: 1; z-index: 0; } .overlay { grid-row: 1; grid-column: 1; z-index: 1; opacity: 100; &:hover { background-color: rgba(0, 0, 0, 0.5); } }

[@eduardoaranda4379]

Does anybody know how to open layout tab in chrome?

[@hammadahmad100]

There wasn't any, last time that I checked

[@Tyler-lt7zz]

click + control then select "inspect"

[@rodericmege4549]

Great video, Thanks Jen ! :-)

[@IvanOung]

My god this is awesome! Please keep up with the good work! Sorry for asking, but I would like to know how to activate the layout->overlay grid options in the browser?

[@thiagovilla970]

I can't help loving these wisdom pills!

[@geelemo]

i love this video. all my pain points have been discussed

[@Gagglewarrior]

“Layouts are super exciting” 😳😳😳😳😳😳😳. The whole time just stares right through the screen

[@yanushzakshewsky736]

Great video, thank you! btw, what is this browser/devtools used? Are you planning a video about tools?

[@LayoutLand]

Yes I am going to make a video about the tools available for layout. That is the Firefox CSS Grid Inspector. It’s in Firefox DevTools, in a panel marked “Layout”.

[@yanushzakshewsky736]

Good to know! thx!

[@nyciar]

No more position absolute on image overlays?

[@lucascavalcantidossantos]

How do you know or decide which item stays on top when overlapping?

[@ralphstube]

I'm sure you have it by now

[@zaboogoosfraba6699]

I,ve never seen anyone get so excited......lol

[@darrylwhitworth2532]

Just Brilliant!

[@generaldesigner6137]

okey can we put the grids inside of each other? or did i not understand the explanation >...

[@suav1148]

Great video!! Thank you!

[@AK-fg5oi]

My chrome inspect tool does not display all these tabs (Layout etc), where to enable them ?

[@renatocampos9146]

its firefox

[@thaysdosSantosneves]

Girl, ur awesome! (: Love your videos.

[@eric7758]

Great Content. Thanks

[@vik8860]

Which browser has a layout tab ?

[@LayoutLand]

Firefox has the CSS Grid Inspector in a "Layout" tab, now in a third pane.

[@yira.linares]

Amazing!

[@mikl2345]

Marvellous!

[@ddriese]

I feel so confused - what web browser are you using in this video?

[@HashimWarren]

firefox

[@バニヤロサン]

I love your videos

[@nikmadan]

i am researching the idea, why does overlapping design look more interesting/ appealing ?

[@techtipsuk]

Are you seeing any of these techniques being used in the wild yet?

[@LayoutLand]

I'm starting to...

[@mohamedeid1422]

oh, Thank you very much : )

[@fdc_8507]

Hi Jen Is That true : "Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts." I read it in css-tricks.com Thanks

[@LeadSwitchKick]

Use it together.

[@LayoutLand]

“Flexbox Layout is most appropriate to the components of an application, and small-scale layouts, while Grid layout is intended for larger scale layouts.” Is this true? No, this is not true. Grid was not “intended for larger scale”. Both were intended to be used however you want to use them. As I cover in my video about Flexbox vs Grid, each accomplishes a different kind of layout. I do expect that Grid will be used more often for the “bigger” layouts - the whole page, etc. Both are amazing for little components. It depends on the result you want, not the size of the layout.

[@edwassermann8368]

Dope!

[@roceb5009]

So what I'm hearing is that even with CSS grid, things can't overlap. Things can BE overlapped, but there's no way to go from two things being next to each other to one being on top of the other without using a breakpoint to switch the order of the grid lines.

[@francescologrillo443]

grazie

[@valcmeza]

She is so cool 😎

[@BaronFerguson]

I stop back here every 6 months to relearn grid. I think it'll stick this time.

[@alialnajjar9583]

This lady would make anything sound interesting. I can listen to her talking about salad

[@Gagglewarrior]

Asperger’s

[@syedahmed6319]

Bob

[@foxtail7363]

mozzila brought me here lol