Responsive 4-column layout with CSS Grid | Build a responsive website from scratch (Part 6)

hey everyone this video is part 6 of the build a website from scratch series in this video we're going to be building out the blog post articles section and we'll be using CSS grid to make the layout responsive if you want to start watching the series from the very beginning click up here to see part 1 otherwise let's get into it alright let's pull out the latest article section now pretty used before we do any actual coding we're going to look at the design which I have open here in Adobe XD and let's go down to that articles section you can see that it is 4 columns on desktop and one column on mobile and we'll probably do two columns for tablet now if you saw the previous video where we built out this featured section just above it it has basically the same layout they're both 4 column on desktop one column on mobile and I'd mentioned last time that while we were going to build the features section using flexbox for the article section we're going to use CSS grids so that's what we're gonna do today we're going to build out this four column layout using CSS grid as opposed to flexbox and honestly I think that you could use either flux box or grid for both of these sections I don't think either one of them has a super strong advantage over the other so this is one of those cases where you can just pick whichever you are more comfortable with all right now that we've looked at the design let's start getting into the code so we're gonna go into vs code our code editor and even following along you might notice that my color scheme are slightly different I've been trying to tweak this customization in Bs coded for a bit and hopefully when everything is done I will be able to release it as an actual theme so you can all download it for free but for now it's still a work in progress okay now to get started we are going to look at the index.html and we're going to add our HTML markup so the first thing we're going to do is similar to the other sections we're going to add a section tag so we'll say section and we'll give it a class of maybe articles and I know that I ended up making the section for the feature section feature singular as opposed to plural but I want to try I think maybe slightly different approach for the articles now the section tag is going to be what's going to be full width on desktop inside the section tag to add a child element which has the container class that we've been using and if we look at the Features section again we see there's a feature underscore honors for content with some container classes and we're going to use those same ones down in the article section so let's add that now so add a div just by doing that dot for the class shortcut and we'll say article singular underscore underscore let's say content and we'll probably give it the same container actually container dot container - - PA L which is the class for padding all meaning it'll add the padding all the way around on each of the four sides and in the article content I think we want to do is let's see what I did for the previous thing okay yes so we're using an h2 tag for the intro section and then we'll add probably the same article grid type of thing so we'll say class article actually let me look at the design so there's actually no like intro paragraph like the feature section so it just has that h2 so I think I can get away with just writing H two and then we'll copy the text over latest articles then under the h2 we'll add another div and we'll say article grid and then in the article grid that's going to be our CSS grid parent element so then we'll add the child elements will say article I like to just say item four grid grade items whether it's flux box or CSS grid so each each article is going to have a wrapper of article item now going back to the design again we can see that in each article item there's an image on top and then there is some sort of text content below that so you can kind of break this up into two different sections so what I'm gonna do is in the article item will say article underscore underscore image and then below that we'll do article underscore underscore and maybe I'll say text and that's going to contain all the text in the article there is unwrapping all the text in one div article text is because of this padding all the way around so I didn't add the article text I would have to basically add the left and right padding to each individual text element and then I would have to add the top and bottom padding or margin whichever one you want to the first and the last element so I I personally think in this case it's just simpler to wrap all the text in one div element and then add a padding all the way around it's just a little bit less coding involved okay so we got the article image and when you have an image you always have to ask yourself alright do I want to use an image tag or do I want to use a background image and one way you can sort of help figure out which approach is better is if we look at the design let's let's take this dollar image and maybe I'll just delete this I don't really need that rectangle so if we look at the dollar image you can see that it's the same image of course but the cropping is a little bit different between desktop and mobile so here's more squarish and if you look at the mobile you can see that the right edge goes just out a little bit farther it kind of cuts off on desktop right at the corner of that one bill the same goes for the left side you can see that cuts off here and it's a little bit longer on the left side as well so that kind of tells me that I probably want to use a background image for the image element that way you can crop it to different sizes and you're not going to you know adjust the size of the image or or make it look kind of weird so in that case or the article image there's not gonna be any actual content but I will add the background image using background image URL and then we need to add the URL of course of the image so if we go into our images folder it's gonna be one of these it's probably gonna be one of these image files here so this one's gonna be image currency jpg so we'll add that in so we'll start off with slash images and then image - currency and I hope that is that right yeah the images folder is not in the app folder but it's in its own folder Mitch image currency dot jpg then let's have the markup for the text so look at the text item there is first an author section then there's a title of the blog post then there's a either a description or a summary you know you can call this anything you want so let's write the mark-up this is going to be author title and then description so I'll say article author title description okay and then we'll just kind of copy those over as well and there is an ellipsis at the end of that description just because it's a shortened blurb so we'll just copy over that ellipsis symbol as well okay now we have a space here just to kind of differentiate the item from the grid itself there we go there we go and let's see you know there's one more thing that we probably wanted to do and that is when you have a grid like this if it's for blog post or whatever it's usually going to be a link and there's no you know read more link in the design so what I'm gonna do is make the entire item a an anchor link and that's usually I think the preferred way of doing it because even if you hover over the image you'd like you'd like to be able to click over to the blog post itself anywhere you click on this section so I think what I can do is article item I'm going to make that an anchor link and then we'll add href and of course it's not going anywhere I suppose just say pound ok so I think we got all the markup that we need I'm just going to do the Styles just for this first article item just to make sure everything's correct then once everything's been kind of set and we know that it's correct then once we figure out all the styles for this we can copy it for the additional three items so to start off with the Styles in our S CSS folder going to create a new file I'll call it article s CSS and of course since we created a new sass file we need to import it so we'll say import article alright so it should be adding the article sass file to the watch now let me scoot this over to the other side so the first thing I'm going to do is remember we made the section tag have the class of articles so I'll add some styles for that just in case we need it and then we'll add article so add content grid item so I'm just you know I'm just copying all the classes I created in the next size gmail file over to the sass file so image text oops author title and description and I may delete this if we don't end up writing any styles for it but I think we'll be okay alright going back to the design we need to figure out what the background color of this is and it's a very faint but it seems like the blog posts themselves are white and then this background is a very light gray so it's probably the same as what we had in the hero section so that's going to be a style rule for the articles section tag so background color and if we look in our variable sass file I'm going to be this very light gray color here I'll do that and then see how that looks there we go so here's what we got so far we can see that because I did make the article item an anchor link it's has that purple link text and it's turning into the the hand when you hover over it but it does look like the background color is correct so I think that is just fine for now okay so the next thing I want to do is let's get the CSS grid stuff working so for article grid I want to set let's just say display grid for always even mobile just to do it that way okay now the first thing I'm going to do is I'm going to start writing the styles for CSS grid now even though Mobile is just one column I think I'm still gonna do display grid for mobile and then also tablet and desktop just to see if that's you know a good way of approaching this so we'll turn on a grid with display grid now unlike flexbox if you write display grid just by itself with no other styles nothing is going to visibly happen and that is because for grid you need to not only set grid display grid but you also need to start creating your template this is one of the core differences between flexbox and grid flexbox is more of a content first approach so once you turn on flex box or the Flex parent it's going to just try to fit all the Flex child items on the same row by default record you need to set the template meaning you need to setup the number and the size of the columns and or rows in the layout so for our layout it's a four column layout for desktop 2 column tablet one column mobile so since mobile is just one column we'll say grid template two columns and we just want one column so we'll say one fr and fr is a fractional unit it's kind of a general ratio unit used for CSS grade meaning it will take up as much space as possible and if there's more than one child item in the column or the row it will sort of divide the space up between those child items depending on the number so one of Farr's kind of a default like you know Auto kind of width so mobile just has one column now let's add the grid template for tablet so we'll use our mixin that we wrote great point - up and for medium whit's want to say grid and you can actually abbreviate if you just type in GTC it has this really cool intellisense and it'll automatically detect also or tablet we want two columns so we're gonna use the repeat function this is super handy for grid so repeat takes two parameters the first one is going to be how many columns you want to use we want to then you say - comma and then again we'll say one fr this will basically create a layout that has two columns and they will each be the same with one fractional unit lastly we'll do desktop styles so breakpoint up large and then again we'll say GTC and instead of two we'll say 4 so 4 comma 1 fr so this is just your sort of standard run-of-the-mill grid where you have a multi-column layout for different and the number changes based on your device width so let's see what this looks like right now okay oh this is interesting so instead of taking up the full width and see that this article is taking up only part of the width that's because we set four columns in that grid template so if we look at article grid I'm using Firefox and they have a really helpful tool if you click on the Layout tab and we expand grid so it detects the that this is a grid item because you know has display grid so if I check this box it's actually going to create lines until number the different columns and rows in the temple that we made so remember we just created a four column layout and this grid thing so it's showing us the four columns in the grid template so if we added more items it would populate this grid so let's actually do that now I'm guessing the markups probably okay so we'll take this we'll duplicate it one two three times save and go back to our browser so now I can see that the four columns are actually working which is pretty cool let's see how this looks on tablet so we'll reduce the width end went to two columns and then want to call them for mobile so with just a few rules we've already sort of created our grid layout which is pretty cool so for CSS grid the approach that we used is a very sort of responsive design approach meaning we're using media queries to change the grid template and change the number of columns there is another approach that you can use with grid that is more intrinsic design meaning you don't have to use all these media queries because there are some built-in properties that can sort of figure out and adjust how the layout actually looks depending on the width of your browser so I'm going to show you one of those now and then I'll explain why I actually prefer this method with the queries just comment out everything except display grid so ctrl K ctrl C will comment that out in vs code and what you could do is for your grid template columns property we can use something called auto fit and then also another function called mid Max and I'll explain what each of those is once we write out this rule so if you look down in the desktop ruler we had previously it said grid template columns and then use the repeat function we're gonna do something similar here so we're gonna say repeat but instead of writing an actual number like 4 2 we're going to say Auto fit and this is a property that sort of lets grid decide how many columns are gonna actually be on the website which is pretty cool right you don't have to say 2 or 4 it'll sort of decide for you and then for the width of each column we're going to use min max so instead of saying you know I want this column to be 200 pixels wide or 1 fr2 afar's we can sort of again give the grid itself the basically the control over how wide things will be as well as how many columns are going to be on the row so I'm in max doesn't name kind of sounds you give it a minimum and then you give it a maximum width in the parameters so the minimum width we're going to say let's go back to the design really quick and this square so this is about 200 pixels wide so we'll say that for the minimum we'll say about 200 pixels maybe a little wire let's say to 230 perhaps and usually I should convert that to rims so let's do open the calculator and 230 divided by 16 is 14 point three seven five so fourteen point three seven five rims and then the maximum will say 1fr right so this will basically give the grid column either a width of you know 230 pixels 14 rims minimum or could be all the way up to 104 so it could theoretically take up the entire space of the row and this is actually all you need so let's kind of see what that does to our grid in the browser so it looks the same on desktop there's four items and they're all in the same row and each item is currently 265 pixels so that is above that is between the min min width of 230 pixels and obviously one if R could be a hundred percent let's see what happens when we take the browser width and we slowly reduce it okay so four okay so now you can see it broke to three columns and then there's three items on one row and then one item by itself on the second row we'll just kind of keep going here so now it's broken into two columns and then for mobile it is one column this is one of the great parts of grid where with simply one rule in the in the grid parent critical column using repeat autofit and min max it created this one column two comma three comma up to four column layout so you know this is pretty cool now why did I mention that I'm not going to use this approach well even though it is awesome that we can write this rule and create a multi-column layout without using any media queries I know that in real life if the design has four items and they want it in one row for desktop they may not be super happy when you have a layout like this where it looks uneven and let me show you let me kind of highlight that by hiding the gridlines so we'll just pretend that there's lines around each of them let's do that a trifle item quarter one pixels solid red so this looks a little bit uneven I think most people if they want to show four items are not gonna want it to look like this you know it looks better when it's even and there's just two two and two and of course it's fine when it's on mobile and it's just one column but this image Queen state is not really desirable I would say and unfortunately that's just kind of the way that's kind of what happens when you let grid control you know the number of column using autofit and then the width using the min/max function so even though there's more rules for the sake of you know kind of maintaining control over that grid i'm going to go back to the immediate query thing and for autofit I don't know if I explained that fully but we go back to turning on the gridlines and then turning off the border so for auto fit what happens is it will fit the items as well as it can in the template and the other option instead of auto fit is you could say autofill and they're very similar but not quite the same let's see if we can see the difference here doesn't seem to be different for us but let me just show you it's a really good article in CSS tricks for auto fit autofill okay yeah saris swegen sure this great article comparing what auto fit autofill look like so in this example you can see autofill will create the template but it's not going actually all the way across whereas auto fit will kind of try to fit the content to the row and then if you go down a little bit more I believe there's an animated example here so look at this the top ones autofill so you can see there's actually a blank column when you keep extending it out whereas auto fit will you know fit the existing content to the row that's autofill an auto fit again going back to our own website I'm going to go back to the media queries just because I like having an extra layer of control but this is also an option in it definitely come in handy in other circumstances let's go back and we will delete this and then we will uncomment trial Kay control you there we go we'll save go back to our site and we're back here there yeah browsers a little slow sometimes so she called one tablet and one column on mobile and that goes back to four columns for desktop so if that helps just kind of explaining sort of the basic this is a fairly basic CSS grid layout I'm using the grid template columns property and then you can designate how many columns you want with the repeat function and also how what size each of the columns are let's go started now actually styling the content in the articles themselves all right now let's start styling the cars themselves so let's probably start with the image up here and then we'll move on to the text elements so using our little rectangle here see it's about 200 pixels tall so let's go into our code editor and add those styles in so this is going to be for the article image element so down here article image will say height of 200 pixels and we do need to use our calculator for that so 200 divided by 16 is 12.5 rims and then since these are also background images let's add some of those background properties so background size cover so this will ensure that it will take up the entire div then background repeat' and I pretty much always turn repeat off and then background position center center to make sure it's centered I think those should be good whoo now so let's check the site and see how that looks sweet so the images are loading up little kite we forgot to add a gap in our grid parent property so let's do that so if we go back up to the article grid will add a gap of maybe 20 pixels and 20 divided by 16 is 1.25 grams so it looks pretty good let's actually compare it with the design we got might be a little bit more than that just more like 30 pixels so 30 divided by 16 is 1.8 75 okay and I don't know if you noticed but down here in the terminal for some reason it always throws an error when you start adding the gap property I think there just may be a bug in the live SAS extension but if we rewatch it then everything's fine and there's no errors okay so that looks pretty good let's see what else we need to do here did I do the background I think I did do the background for the whole section let's just turn off the lines for now so after the image we have the text here and I'm going to make that a white background color since you can see in the design is what the text area has let's do that and let's also add some padding so see looks like it's about 30 so let's see if it's the same on the bottom looks like it's a bit less on the bottom but I might just make it 30 all the way around I don't see what the horizontal padding is looks like it's less it's about 25 on the sides and then 30 on top and bottom and see we got on mobile as well looks like it might be a little bit more on mobile no the side padding on mobile is 30 yes it around 30 and then see what the bottom padding is 44 on the bottom and then it looks like it's less on the top 30 looks like four I might just make them all the same 30 all the way around well I guess on mobile should have a little bit more space on the bottom let's see if it's the same yeah it looks like all these have much bigger bottom padding that's fine we'll do maybe 40 so 40 on the bottom and then the other sides will be 30 for mobile and then on desktop I believe it was 30 on top and bottom and then 25 on the sides all right they're around 30 for the top and then 20 and 25 okay this is going to be the article item element we'll do the mobile panic for us no padding no caps-lock padding so it's going to be 30 divided by 16 and 1 point 8 7 5 rims and then I'll do the same thing for everything except the bottom and then the bottom is going to be I think did I say 40 room there are 40 pixels 2.5 rims and I'm going to do for I guess tablet medium and desktop will say padding and I think we said 30 on top and bottom and then 25 on the sides 25/16 1.5625 there we go okay see we go oh I know why the padding shouldn't be on the article item it should be on the article text so just for the text that's okay let's fix that movie padding down there there we go that's much better okay we also need to add a background color to the article text color and I think Wright made it variable for that yeah okay there we go so I mean it's a little hard to see since it's a very light gray in the background but that is what the styles are and I believe there's also a border radius around the whole card so you can see the the corners are slightly rounded all the way around so let's add a border radius it doesn't look like it's very round so I might do something like five pixels so 5/16 point three one two five and we'll just do it all the way around and one thing you need to keep in mind with border-radius is that sometimes in order for the border-radius to actually show up and sort of cut those corners you need to add over overflow yeah overflow:hidden so that'll make sure that the actual rounded corners will show up cool well looks pretty good okay so let's do the text starting from the top just working our way down so the first part of this card text is the author section and this looks like it's quite small let's see yeah it's probably around ten I would say ten pixels tall so let's do that so here we go author font size it's going to be 10 divided by 16 0.65 I'm assuming it's gonna be the same for both mobile and tablet and desktop now let's move on to the title it looks like it's a darker gray and is bigger so about maybe 17 or 16 let's do 17 so font size 17 divided by 16 1.0 65 then for the description looks like it's bigger than 10 pixels since it's bigger than the author but not too much it's about 13 it's a bit small 13 divided by 16 is 0.8 1 2 5 rims ok now let's see how that looks looks pretty good now of course we do need to do the colors right now since I made the whole article item and anchor tag it's has at purple link color so we'll adjust those but size wise that looks fairly good we might need to tweak the line height a little bit but let's do those font colors so it looks like the author and the description are the regular grey that you know we saw kind of up here and the title is the same darker grey as the title up there let's do that so since we have both author and description the same color what I might do to make it slightly more efficient is in the article text I'm gonna add the color property there and then I will make the different darker grey color for just the article title so if I go into our variables that sort of medium grey is probably this grayish blue and then the darker grey is probably this dark blue color or the title there we go okay okay looking much closer so let's now work with these spacings we need to add some space between the elements and then we'll also just the line height on that title looks like it's a little bit too much but first spacing below the author is 16 pixels of spacing that's one rim so we'll add a margin bottom of one and rim to the author then to the title there's some space under that as well looks like it's a bit less but honestly I'm just gonna say 16 as well hey I'm being lazy and then let's see what else we need you used to adjust the line height of the title and also we'll check the line height of the description as well that's right now seem like there's a little too much line height right here so let's try something like wine height and I usually like to put the line height property under the font size property since they're kind of related so 1.15 maybe I'm just kind of guessing here one what a line kind of water means it's the same as you font size 1.15 means it's just just a little bit taller than what the font size is okay so that looks closer which is good that seems pretty good maybe just tiny a little bit more it's maybe 1.2 so 1.2 okay I think that's really close enough let's check out the line height for the description now I think that's actually pretty close yeah I think that's good enough and it looks like the spacing that we have between elements is okay as well it looks like it's a bit less spacing here so maybe we should make that a little bit smaller so article title go to the rules tab and right now I think I had set a margin bottom of 16 pixels or one room so let's adjust this so 16 pixels is a little too big so let's try 14 that's a much closer on the design so maybe 10 pixels looks like it might be less than that actually maybe 8 pixels okay let's do 8 I feel like there's less spacing under the author as well I'll just copy this over first Martin Vaughn with 8 pixels article title 8 divided by 16 is point 5 rounds because I could have done the math because 16 divided by 2 is 8 anyway and the author what happens if we just do the same thing your point five rounds does look a bit better I think [Music] there's still a little bit more space under the author so we'll just tweak that of it so instead of eight pixels let's say 10 maybe 12 12 pixels 12/16 0.75 rooms I think that looks all right okay so I think our text is pretty good actually so now let's add the proper images and copy for each of these articles so in XHTML file we will adjust that just copy these all over okay so let's do the images so in the design it's the currency then it's like a restaurant then a plane with clouds and then confetti so a restaurant plane confetti we look on our images folder image restaurant them I had the name right restaurant and they say we want a plane and then confetti alright let's see how this looks he looks pretty good so we take it down comes two columns and then one column one mobile this is pretty good not too shabby so one extra thing that I'm gonna add is some nice little hover States and I think I'm also an out-of-box shadow just to make the card a little more separate from the background so let's add those in now so the Box shadow I'm going to add to the article item itself since I want to go kind of all the way around so article item say box shadow and for box shadow it takes a bunch of different parameters so let me just type them in first and then explain what they are okay so in box shadow the first two numbers are the position of the shadow so the first zero pixels will control the horizontal position so I want it to be probably the center so I'll leave that as zero pixels second zero pixels is the vertical position and usually for shadows it's better to make it a little bit down from the object itself so it seems more like a real shadow so we'll maybe just that to be three pixels and I'll can write these two rims once we've kind of finalized everything the last number of parameter is the spread so it's kind of how diffuse versus how like hard line of the shadow it is so I tend to do at least 10 pixels maybe 12 pixels for the spread and we can of course tweak that as we see fit and then the last one is the color of the shadow and for shadows I usually like to use a semi-transparent shadow so when I'm done is use rgba 0 0 0 which means black and then the last last number here is the Alpha Channel meaning the opacity I've said that to 0.15 which means basically 15 percent opacity so it's it's pretty transparent okay so let's see how this looks ooh there you go so we've got a nice shadow here okay looks like we have some issues down here where the white doesn't go all the way down to the bottom so I think we need to figure that out so let's see what's going on here our whole item goes all the way down there a little image in an article text so it seems like because the text on the first two is shorter then the last tooth you can see there's only four lines for the first two in the description but there's five lines or the description for the last yeah that's why they're taller so one thing I could do to fix that is maybe set the background color of article item white so now it's like that so let me try moving the background color to the article item instead of the article text see if that fixes the issue let's do it here okay much better good let's make sure everything looks okay even when we're changing the width okay all right good now the next thing we want to do is I'm actually going to add a little hover state so it just looks nice you know when the these little I guess you can call micro interactions so the website kind of responds to the different actions you take so I want this to change in some way when I hover over each card and one thing I do a lot is scale it up slightly when you hover over it so let's try adding that and I'll do that to the entire article item as well so add the hover selector and on hover we want to transform and we'll increase the size by using scale and then in the scale function we can set what we wanted to scale to scale one means a hundred percent so it won't change at all so we want to be slightly more than a hundred percent but not too much so maybe one point zero five so that would be one hundred and five percent so we're only increasing by 5% let's try that and see how that looks okay so it is just a bit larger and we also need to add a transition so do it smoother as well so transition we'll just say all maybe 150 milliseconds and then ease in out that controls this smoothness and speed of the animation let's try this now ooh smooth like buttah I like that I'm pretty happy with that okay so I think we can actually consider this section done it looks good on mobile obviously on an actual mobile there's no real hover State but that's fine tablet 2 columns desktop 4 columns all right so I think we can consider this section complete and that was a blog post article section what did you think about how we used CSS grids to make it responsive you have any feedback questions or other comments you know I was leaving down below and as always thanks for watching and keep on coding [Music] you