Build a Mosaic Portfolio Layout with CSS Grid

hey and welcome to this video we're gonna be looking at how we can use the CSS grid in a really simple way but to build a really cool-looking portfolio section for your website alright so the CSS grid is here and you might have already seen my last video where I did on it but that was me really exploring the grid I was looking at it trying to figure out how it worked cuz I've never used it before so I was fumbling around a little bit by the end I think I figured it out and made a pretty nice layout when this video it's just I want to show you guys how you can make something nice using the grid that isn't it doesn't have to be complicated when I first started looking at the grid there's so many properties to it I thought flexbox bad like this is a slick home thank goodness you can name things there's the rows the columns all the different properties you can put on a bunch of stuff and it can seem a little bit overwhelming but the more I've played with it I've realized it can be really really simple and powerful at the same time so that's what I want to look at in this video the simplest way I can I figured out how to use it to make something that still looks really really awesome after this video well just in general for the next at least like month maybe two months I want to spend more time on the grid it's really cool it's really awesome it's where the future of layouts are gonna be so I do want to focus on it a lot and it's I guess more and more complicated as we go along that's not to say that every video I do is going to be on the grid there might be some other just random videos in there but there won't be a long series for the next little while but then maybe what I might do is once we figured out the grid once you really comfortable with it then I'll do a big long series where I build a full website or at least a single big web page with it like I've done with flexbox and bootstrap and other stuff like that so without further ado let's go okay so here's what we're going to be trying to build this is just a simple thing with a sidebar on it that in our video will probably actually be on the top I put a little media query in for that that we'll see in a second but this is the main thing that I want to be using the grid for and there's other ways of achieving this but I find the grid makes it really easy to do so we're gonna see how we can do that and I'm going to turn on my guides here and now I've put in all these guides it's in Photoshop so they're spilling up the sides but the main area that's going to be my grid is this area right here so we can see that the grid itself we're gonna have one two three four five I've columns and we have one two three four five six rows I'm gonna get something that looks a little bit like this but it's me fully responsive so that should be pretty cool I've put some names in there but we're not gonna be using those names because it's not really gonna be squares exactly probably just because if it is responsive it won't really add that you know it won't stay a perfect square there's ways we could also play around at that to make sure that they were but in this case I think it'd be nicer and that they expand properly with the screen so let's go and look now I have done this using code pen so let's start with the HTML I've already set some of the Styles up on this because I really do want to focus mostly on the grid itself for this so here I have a sidebar which is this area at the top and the reason it's my sidebar is there we can you know we can see that it's actually a sidebar at large screens and then just with some nav items in there nothing too fancy and then my main content area so I have my main content and then inside there I have my portfolio the reason I did main content and then portfolio is just the idea of if this were a larger site you know I go to my boat page I can still have a main content class that I don't need to play around with and then my portfolio is really giving me what I'm using the grid on for this I'm not using the grid to build the layout for the rest of the site on this it's really just for that simple thing that I showed you with that square area that I did and we're gonna be building that out but it's for making layouts it's a really cool thing and you're gonna see how easy this is so actually let's just keep that like this I think it's an easier to see the code and let's trip over to the CSS I am using sass to do this so here I've imported my Google font I've set up a whole bunch of variables we're not going to worry about those too much but if you come into the code pending here yourself you can check it all out in a bit more detail the link is in the description some general styles here just to set up my colors and all of that on my body I have put a display flex and the reason for that is I know you know people are wondering with Flex box if the grid gets rid of flex box it doesn't get rid of flex box it is a tool that we can in conjunction with flexbox and I thought it'd be easier because I don't have a three-dimensional layout here I just have one you know I have this on one side this on the other side and I'm gonna go this way it's one on top of the other I don't have to worry about multiple boxes I thought flexbox made more sense for something simple like that so my sidebar is just a flex at 20% and then my main content is a flex at 80% and that's it it's nice and simple and this just has a padding of 10% to give me the space around I have put a color on my portfolio items just so we can see them right now I'm just giving them a background color yeah he already would be too you could have the text on top and then also give them a background image and put it in a little link or something like that I'm here why don't we do a display flex as well and then just do a just 'if just defy content center and a line items Center just to keep that's gonna put everything in the middle of each item and it look a little bit nicer so before I can get into the portfolio items themselves I do want to set up my whole portfolio so I'm gonna do portfolio and we're gonna do a display grid on there because that's the whole point of what we're doing that shouldn't really change anything because we haven't set anything else up for it yet another thing I'm gonna do is I'm gonna give it a height of 100% because I there we go I want it to take up the height of my main content area I want it to be the same - obviously the padding here but I wanted to take up that full space so right away you can see that that works if I take the display grid off it doesn't work so it's one of the nice things with display grid flex I think also would do the same thing but with the display grid the height property works the way you'd expect the height property work so hundred percent fills up its parent container which is nice and handy now I need to build those rows and columns we looked at so let's jump back to here as I said we have five columns and six Rose so that's really easy to set up there's some new properties that you might not know so we have grid template Rose and we have grid template columns you can actually name your grid your rows and columns as well which is really really cool but you can't do it with SAS whether you're using SPSS or SAS the naming of things involves the square brackets and it can't compile assuming it's going to eventually get fixed but right now we can't name our rows and stuff and for this example it doesn't actually matter but for other ones I plan on doing in the not-too-distant future I might do it in regular CSS or cross my fingers that they update SAS in the meantime so what I wanted you here for my rows it was six rows so I mean it this is nice and easy I can just do because they're all gonna be the same size so I'm gonna do repeat and then I'm gonna say repeat 6 times because I have 6 of them and how big I want them to be so I could actually say like be 100 pixels each and we could do the same thing on this next line we're going to see it's sort of things are going to fall into place if I do this there we go so things are sort of falling into place and if I wanted to make sure they're all perfect squares I could do something like this where I'm giving them an explicit value and let's just so we can actually see them better new grid gap of 20 pixels and that's just going to put a space between them and let's just switch this really quick to 3 and 3 and so you can see I have well three and two I guess so I have three rows three columns so one two three let's make this two actually there we go so right now I have one two columns and 3 rows and you can see the space between them the thing and as you can see they are perfect squares but I don't want them necessarily to be perfect squares and because 100 pixels isn't a responsive I could obviously use percentages but one of the nice things about this so I wanted this to be 6 and 5 instead of using pixels or percentages or anything else there's a new unit called the fraction 1fr and it pretty much means fill up any available space whatever available spaces there use it so it's a nice responsive unit because it's filling up all the available space and that's it it just takes up any space it needs to so it's a really really handy unit the fr unit just each of those is going to be the same because they're all one fr and so they're all taking up the same amount of space and they're just adapting to the side as they need to be so for my portfolio I believe that's it so the main portfolio is done now we need to work on some of our portfolio items I'm going to come back up though I have given them names whoops let's go back down so let's go ahead and take a look at it just really quickly at the HTML here and we can see that what I've done is I've called the I have medium large medium small tall and wide so just go look here at my Photoshop designer was like and this is a normal medium I should say so medium large medium small tall and wide and let's go and put those in now so what I'm gonna say is um my portfolio item and I'm gonna do in ampersand so any portfolio item that has a class of medium is going to get these specific things and if you don't know what the ampersand is if you're coming from the world of regular CSS this would just be the same as writing portfolio item medium just like that no space because go back I'm not putting a space if I put a space it would be like having this basement the ampersand just replaces whatever this is because it's nested inside so my medium one let's go look at what my medium one looks like again so my medium one is going taking two rows and it's two columns I should say as well as two rows so let's shrink her down so that means that my medium one is going to have a grid row and it's gonna span two rows and it's gonna have a grid column I'm gonna span two of these so now it's going to across and two across you can see it's double the width here it's taking up two of the normal ones and the height is also taking up two there so that's really really candy now I could actually start these at a specific place I could say start at the third line now I'm gonna screw things up a little bit there if I do it like this oh that's my road whoops it's gonna make more sense I think if I do it on my column so I'm going to do three overspend two so what this is saying is you have to start at the third third part so we have one two you're starting at the third column and your spanning two columns that means though that all of them are going to start at the third column and it just creates this big empty space and they sort of stack on top and it's kind of awkward looking because it's going one two three and then four and then five and six anyway it's kind of weird but you can specify really where things are starting as well but this is a nice simple case because we're not gonna worry about starting and finishing we just want everything to sort of slot and spill into place so my medium is done now what I can do is do and and we'll do my large my small doesn't actually even need anything but so we'll do my grid row the same thing and in this case I want it to span three and my grid column I wanted to spend three and there we go my big one is spanning three here so we can see it's going one two three of those and it's going three down so this one was originally two and then this one is two so it's going halfway so it's taking a three height three wide it's awesome the small one I don't actually need to do but I'm going to put it in anyway and might not might as well keep them in order so this shouldn't actually change anything grid row span one grid column span one so nothing will change there but I just like having that in just in case if someone was looking at my code and they wondered what small was at least they can find something and understand it somebody my large next we want my dot tall flips and I forgot my afternoon these I don't really need these to be nest you know it doesn't have to it would work just as well like this and I'm not usually a big fan of actually doing things like this but I found in this case that sort of made more sense just in case maybe on my about page I have some sort of weird grid and it's gonna be different from this one and I want to use these tall and widen all of those different things I thought that it made sense here so that's why I did it okay with that out of the way my grid row it's a tall one so it was a span to because that's fit with my medium whoops I didn't spell grid properly grid row and my so you can see there it has doubled in height I don't know sorry this is a tall one so it should be three tall and it's also going to be a grid column span too and the last but not least is my wide so my wide we can do a grid row and in this case it's span two because it's too high and then my grid column I think you get the idea by this point span three and it fills up all that empty space and it looks really good now one thing just as a bit of a disclaimer here um if you put these the other way around sadly it doesn't just like magically swoop in and fill in that empty space which would be really cool if it did I before I mentioned you can tell things where they should be going so this is my tall yeah you also see the height is off now because my grid itself it was stopping here it doesn't know how big the next grid item would be and it's not actually Auto creating one so it's just it is making it taller but it didn't know how much taller to make it so it just gives it this little arbitrary height on it which is probably the same 20 pixels we add here so there is like this implicit grid but anyway it won't get into for this one I just want to show that you could move it up but I wouldn't do it with something like this because this is tall it should technically be a generic term that I could put onto any of these but on my row one two three if I did a three over span three oh it wasn't what I expected it to be machine you can see it's completely moved would that be a four then maybe not what I expected either um we'd have to go with our column two one two three four there we go so you could move things around and position them exactly where you want them to be but it can be a little bit hard especially if you're just numbering it this is where the naming of things can be a lot easier because you can say start at the start line or my middle line or my top or bottom and you can actually specifically name where things should start and where things should end I'm the same with this I don't have to use a span three I could say go from this is my roast so from four to six and and it's going from four to six I think that's cuz that's anyway seven eight this wouldn't be the very bottom yeah so you can also say start here and end here but I find the span option a lot easier and yeah I just want to show that you can move things around and get them to be exactly where you'd want them to be and I just screwed all that up mm-hmm why is it not working you know oh because I switch the order of these yeah let's go put those back and now let's go and actually just to show you what we could do with this if you wanted something like this to be an actual portfolio that you have on one of those so let's say - I'm gonna give this a name now - let's just call this one one that's good the big one it's a big picture it's nicer - yeah just to show you it is you know it's gonna shrink and grow and you could always build media queries into it as well but it is going to be fully responsive which is really nice so now if we go down and I could say doc to and I probably wouldn't actually call it - but my portfolio item - I could give this a background image and I'm just gonna use a URL from on splash on splash it I don't really let say 800 pixels by 600 pixels background size cover background position center actually that's just for something fun here let's say top left top a little left yeah I won top left let's also give this a background and background color of black and and a background blend mode of what should I do um multi apply cool good and a color maybe of white just mean actually see the text color light gray maybe is what I called it there we go so we can actually see the text and Ian that I should probably of a link in here so when you go it you could actually click on it or something but now what we could do is on hover we could have it to do what could we have it do and me hover let's change the background blend mode none let's have the background position change to Center we should probably animate all this too right transition all ease in out 300 milliseconds let's just see what that looks like why is it just moving up and down I can't do back initial maybe oh no you can't I thought you that's annoying that looks like crap top left it oh it must me filling up the whole space [Music] background sighs what if I just would like to actually cover um background size 150 percent yeah I don't like that at all we can't play with backgrounds as much as I thought we could what if I just changed ever it's not gonna work the way I wanted it you okay well we can do the same thing though I'm gonna take that off and that off and have at there are not add and before actually this should be in after so I want to be after the text no I want to be before the deck at before content is nothing yeah this makes sense content is nothing display is block background is black position is absolute top 0 right 0 bottom zero left 0 and I just broke everything oh yeah that means this should also be opposed and relative cool so it's covering it and then I just need to change capacity of like 0.8 my color white it is covering that the picture moving doesn't bother me but it does not moving enough and however before opacity of 0.2 maybe and transition all ease in out 300 milliseconds there we go so you get that nice little hover around there I just want that text though and again that would be something you could click on and actually go and see what it is we just want to make that more visible right so my light gray what if I just did a z-index of zero is that index of 10 [Music] laughs there we go negative one we'll do it you take that one off then what we're not okay whatever I'll leave it on and last but not least and before and before hover and let's just add and hover on this one too because they can't see the text now color is black no I still can't see it forget that color and text shadow of yeah text shadow should be fine a text shadow of 0 0 rgba black is a zero zero zero zero point five how much am i blurring it by whoops of three pixels Blair do I not have it oops I forgot my semicolon let's make that a bit bigger and and and and last but not least portfolio item font size just make it bigger - I'm probably too big for the small one but at least I can reach it 1.5 there we go you hover over you can see the picture a little bit better and now you've a nice-looking portfolio that obviously means a link in there and the text could be the link they go on top of the text you could even have the fancy text effect on it if just your text is the link you could even give that a position:absolute so it's filling up the whole space and that's the background that's changing on it whatever you want to do with that but it's a nice quick easy way to do a cool lay and then when you're bringing in different items you can play around with those items a little bit to have them look a little bit different or different sizes and different things if you have three new things to add in you could easily just very easily yeah actually let's go back to here so you had three new portfolio items you wanted or let's say you had two portfolio items I know I went with a wide it's gonna add another wide one and another medium one will forgive ignore the numbers that are in there so say you added two more in because your portfolio got bigger and then you could just come in to your portfolio and say now I have more because I had one two three one two and one two three four five six I now need eight rows and like magic it just all of a sudden adapts to what you need so again if I wanted to add more I just have to come up into my rows and that or if I wanted to squeeze more stuff in the sides say this is just getting really long and I wanted to get more stuff coming you know adding a new there in the columns I could easily just bump that up to seven at one point it's gonna break everything in the time being but as I add my content I just have to play around with it and I can adjust it on the fly this was originally six five eight five films there we go so yeah really really cool the grid is awesome this is just a really simple example where we're using the repeating and you could definitely build a really nice simple layout using the grid or complex layouts it's it's a really cool thing so if you'd like this I really encourage that you dive deeper into it and learn as much about it as you can because it's really really really cool and that's the CSS great I hope you liked the video before I get into manful ending spiel I just want to say once again thank you to your hair and to Angelique who have been supporting me on patreon if you want to join those guys and help support this channel go check out the patreon the link is down in the link below if you find a lot of value from what I do here and you want to support me in another way head on over there you can donate as little as dollar-a-month and it really does help if you want to support this channel and otherwise just leave comments down below hit the like button to let me know that you liked it and of course share the video if you if you found it interesting of course if you do have any questions or comments about this specific video don't be shy leave one down below and I'll be glad to answer it and until next time don't forget try and make your core in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 206,401

Keywords: HTML, CSS, How to, Web development, tutorial, web tut, web tutorial, Kevin Powell web, CSS Grid, Build a portfolio with CSS Grid, Simple layout CSS Grid, Build a mosiac layout, build a mosiac layout css grid, build a simple layout with css grid, css grid simple layout, how to use css grid, use css grid

Id: plRcoRqLriw

Length: 27min 35sec (1655 seconds)

Published: Wed Aug 02 2017