Innovative & Practical Graphic Design with CSS Grid

[@eliudc.delgado9056]

I really love how you manage to mix accessibility with creative -and sometimes unorthodox- layout. As a new developer I find very encouraging just realising that we're in a groundbreaking moment within From-End evolution.

[@jeroendonker]

As a visual (Webflow) developer in 2023 I really appreciate these kinds of explanations from years ago. It makes me realize that the web is a dynamic place, where things change rapidly and sometimes not at all. Curiosity about the underlying code brought me here…

[@edwardplato5978]

You have such a great way of explaining the mechanics and benefits of your design choices! Would love more "inspiration to implementation" kind of demos like this.

[@LayoutLand]

Thanks! I've got more of these kind of demos coming. Even created a playlist for them, so they are easier to find.

[@Luxcium]

This person is amazing also she is a great communicator I like the way she speak

[@captainzappa8561]

Thanks for showing me how powerful an ul element is with grid - another game changer for me - you’re the best.

[@TheStupidDingo]

Love these videos! Especially love how they begin with a clean usable DOM! Web design is getting fun again.

[@edwassermann8368]

Amazing. Frankly, this makes me fall in love again with designing in CSS.

[@im.empimp]

Jen, I really appreciate your progressive & accessible approach to this fun exercise! I wish more tutorials and examples did this.

[@MarkusEicher70]

Another great one! Always keep the html in mind and accessibility is crucial for me. I like the schema of starting with no CSS. Thank you for sharing! 🍀

[@babinicz91]

I’ve watched css grid tutorials before. But your explanation and examples.. wow! Love your channel!

[@realmumptastic]

This is a fantastic example of the power of grid! Fantastic as always! Thank you.

[@marksto6581]

Thank you so much for a great tutorial, Jen! Extra kudos for this "element-invisible" trick that allows for a better a11y. =) I would like to leave a few tips here as well, for those who's looking for an even more accurate and production-ready semantic markup: 1. Use exactly 1 instance of tag per page. This would definitely be a "Jazz at Lincoln Center" as a logical container of the content, the main topic. 2. Switch "Schedule of Events" either to an (if you see it a direct subtopic of the main topic; then you'd also to switch the "Spring 2007" to a simple ) or to an (if you wish to have an extra season-specific level of content in a web version of such a magazine; then you'd also to switch all these s to be s and that's fine). 3. Use a nice HTML5 tag in place of all these s (with a machine-readable "datetime" attribute values) to point out to the browser/search engine these are date-time instances.

[@tylerbeaty]

What's the practicality of declaring date-time instances?

[@ErwinHeiser]

Cool video, there are plenty around that explain the spec but not quite enough that explain or show some creative applications. More please! :)

[@cergeant485]

Hi Jen! I've just watched couple of your stunning video about using grid layout. Oh, you're real css artist! Great material! I've subscribed at once... Long time I was looking for clear, comprehensive explanation what the grid is, how to use it, could it replace Twitter Bootstrap etc. And I've found it on your youtube channel at last. Thank you Jen! Looking forward to your next video!

[@faboneproject918]

Excited you started making videos!!! Love your work.

[@avvvqvvv99]

brilliant as usual when i first heard of css grid, i thought "this is meant for art" and your channel really proves it

[@aqua123670]

I love this kind of video, where you make something and explain how do you make it. Thank you.

[@keyBladeSkai]

This was really helpful ♥️...beonh so confused on grid and layout in particular and I stumbled into your channel....Thank youuuu.♥️

[@leepaulison4928]

Thank you for these amazing video's. I've learned so much in such a short time.

[@antoniosiimoes]

You are amazing and your videos are really helpful and enlightening. Thank you.

[@composernotes]

This is great. I am not sure how all the gaps are left. In trying to reproduce the code, if only some events are targetted and placed explicitly the other spaces are filled up, including those prior to where the first DOM item is explicitly placed. Is there something I am missing?

[@flwi]

Great content (and layout 😏). I like that you talk a lot about accessibility. I'm wondering if you can also invert the @supports query to target browsers, that _don't_ support grid. Good idea to replicate interesting print layouts to learn more about that. I'll do that as well. Thanks for the inspiration!

[@ivofs]

LOVE IT! Perfect example! 👏

[@TomasHradckyComposer]

It's to bad grid locks its rows so tightly as your example is great but I miss the offsets on a few of the rows in the original poster. It was a nice way to break up the flow around his picture. Still, thank you for making this accessible to a person in slight fear of css.

[@jiehanaldicho3710]

More of these creative examples please 😍

[@Naz-yi9bs]

Thank you so much for all your videos on CSS grid and the examples on your website. Really enjoy your teaching style. Do you have any videos or recommendations on how to get better at figuring out how content should be put into HTML? Even when I know the content or when I am try to recreate a design/website, I have difficulty in figuring out how that content should be put into HTML. Thanks in advance.

[@LayoutLand]

I have an entire course about HTML on LinkedIn Learning! www.linkedin.com/learning/html-essential-training-4

[@Naz-yi9bs]

@@LayoutLand Thank you!

[@mikl2345]

Hi Jen, is nested grids in this way (using viewport units) what you'd recommend for an app type page (with a navbar and dropdown menus), where some items in the nav need to drop to another place on the page for small screens? So long as the place the nav items would drop to were on the main grid, not the sub grid, it looks like this could work. If the grids can be made to overlap neatly, which it seems they can, one could even make sure certain cells on the subgrid were empty at a specific screen width then put something on the main grid simultaneously and so sort of act like it was one grid perhaps. Think I'll have a go at this shortly... any thoughts would be very welcome. Thanks again.

[@digigoliath]

Wow, amazing! SMASHING the LIKE button!! I am now ....... Inspired to Design. Thanks so much for sharing your thought process and great design techniques.

[@rahulraut35]

She can mix art and tech or I will say she elevates art to next level using technology :)

[@maheramir9378]

i love the way you explain things, thank you beautiful lady

[@sonoftroy8572]

Bravo! Just brilliant... I want more

[@indekxmobile4970]

I so much enjoy teaching and wonder if you'd do a video on UI Design.

[@zhenghaohe4727]

I don't quite understand why she said she had to use the view port unit to make the two grids "be to identically on top of each other" at 12:29. Can someone please elaborate this on me?

[@kishoreandra]

Wow this is an amazing explanation 🙏🙏... am I the only thinking Jen didn't explain about inage going out of grid 😛 or maybe covered in future videos 🤔.... Anyways I'm loving this playlist and Jen thankk youu soo soo much for creating one such 🙏... 🎩s off

[@PcHabitat]

Thank you so much for these tutorials. WHat advice can you give when one is trying to learn and master CSS Grid? Should I also use a magazine and replicate that as well? Also, how do you know what specific px or vw to use? Is it a random number that you came up with??

[@LayoutLand]

I determined the number of vw to use by trying various options in the DevTools and seeing which one worked. I think I wrote the code over and over a few dozen times in the first couple hours until I got what I wanted. That's the great thing about designing in a browser. As for learning Grid, I've really enjoyed using magazines or graphic design books to find inspiration, and then trying to replicate those designs in HTML + CSS. I'm sure there are as many ways to experiment, play, and learn as there are people. Different things work for different people.

[@PcHabitat]

Layout Land thank you so much for your help mam. I'm working on a project where there is a nested grid within the main tag that's within the main container and it's making my entire site look discombobulated. Is there a way you can take a look at it if possible?

[@PcHabitat]

thimbleprojects.org/jtorr14/407828

[@PaulSebastianM]

What tools are you using? Besides that, I've noticed you switch browsers between videos. Any reason? Awesome explanations btw! Thanks so much!

[@yassqueen2108]

Thanks for your great videos...soooo helpful! Can you tell me though...as css grid is all about its responsive nature, why is it that this example loses its grid properties below a certain width?

[@cstauber7]

First off, I love your videos. I had an accessibility question. Isn't it bad practice to skip heading ranks? For example, I notice we move from an h3 to and h5 in this video. Thank you kindly! I greatly appreciate these things!

[@frebro]

Hi Jen! I'm sure this has been answered elsewhere but your videos were my first intro to CSS Grid (great examples btw) - and might be for others as well - so this seemed a good place to ask: What's up with the forward slash between the `grid-row` and `grid-column` values? Looking at how CSS usually works I'd assume there would just be a space between the values, e.g. `grid-row: 1 2;`. Can you explain the reason for introducing a slash here? Thanks.

[@LayoutLand]

I actually don't know when or why we ended up with the slash in our syntax, in `grid-row: 3 / 5;` for example. I do know the CSSWG has worked hard recently to come up with a system for syntax - when to use a comma, and when not to, for example - and to make all new additions to CSS follow those rules. If you want to do some digging, you can look for discussions in the CSSWG listserv. Everything ever decided is either discussed in email, now discussed on GitHub issues (which is syndicated to the same email list as an archive), discussed on a conference call in person (where copious notes are taken), and archived to the same system. lists.w3.org/Archives/Public/www-style/

[@frebro]

Layout Land Will do! Thanks :)

[@mohamedyoussef8835]

Awesome tutorial +++++ thank you 🙂🙂

[@groovebird812]

Hi Jen, very cool video but the grid inspector is buggy. On your jazz festival page click on the icon for the inspector and then shrink the browser window. There are a horizontal scrollbar and the layout is detroyed. Do you know what the reason is?

[@TheSldsnake]

she is so perfect

[@HashimWarren]

this solidified a lot for me. Thank you

[@driziiD]

after watching 9 of these i entered into a trance and downloaded firefox nightly

[@shyriu293]

I don´t understand why you use BOTH overflow: hidden and clip to hide the h1 element. Why both of them? and why not just "display: none"?

[@Dormano_Wild_Rift]

Subscribed smashed the bell button. you are inspiration love ya.

[@novanoskillz4151]

@14:03 😂😂😂 great video

[@VacationRaphael]

what's the best way to write a fallback for browsers that don't support @supports?

[@LayoutLand]

I answer that question in this video: kzbin.info/www/bejne/baqQqZmueJedfaM. I suggest watching the whole Resilient CSS series.

[@yuyokk]

Great video! Thank you!

[@__namespace4602]

Interesting. My comment is about your translation. The background photo you used was not black and white which definitely caused some conflict with the pink boxes. It was just too busy. I like how you are researching older print design though. More designers should be doing that instead of regurgitating the same old trend of the year over and over again.

[@santiagomedina6799]

We have subgrid now

[@aqhumza]

Lady you're master !

[@zaboogoosfraba6699]

Do you use Materialized at all? Thank you

[@LayoutLand]

No. I don’t use Material Design because I'm not designing websites for Google and I'm not making an Android app. So I have no reason to use Google's design system. I'm a fan of projects creating their own design system to serve the needs of their brand, audience, and content. Also, I think it’s time to retire any framework that comes with a pre-made 12-column float or Flexbox-based grid. We don’t need such tools anymore. Just use CSS Grid.

[@jinatrahman5315]

you are awwwwwsome

[@lyingcat9022]

Daaaanng

[@markjaramilloGTA]

Wow

[@FirstLast-rm7mb]

Still not enough browser support.

[@asdfasdfuhf]

ARHGH... WHITE IDE