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!
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.
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.
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!
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!
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.
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....
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.
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 RU-vid lesson. Many thanks Dan
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?.
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
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;}
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.
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.. !
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
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?
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!
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.
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.
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.
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 ???
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.
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
I made a whole video about IE and CSS Grid, where I explain how to use Grid in IE10 & 11: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7msERxu7ivg.html
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.
(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/).
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?
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/
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.
