Incredibly Easy Layouts with CSS Grid

[@praxisdev1884]

I can’t imagine anyone explaining these concepts any better. She’s a rockstar!

[@Andrey-il8rh]

Thanks a lot for a detailed explanation and for a link that explains the difference between auto-fit and auto-fill. I think the hardest part for most seasoned CSS developer is to change mindset about how things should be layed out. Part of me is screaming: That can't be that easy, there should be so trickery involved, but a second half is trying to emrace the magic. So thank you a lot for supporting my second part :)

[@royandescartes]

where have you been all my css life? THANK YOU!

[@dr.earnest.ujaama]

Totally awesome! There are those who know and know they know, and those who don't know and know not that they don't know. Jen, you are definitely in the first category. Super awesome explanation and demonstration. Wow!

[@chimadivine7715]

Ever since I found out layout land, I've loved her. She demonstrates so well with her fingers and those demonstrations look exactly how they are in real life. So easy-to-understand explanations. Thank you Jenny.

[@carlakroll2877]

CSS grid is the bees knees! Really like the good explanation of explicit and implicit.

[@arkmuntasser]

Awesome explainer! Can't wait to see what you have in store for this channel. Thank you, Jen.

[@chronicv100]

This is in incredible!!!! This is leaps and bounds beyond any other CSS explanations/tutorials on youtube. Thank you.

[@rednine7851]

This is the best front end explanation channel I have come across...Thank you for the content!!!!

[@jakubrpawlowski]

OMG NO MEDIA QUERRIES!!!! JEN YOU ARE AMAZING!!!! THANK YOU SOOOO MUUUUCHHHH!!!!

[@chrispratt3047]

I've been learning web development for a few months now, specifically html and css, and my biggest problem since the beginning has been figuring out the overall layout of the page. I've watched video after video on flexbox and grid, and although they've taught me some useful things, it wasn't enough to be able to just go ahead and do it myself. Kinda like learning to drive with or without an instructor.....you're fine with the instructor, but not without. Your videos have helped me manage that drive on my own without the instructor! Excellent tutorials, very well explained. Thank you for doing these, you have restored my faith in myself! Now I'm going to make myself a cuppa and watch some more :)

[@awaiszaki14]

this is so much easier after she explains all the complicated CSS in a very simple way

[@armanmohammadi4284]

Hello, I am from Iran and I am really grateful for your great help, there are very few Persian sources in Iran and I am very excited to thank you.

[@acnorrisuk]

This is such a flexible and satisfying solution for an extremely common use-case. I for one welcome our new grid overlords..

[@HerrSiering]

Used this in a demo this week - it's so amazing how easy it is with CSS Grid to show a card layout for all viewports without any media query. I guess my colleagues were slightly annoyed in the end for each "CSS Grid is AWESOME!" mention :D

[@CH-le2hz]

I haven't found anybody else who explains it as well as you do. Thank you, Jen!

[@decaf4me2]

Wow! Blown away by grid and your easy-to-understand explanations. THANK YOU!

[@josejimenez7502]

I love the way you convey your message. Your easy to understand and speak in a manner that makes sense i feel like your speaking directly to me great job thanks. I just subscribed to your channel

[@jiehanaldicho3710]

Thank you! It took a while to wrap my head around grid, and your concise explanation helps a lot.

[@juanmoralesvideo]

Super clear and complete explanation! Thank you Jen. By the way, in my opinion, the very "core" grid thigs only take 4 lines in your example - so elegant!

[@LukeDorny]

Revisiting these excellent videos, Jen. Please update: The `auto-fit` shown at @4:21 doesn't have a comma, but it should, just like the code view @3:30 & @5:05 Thank you!

[@OFWGKTAxGOBLIN]

Best channel I've seen on layouts so far

[@Lucas-ve8bz]

Your teaching style is amazing! great job!!

[@omerjan3118]

clear voice and talking and awesome explainer ,thanks

[@TheUtuber999]

Jen, thank you so much for this brief, but informative video. I'm excited to get started on a family photo album using CSS Grid!

[@kyrie4728]

yeah i think i fall in love with grid already. Great vids

[@deepsinha6024]

Just love you explain this in a simple way. Thank you for this

[@HassanBraim]

Very impressive!! You make it easy the way you explain it. Thank you!

[@manjoujanzen9375]

Thank you, Jen. Very good and clearly explained content.

[@cindykee3719]

Great explanation of Grid's flexibility using implicit layouts!

[@ValLaxoxo]

Wow, great video! Awesome explaination and visualisation. I really look forward to more

[@GyasiLinje]

This is incredibly helpful

[@thomasgauperaa4659]

You are a great teacher, thank you for posting these videos bout CSS Grid!

[@LayoutLand]

Thank you for your kind words.

[@jonathanstanis8627]

Just used this to do CSS Grid on a page for the first time. Love it!

[@rowanans]

Thank you Jen! Finally no media queries!

[@LayoutLand]

We'll still use media queries, for sure. We just don't need them as much. Not for layouts like this one.

[@sallaklamhayyen9876]

Thanks Jen Simmons for this great Explanation , we want more Tut bout Css and Layout

[@digigoliath]

Just found your channel & have subscribed. Great tutorial. Still in disbelief that it could be so easy & powerful. I am a CSS newbie who just got started.

[@carstenberggreen7509]

Brilliant and easy to understand. I would recommend you to keep the example code ON screen while you have your face too. It's sometimes hard to only hear your explanation if you cannot watch the code at the same time. But I am a fan now. Tons of videos to watch. Been away from Front-End development since 2014... dang.. back then I wrote my own grid systems, besides using Grid960 and I have also used bootstrapper. But .. those are dead now. That's for sure.

[@cmnweb]

i'm starting to love grid..greetings from Mexico.

[@indekxmobile4970]

Amazing job. You've touched every piece of what matters.

[@DivineZeal]

Bravo! CSS grid made simple, thank you.

[@ionutmargarint7238]

Amazing way of explaining. Thank you!

[@smitty1753]

Awesome content. Please continue to share.

[@RussellBallestrini]

I love this, thank you. I implemented this just now and it works perfect. Grid is so awesome for somebody who started HTML with table layouts.

[@busyrand]

Happy to find this channel and content. It was strongly recommended. I enjoyed the explanations to various methods and clearing Floats. I stayed away from learning the details of using grid, but you explained the syntax beautifully. Subscribed...

[@somrajdutta8366]

Outstanding Communicator, Love you man!

[@cgtechcommunity]

Great explanation. Looking forward to more videos.

[@ungurunelu13]

Very well presented and extremely useful. I was working out best solutions for an image gallery and this looks like a perfect foundation. Thank you!

[@amijabd]

This was really good. Thank you, Jen.

[@jihyunsam143]

Thank you for making my life easier!

[@thaitepy7930]

Thanks for this awesome video. You make it simple to remember how that special 1 line of code works :D

[@jeremywagner8088]

Good stuff, as always. This is really good at describing how to code common layouts in very lines of CSS.

[@stratboy2]

This series is great.

[@pnjegosh]

Excellent explanation, good job!

[@amarcanth]

That's wonderful! Thank you so much, Jen!

[@stevenmuncy491]

How would you do this filling by column (not row) when n-items is unknown?

[@ernestoroberts169]

Hi I'm new to front-end stuff, this is the bootstrap default behaviour too when comes to this , right?

[@MarkusEicher70]

Hi Jen. Many thanks for this post! I like how you explain the things. O course I have subscribed. And now up to the next video. Well done! 👍

[@ChandrakantAhuja]

nicely explaination ... i was struggling from many days.

[@eldyko]

Is there a way to have a minmax for your number of columns? I only want a max of 4 columns(desktop) and a min of two columns(mobile). It seems like I still need a media query to specify I only want 2 columns on mobile but 4 columns on desktop. Right now I have: grid-template-columns: repeat(4, minmax(160px, 1fr)); then I use: grid-template-columns: repeat(2, minmax(160px, 1fr)); for mobile(using media queries) but it seems odd to repeat this whole line and use a media query when I just want to change the one value(number of columns). Any help is appreciated. Thanks

[@MossawirAhmed]

Thank you so much. Css grid from now.

[@rosannevandeweerdt8751]

This is really good!! I'm having some trouble styling my as a grid, as it also has elements with inside that are clickable and have a title appear on hover (kind of the typical portfolio look). Do you have any useful links to look at for this case?

[@nikismile123]

I currently have a problem with the "grid-gap". When applied It brakes the layout even used as very small % into fr-only grid 100vh, 100vw. Could you please give me an idea why it happens? Thank you.

[@smoothbeak]

Very cool Jen, had no idea about this channel, I was wondering if you'd ever be back with "The Web Ahead"!

[@richardshaules3981]

This is great- so simple, and very well explained. Thank you :)

[@Azaditube]

Awesome. I never get any explanation about this. Thank you very much

[@IanSebryk]

small tip: if you're explalning a snippet, keep a copy of it overlayed when you switch to your talking head. easier to cognitivly connect what you're saying to what we're seeing.

[@AbiFranklin]

Is there a way to keep the number of columns equal across the rows? Say, if I had 4 images that fit in one row at the current screen width. When I narrowed the screen width, it throws the fourth image down into a new row. Is there a way to have 2 images to drop down instead so that it stays more balanced?

[@gabrielsteiger5465]

Question, what about browsers that dont support CSS grid? Going to have to write the code for them anyway, right? (I'm new to all this)

[@Kuwandi]

The best **, the difference from people who just do a tut vs a reall explanation, why and how ****

[@donnchadhmcginley3153]

@@jkovert wow you're a fucking idiot

[@damislav]

@@jkovert get help.

[@jkovert]

@@damislav Jen coined the phrase "Fail Whale," her sole contribution to the field.

[@codeinswahili9505]

Can this be used to design a whole page layout or is it just for a picture gallery?

[@Freebird1122]

Awesome Jen, thank you.

[@antonbrams_io]

how to handle "grid-column: span 2" if the grid is going to decide to set only one column at auto-fill? Can't find any information on web. Can i at least access the current number of columns with javascript to reduce the span?

[@MaximusWilliams]

Thank you very much for sharing your knowledge and expertise 👏🏼

[@timmellis5038]

If there were two images both 200px in width and you open the browser to 590px, do the images stretch bigger than 200px, so they would both be 295px?

[@amberweinberg6237]

Go Jen!

[@YoavRheims]

Question: what about high resolution screen (4K)? Just define a max-width on the to prevent unlimited columns?

[@LayoutLand]

You can always put a max-width on your container to keep it from growing too wide, sure. Or think about any of the possibilities you might want to have happen, and then use other CSS - another Grid, something in Flexbox, something with widths or flow or floats, or whatever - to accomplish that affect.

[@rektangul7210]

I love your videos.

[@haccuk]

Thank you very much for this video. Can you tell me if you can make this a clickable image to open a lightbox in modal window as I would with normal html , js and css?

[@LayoutLand]

You know, I don't know. I bet it depends heavily on how the lightbox is coded. You could build a demo and see what happens. Can you get it to work? Then share it with the world. Write a blog post!

[@rafi_45]

Thank you for the explanation

[@t_rm2119]

Queen of css

[@TimAldridge]

Thanks, Jen, very cool!

[@donnchadhmcginley3153]

Really well explained, thanks

[@realmumptastic]

🔥This is awesome! Thank you Jen!

[@LayoutLand]

You are welcome!

[@treenopie]

When the browser decides how many items go in a row, is there a way using JavaScript to determine how many items are on each resulting row? I wish to fill the inevitable part empty row at the end.

[@LayoutLand]

Well, if you plan to stretch out the content to fill up the empty space, then you might want to be using Flexbox instead of Grid. Or if you want to lazy-load more content to get an 'even number' then, yes, that would be for JS. I don't know exactly how to do it, but there should be a way. You could try, create a simple example, and write up a blog post. I bet a lot of people have such a question.

[@treenopie]

Yay, I found a way: `rowlength = Math.floor(document.body.clientWidth / document.querySelectorAll('article')[1].clientWidth)`

[@treenopie]

You inspired me! I posted it in Q&A format on stackoverflow: stackoverflow.com/questions/49888032/css-grid-layout-count-how-many-elements-in-dynamic-row

[@superchunkylover23]

Thank you Jen!

[@zieteniere7500]

Great teacher, thankyou

[@sudhirrana3240]

Top Class! Fantastic!

[@aniltoronto]

I am wondering if we can create navbar using css grid. Any one out there. I have sort of did that, but as a novice in web development, I am not sure if css grid is a good way to create nav bar. Thanks

[@LayoutLand]

You definitely can layout a nav bar using CSS Grid. You might want to use Flexbox, however. Nav bars are the kind of thing Flexbox was born to do. It depends, however, on the kind of end result you are looking for.

[@aniltoronto]

Thank you Jen. That really helps. And, thank you for these really wonderful videos. I have learned a lot from them. Please keep them coming.

[@benrigaud]

Great video, thank you!

[@danielsokil9529]

Looking forward to more videos.

[@erickdavid4257]

3:30 if even the Mozilla staff resets the box-sizing property and sets it to border-box, why isn't border-box the default for box-sizing in Firefox?

[@LayoutLand]

None of the web browsers can change the box-Sizing default to border-box, because if we did, we would break millions of existing websites that have code which assumes `box-sizing:content-box;` Until a time machine is invented, we can’t change it. You have to set it on all your websites going forward, one by one. Which I recommend you do. By the way, Mozilla would never simply make a decision to do something like this in our own. No browser does anymore. Ideas like this are brought to the CSS Working Group, and all the browser makers decide as a group what to do. There’s an official decision, a resolution. And every browse maker agrees to follow that decision. That’s how we make sure all the browsers work the same. Everyone has agreed to follow CSSWG Specifications. It wasn’t always this way. In the past, browsers did just do whatever they wanted. And it was very very painful. Ask people who remember making websites for IE 4 & Netscape 4. It was horrible. Having an official standard that everyone follows makes for a much better system. So this decision is not one made by Mozilla alone. It’s a decision from the CSS Working Group.

[@Dahon5]

Are all the picture she's using the same size in pixels (ht and width)? Does the code automatically make each image the same size in the box? Let's say she has a 3 ht x 3 width picture and a 5 ht x 4 inch picture. Will they all fit in the same square and look the same?

[@LayoutLand]

In this particular case, there would be space underneath some of the images, and the row would be the height of the tallest image in that row.

[@mohamedyoussef8835]

Awesome tutorials ++++++++ thank you 🙂🙂

[@christopherkarpowicz1123]

Gr8 explanation! Thx.

[@kaifahsan8459]

Really helpful

[@HikikomoriDev]

So how does this work at runtime... Does the browser have some sort of engine running the logic behind the grid... seems quite abstracted. HTML doesn't do any logic, so how does this live?

[@LayoutLand]

The layout is calculated by the rendering engine as it figures out how to paint the page. It's CSS that creates the layout (not HTML). And if you want to understand how CSS and the browser's process works, check this out: hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/

[@jorgemontoyab]

Amazing! Thank you very much!

[@humanyoda]

Is this supported by currently used browsers well enough to justify starting using it?

[@LayoutLand]

Yes. Here's a video on how to think about browsers that don't support Grid: kzbin.info/www/bejne/bZ7WdoWuqpycrMk

[@digitalvenue6007]

There are number of issues remain - for *_different height_* items, there are "white spaces" since rows get defined by the tallest item in the fore-row, the preceding row. Masonry.JS may still be the only option if you want to place items in a *row* that are not of same size and dont want to see ugly white spaces. This, after 3 years of this video being published.