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 .....
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.
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.
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
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)
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!
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.
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.
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
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!
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?
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); } }
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
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.
@@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
@@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
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”.
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?
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.
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
“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.
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 .....
Came here to learn grid, ended in falling in love with Jen. Can listen to her talk all day
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.
me, drunk at 2:57am trying to figure out how to make my website, falling in love with Jen Simmons through these videos: 👁️👄👁️
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.
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
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)
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!
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.
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.
Those transparent circles were a really cool example.
I ❤ Jen Simmons.
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
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!
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
thanks for sharing, can you tell us what do you use instead of a mouse or trackpad? greetings :D
I'm so glad I found this channel :D
Super video Jen - love your way of explaining things
SO glad I found your videos! Thank you!
I can see this channel becoming my new favorite!
Wow, thanks for this very well done video! Now I know I need to up my css grid game
Great video. Although, why do we see the circle with a lower z-index at 7:15? I can't see any opacity too.
Oh okay, opacity is defined in the background property as 0.5
each video is nice... helpful to learn... thanks...
Does anybody know how to open layout tab in chrome?
There wasn't any, last time that I checked
click + control then select "inspect"
That's what was looking for. Thanks!
Is this a responsive overlapping layout? Like takes up complete edge to edge column space on mobile screen instead of overlapping?
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?
Thank you for this. This is exactly what i was looking for !
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);
}
}
Very helpful thank you 👏👏
Her voice is so calming.
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
Excellent explanation, good job!
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.
*No need to worry. First learn basic **_Tags, Attributes_** & **_CSS property_*
I think that is Jen's target audience, people who are already experienced with fron-end stuff.
@@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
@@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
How do you know or decide which item stays on top when overlapping?
I'm sure you have it by now
This is a game-changer! Thank you so much!
Just Brilliant!
okey can we put the grids inside of each other? or did i not understand the explanation >...
No more position absolute on image overlays?
wow... super informative! thank you. Great content.
You are awesome, thank you for the ideas 🙂👍
Great video, thank you!
btw, what is this browser/devtools used?
Are you planning a video about tools?
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”.
Good to know! thx!
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?
Great video, Thanks Jen ! :-)
awesome video again we have more power with css grid but so much more thinking involved now but its all fun
My chrome inspect tool does not display all these tabs (Layout etc), where to enable them ?
its firefox
~Gratitude~ to you, Jen... I think you're awesome
i love this video. all my pain points have been discussed
I can't help loving these wisdom pills!
Which browser has a layout tab ?
Firefox has the CSS Grid Inspector in a "Layout" tab, now in a third pane.
I feel so confused - what web browser are you using in this video?
firefox
Great video!! Thank you!
i am researching the idea, why does overlapping design look more interesting/ appealing ?
I,ve never seen anyone get so excited......lol
Are you seeing any of these techniques being used in the wild yet?
I'm starting to...
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.
Great Content. Thanks
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
Use it together.
“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.
Amazing!
Girl, ur awesome! (: Love your videos.
I love your videos
oh,
Thank you very much : )
Marvellous!
“Layouts are super exciting” 😳😳😳😳😳😳😳. The whole time just stares right through the screen
Dope!
grazie
She is so cool 😎
I stop back here every 6 months to relearn grid. I think it'll stick this time.
This lady would make anything sound interesting. I can listen to her talking about salad
Asperger’s
Bob
mozzila brought me here lol