HomeНаука и техникаRelated VideosMore From: Layout Land

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

661 ratings | 16312 views
CSS Grid makes it easy to create overlap in our designs and opens up a world of new possibilities in graphic design on the web. For decades, we wanted to create these kinds of designs, but didn't have the tools. We trained each other to stop being creative and stop wanting to make such layouts. It's time to shake these old habits up and explore what's now possible. Jen walks you through an example of how items can overlap, be fully responsive, robust and resilient. Examples at: http://labs.jensimmons.com/2017/01-003E.html http://labs.jensimmons.com/2017/01-018.html http://labs.jensimmons.com/2017/01-002.html http://labs.jensimmons.com/2017/02-001.html
Html code for embedding videos on your blog
Text Comments (38)
vik 88 (13 days ago)
Which browser has a layout tab ?
Øyvind Hermans (1 month ago)
This is a game-changer! Thank you so much!
Syed Ahmed (1 month ago)
Arjuna D. Ghose (3 months ago)
~Gratitude~ to you, Jen... I think you're awesome
mikl2345 (3 months ago)
Ghost of Yharnam (4 months ago)
I feel so confused - what web browser are you using in this video?
Hashim Warren (1 month ago)
Apathetic012 (4 months ago)
Her voice is so calming.
Rahul Gupta (5 months ago)
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
Roshan Baniya (5 months ago)
I love your videos
Richard Dale (6 months ago)
Are you seeing any of these techniques being used in the wild yet?
Layout Land (6 months ago)
I'm starting to...
Bryan Banda (7 months ago)
I can see this channel becoming my new favorite!
Alex Δ (7 months ago)
Hands down the most pedagogical tutorials related to CSS Grids.
William Kulich (7 months ago)
Those transparent circles were a really cool example.
Foxtail (7 months ago)
mozzila brought me here lol
Vaskamos (7 months ago)
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!
Nathaniel Thomas (7 months ago)
No more position absolute on image overlays?
Francesco Logrillo (7 months ago)
Rie Fukui (7 months ago)
Great video!! Thank you!
JOHN MCINTOSH (7 months ago)
I,ve never seen anyone get so excited......lol
Luke Vincent (7 months ago)
75 thumbs up and not a single thumbs down as I type this... Why am I not surprised!!! :)
Eka Eka (3 months ago)
3 people still use sliced images inside table columns to do their web layout. 😡
Isah Yazid (7 months ago)
sorry you only get to do one of those?
Thiago Villa (7 months ago)
I can't help loving these wisdom pills! <3
awesome (7 months ago)
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
Russell Bishop (7 months ago)
I would also disagree with this. I've found grid really useful for small components that might wrap, where you want even grid-graps horizontally and vertically.
Layout Land (7 months ago)
“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.
Lennard (7 months ago)
Use it together.
Steak Almighty (7 months ago)
I ❤ Jen Simmons.
Yanush Zakshewsky (7 months ago)
Great video, thank you! btw, what is this browser/devtools used? Are you planning a video about tools?
Yanush Zakshewsky (7 months ago)
Good to know! thx!
Layout Land (7 months ago)
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”.
the Phrase (7 months ago)
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 .....
Dave Cruickshank (7 months ago)
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)
Eric (7 months ago)
Great Content. Thanks
Filipe Valente Gomes (7 months ago)
awesome video again we have more power with css grid but so much more thinking involved now but its all fun
Thays dos Santos Neves (7 months ago)
Girl, ur awesome! (: Love your videos.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.