Using Flexbox + CSS Grid Together: Easy Gallery Layout

[@nadhifikbarwibowo2837]

I love the way she effectively explains things. Keep it up!

[@LayoutLand]

Thank you!

[@PaulSebastianM]

She reminds me of some of my most favourite teachers in school.

[@zonairraja7575]

@@PaulSebastianM so true

[@hippiestafarii]

Here to ...Nice to learn that esay from somebody who knows :-)

[@rimberse3405]

She explains everything so well. First time I see a person, who explains complex things in a simple manner, wow!

[@roymath]

I hadn't kept up with the changes in css land and was going crazy trying to make sense of it all. Finally - someone who can talk through the bigger picture and yet get into meaty details. thanks!

[@mohdismailmohdnasir7545]

She has a very pleasant voice, apart from the way she explains the methods while chipping in all the tips and tricks. Thanks, Jen! I've learned a lot from this video.

[@krishnateja7830]

Wow! she explained the basics of the whole thing in just 3 videos, thanks @JenSimmons.

[@darentsimon]

your manner makes this subject very easy to understand and follow. Thank you

[@edwassermann8368]

Can't tell you how much I love your content. I'm learning so much. Thanks very much!

[@coffeeinjection2572]

I have looked at so many complicated and wordy tutorials and still not completely understood how to do this and you make this stuff so easy to understand. I should have subscribed to your channel sooner. Thank you.

[@VideosofIrishFarmingLife]

"grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));" Brillant!!

[@bluebadgersec]

Jen is great all day, every day, but from 5:12 on is gold

[@jeevanprakash4815]

Lots of learning in single video. Hope, I would have found this channel 1 year ago. Thank you, Jen Simmons.

[@NikHYTWP]

I'm really stressed right now because I'm falling behind some deadlines, a website being just a part of my university project that I need to make, and I normally suck at HTML/CSS but you're just so calming and explain everything so well in each video that it really helps calm me down, thanks for making these!

[@jakubrpawlowski]

Thank you again Jen! In grid I've been nesting grids instead of flexboxes because I feel like it's so much more readable especially with the dev tools support, but now I can totally see how flexbox still has the advantage for working in older browsers so writing fallback before @support becomes trivial like in your example!

[@joel9909]

Jen Simmons is an Omen!!! You teach with so much ease. Thank you so much

[@jy_chen]

That testing strategy is something I would never come up with. Mess things up to test if something's working. Brilliant.

[@MarkusEicher70]

Thank you very much for sharing this with us. That was very clear and helpful. I like the concept of using grid as wrapper for flex-box. Need to try this out. Have a good time and be well.

[@keithpurtell1213]

Best video CSS tutorials I have found.

[@shabzkhan1470]

How you deliver is interesting, thanks a ton Jen!

[@Finicky9]

Less media queries in the solution, the happier I am :B

[@logiconabstractions6596]

I have to admit, I've always been a little bit of a front-end snob and I've pushed really learning more than just the basics to build a dummy mock-up in html/css for so long. That being said, explained this way, it actually makes you want to try it. This looks like actual code to me. My vision of html/css was a huge spaghetti mess I wouldn't want to touch with a 6 foot pole. I guess things have changed! But probably too that while this vision wasn't entirely, it also wasn't a complete picture. Anyway thanks for the support on my journey to becoming a half-decent front end guy, and that much closer to a fullstack dev....

[@abubakarsabir7364]

Finally , I got the answer , I was looking for the past 4 5 hours searching here and there Because I wanted to place three images in vertical fashion and I ended up using float and inline-block. I'm rookie but, I guess I got the answer.

[@sadaffarsa6058]

Wow! She explained it very well!

[@mauricioerazososa9969]

Wow! thanks so much for making this video. I understood the function of these elements much better.

[@Dextergec413]

This is beyond my level of knowledge but I'm starting to see how it works. Appreciate these videos, Going to sub

[@nikotlichnik]

Thank you for video! Why there is smaller gap than others between first and second grid items on 3:58?

[@JuanXPrats]

I was wondering the same thing when I noticed that...

[@AndrewMowe]

I was wondering too. It seems to be due to the image width. When I apply max-width: 100% to the article > img things align correctly. If you add a larger explicit width to the image, it breaks even more.

[@SonGoku-pc7jl]

hello, thanks for all. today not is needed the add line @suport for grid no?

[@basilio100]

I didn't get why this can be done with flex. If instead of grid you use flex, last item in the second row (like on video sec 0:29) will not take all second row. try it. {display: flex; flex-wrap: wrap;}

[@christianaustria741]

but i don't think flexbox has something like flex-gap property for spacing. Although, you can achieve it using "space-between" for either justify-content or align-items. I think the main reason for choosing grid over flexbox in this case is grid seems intiutive for layout placements and has native support for adding gaps.

[@InterestingLake]

Wonderful! Thank you for the awesome help! 😀

[@cazepeda]

Thank you Jen! Great demo!

[@christhompson8384]

Very clearly explained, thanks. Although setting max-width to 10000px is a hack. Setting it to "unset" or "initial" would have been more elegant.

[@vivianeb90]

Wow, you explained this so well! I am so glad I found you! New subscriber here!

[@sameenrehman5021]

is there any updated version of this video?? @LayoutLand

[@vague_1255]

Amazing instructor and great content! Thank you!

[@redwolfsoftware3630]

Out of curiousity, what does grid do differently than old school css: display:inline-block; margin: 1rem; min-width:300px? It appears to give the same result. Or does the grid layout maintain the same size of each item regardless of the inner content?

[@learningtocodeafterforty]

I found your CSS grid card layout so important to my learning that I would like to ask your permission to add a link on my website to the CodePen and KZbin lesson. Many thanks Dan

[@LayoutLand]

Oh of course! I’d love for you to link to this video.

[@learningtocodeafterforty]

Thanks so much. Your card layout is so awesome.

[@ChayonShaah]

can i use positioning property inside of grid or flex ?

[@Psyop666]

You don't need to. There are other properties available to help position elements inside the grid. And yes you can use the position property.

[@danielsokil9529]

Can you turn off certain features in browser to test? For example, turn off grid and or flexbox to simulate a older browser environment.

[@johnmathew8543]

how do i align divs in a row using flex inside a child grid box? i tried display:flex , i can change the width of the divs inside the grid box but i am not able to change the height without using pixels

[@ziskador]

They way she explains things . She's so smart :3

[@MaximusWilliams]

Another great video, Jen. Thank you very much :)

[@matoelgud]

I have flex containers in a main grid, but i have the flex containers set to row, because I want an image, and a header with a paragraph, to be positioned next to each other - opposed to on top of each other in a column as in your example here. I then want the flex items to stack on top of each other like the way you, when the the space gets to tight. What happens then is that my picture shrinks and and my paragraph lines become really short instead of stacking ontop of each other and utlizing the width that way

[@eulier1]

This has been enlightening videos, the way you explain the content, and also the passion you show for every tip you give... i can only say that is love for the Design, Css, Art and everything involves in such areas you apply to your videos. Is there are a way to put multiple flexbox ovelapping?. Such like z-index but for Flexbox content?.

[@anniewang99]

It is amazing. I am trying to add a header and integrate it with this, and it seems a bit more complicated or do you have any suggestions? Thanks.

[@ChicClique]

The big problem with this layout is the image size. I'm using image address to source the image and as expected the sizes of each image change and the card is broken due to bigger image size. How could I make the image to keep its size so that it will not break the card. I have tried by using css properties: width & height to 220px; But i'm not satisfied with the result. What do you suggest.. !

[@BloodyClash]

:) indeed...you REALLY know what you are talking about. thank you

[@vanvothe4817]

what is editor her use?

[@mikl2345]

Hi Jen, do you have any suggestions on whether a navbar should be inside or outside of a main page grid? say i want something on the navbar on desktop, but on mobile to move that element somewhere else on the page, in the main grid. if i use a flex in the top row of a grid, i can't re-place only one element inside the flex as it's not an actual grid item, but a grandchild. hence, should I just duplicate that code & switch display:none on the one I don't need? An alternative seems to be to just subsume the navbar into the grid completely, which would allow complete re-placement, but, in going to an extreme like that, I have a feeling I might end up with a potentially rather fine grained grid where grid-template-areas becomes quite bulkly. perhaps an experiment would be in order. thank you for these fabulous tutorial videos - the best I've ever seen on css!

[@nkisikiyumba]

You are the best!!! I understood perfectly

[@Evildragonfirez]

Awesome video. When do you think we will be able to use grid without worrying about support?

[@SNMSoodan]

When only one element is present the box takes 100% width which looks awkward on large screens. Is there any solution to it.

[@pradeepvig9880]

Are you using a mouse-pen/pen-mouse sort of?

[@briandelaney6354]

Brilliant again....thanks 😁

[@JuanNadal]

very good examples!

[@davidramirez9727]

Thank you so much, i appreaciate this information

[@CharlyBGood11]

Thank you so much! So clear!

[@ricardoe.galvez5024]

great demo! thanks!

[@augmentos]

Would love to see a multi-column feed style layout in an SPA because DOM doesnt style. Eg a main vertical feed and if user swipes over the are the in another vertical scroll store comprised of other li's.

[@Lichkuroro]

im sorry but how does the max-width: 10000px works here...? why not the traditional way, width: 100%? i'm confused...

[@LayoutLand]

I could have reset things to max-width: none; That's what I wanted, actually. To simple not have a max-width set anymore. Instead (for whatever reason that day) I used 10,000px - which basically is so giant it wouldn't do anything.

[@Manas-co8wl]

Thank you it was very useful

[@LA-MJ]

max-width: initial?

[@HansLemuet]

or max-width: none?

[@facundocorradini]

That would definitely be a much better reset.

[@BillyLoweBeauty]

when you say placing headlines first makes things more 'accessible' is that indicative of helping seo perhaps?

[@estebanalmont3711]

This is gold "when you start putting widths on flexbox you are not getting the advantages of flexbox"

[@eduardoauditore5414]

How's possible that in 2020 user's browsers don't support grid? What is this Latin America , Africa ??

[@TBolt1]

1:38 Which text editor is that? Nevermind. It’s Coda.

[@LayoutLand]

Yup. I like Coda. www.panic.com/coda. I've been using it for a long time.

[@DanieleManca1983]

Great video Jen, I am having some issue, I am using a similar snippet of code within a work project, but the grid items do not breakdown to another row when I shrink the browser's window... Project section on: internal.showsuite.com/

[@ГуляКабанова]

Great Job

[@danielpan5128]

This is a greate example. But I think the grid-template-columns should use auto-fill instead of auto-fit. In this case, if there are only one or two grid item, the item would not streach to fill the whole 1 fr.

[@masdaug]

wow, nice.. thanks so much for sharing

[@tim_arterbury]

Wow, it’s amazing how little code that takes!! 👏👏

[@mohamedyoussef8835]

Awesome Tutorial ++++++++++++++++ Thank you

[@butterchoco4538]

omg I have just found this channel... thanks youtube recommend this to me. AND Mam, I wanna ask a question... Can we animate grid actually ? for instance, grid 1 column with 100% >> become grid 2 column with 50% each ???

[@LayoutLand]

You cannot animate one Grid track (row or column) into becoming two. But you can animate the size of a track. Start with two columns where one of them is zero width. Then animate it to be bigger than zero. I think that will get you what you want.

[@butterchoco4538]

@@LayoutLand ahh I see... thanks for replying

[@sheheryarqazi1006]

thank you so much

[@jamesyin6961]

If my part of target browsers don't support grid. I just ignore 'grid' feature, use flex instead. I hate compatible code.

[@LayoutLand]

You should watch the 7-part Resilient CSS series I made.

[@viking185]

this does not work in IE, looks like you need the -ms- prefix and IE doesn't support the support media query. unless my info is out of date or someone has a work around

[@LayoutLand]

I made a whole video about IE and CSS Grid, where I explain how to use Grid in IE10 & 11: kzbin.info/www/bejne/bZ7WdoWuqpycrMk

[@oshumnyi]

Yeah, why not max-width: initial?

[@cypryradu]

How about: @supports not (display: grid) { ... } instead of gggggrid? :)

[@cypryradu]

I know "@supports not ()" is not recommended in production code, since not all browsers can read feature queries but just to test what happens when the feature is not available, should work fine.

[@LayoutLand]

Yeah that should work just fine!

[@ishbindra]

I am sorry for pointing out, but the volume is too low.

[@joefairplay2837]

GOAT!

[@バニヤロサン]

[@バニヤロサン]

😊sometimes💕

[@quicktastic]

I do wonder why your margin is set to zero and yet there is a margin on both sides.

[@weizhangJustin]

就是说啊，好多浏览器不支持grid

[@stefanc4060]

Macintosh 8500? Nice for making websites:-)

[@arifbasri4950]

Wow, gggggrid?? Haha...never thought that, thank you anyway

[@MrBidalos]

Give more plz.

[@im.empimp]

(A) I really love your consideration of older browsers and accessibility! (B) I was actually a bit disappointed with this video. It felt more like it should have been titled, "Using flexbox as a _fallback_ to grid in a _progressive_ design". Based on the title, I was expecting you to cover designs that actually benefit from the simultaneous use of flexbox and grid (e.g. jakearchibald.com/2014/dont-use-flexbox-for-page-layout/).

[@LayoutLand]

Did you watch the video? I didn't use Flexbox as a fallback for Grid. I used Grid to do the layout of the cards themselves. And I used a simple "mobile", narrow, flow-based layout as the fallback for Grid. Then I used Flexbox to layout the content inside the cards. This _is_ a demo of a design that benefits from the simultaneous use of Flexbox and Grid. That is exactly what it is. The article Jake wrote in 2014 is completely out of date. He's comparing performance using browsers from 2014 - there've been over 20 releases each of Firefox and Chrome since then. Firefox has an entirely new CSS Parsing & Rendering engine, so any performance comparisons need to be redone using 2018 browsers. Plus, Jake is debating Flexbox vs Grid while looking into ancient syntax for Grid that was long ago replaced. It was a interesting article four years ago, but is irrelevant today. Also, his article does not cover how to use Flexbox and Grid at the same time. He's considering using Flexbox instead of Grid (which was still three years in the future when he wrote that article). I'm not sure what your point is. That I should be more like Jake?

[@RamizAzhar]

a programmer who used stylus pen..