Video Title: Responsive CSS Grid Tutorial
In this video I’m going to show you how to make this responsive web design using CSS grid let’s get started so to begin I’m opening up the sketch file with a layout of my design on the Left I have a layout for the desktop design and on the
Right I have the mobile layout at the top of the page I have the navbar and then to the left I have the sidebar and then I have a main section of content at the top followed by three separate content areas and then the footer at the
Bottom for the mobile layout I have everything in one column and it has the nav bar at the top then the sidebar then a main section and then the content area is followed by the footer I’m going to create this exact layout using CSS grids CSS grids are pretty powerful and allows
You to make really cool layouts very quickly so I first recommend going into sketch or figma or some design tool and creating a layout of your page and then once you create your layout you can add gridlines so I’ve already done that here and the gridlines just emphasize the
Different areas of content on the page so to make it a little bit more clear I have the columns emphasized here so if we kind of think about it that the gridlines separates all the pieces of content then we can look at each individual element so there are four columns for this
Project in desktop view and they’re each the same size right so the sidebar is the same size as each of the content areas so because all of them are the same size I’m going to use one fr for each column fr is the fractional unit then you can use for grid so basically
We will indicate that there are four columns each of the same size so we will use one fr to describe each column now in terms of rows the rows are a little different so there are four rows here but they are of different sizes so that
First row I don’t want it to be so big so I’m going to make it smaller Fr and then the main area I actually want this area to be bigger so this will be a bigger row area followed by a smaller row area and then another smaller one beneath that for the footer
So the way that I recommend approaching CSS grids is first working with a designer or creating a layout of the design yourself and then once you have the layout created you apply grid lines on top of that to indicate how many kinds of rows and columns you’re going
To have and then you can really parse it out to determine how many columns you need and how many rows that you need and then you can also determine the amount of space each element should take up so because the columns are all the same
Size I’m just going to use one a are for each one but the rows will be different sizes so I included different size units for each one here so I’m going to take this design and recreate it with CSS and then we will create the mobile design
For this and make it responsive so now I’m going to jump to code pen so we can start creating this right now I only have a head tag in here with a link to a font that we will use later I’m going to start by creating a div and giving it a
Class of container and in this Dib we’re going to place all the elements that will be visible on the screen so I’m going to start by creating a a nav and I’m just going to put nav bar in the name of it then I will create a main
Content and I’m just going to put the name of what it is inside of the container so it’ll be easier to identify then I’m going to make several div so that first div I’m going to give it an ID of sidebar the second div I’m going
To give it an ID of content one and then I’m going to make two more divs with the same structure and the last element will be a footer so now we have all the main elements on the actual page and it’s visible right here so that’s all the
HTML for this document and the rest is going to be completed within CSS so in the CSS initially I’m going to call that container and I’m going to give it several properties so the first one is going to be display grid I’m going to give it a height of a hundred
Of the viewport height so that way it spans the whole screen so we can really see how the content flows on this page next I’m going to define the sizes of the columns and the rows so if I go back to my sketch document first I will
Define the column so if we just look at the columns layer I have four columns that are all the same size so I’m going to jump back into my code pen and I’m going to write grid template columns and then define the amount and the size of
Each column I want four columns that are each one fr so I’m going to write one fr four times instantly we see that the page changed because now I have four columns I only has seven elements so that is why this area is blank next I’m going to define
The rows so I’m going to go back to my sketch document and look at my row reference so I have four rows but there are different sizes so the first ones point to the second one is 1.5 and so on so I’m going to use this document to
Reference the grid template rows and I’m going to put the four values in here so right now the page has changed in that this first row on top contains these four elements and it’s only point two of the height of it and then the other pieces of content slow into that second
Row so to make each item a little clearer to see I’m going to add a background color behind each element so first for that NAB I’m going to add a background color and so on So I think it becomes a bit clearer when I added the colours to the background exactly what’s happening here so right now it does have the rows and columns that we defined on the page but right now each element is only taking up one spot in the actual grid so that’s why
That top row is skinny and it contains four elements the second row is a bit taller and it only contains the remaining three elements so now to really define the areas that we have in this design file I’m going to want to specify exactly where each element
Should live in the grid and I’m going to do that by using grid template area so if we jump back to our reference we can see that that navbar occupies that first row completely so it’s like the navbar is here the nav bar here here and here
For the second row the sidebar occupies the first slot and then main occupies the next three and then for the third row the sidebar continues and then content one two and three and for the last row the sidebar is here and then the footer is in the last three spots so
Basically we are going to represent this with text so I’m going to write grid template areas and then in quotes I’m going to place what element we want to be visible on each block of the grid so again for that first row I want it to only be the navbar so I’m literally
Going to write nav four times in that second row which again I’ll just bring up the design file really quick I want sidebar to be first and then I want the main to be three times so in the actual CSS I’m going to write sidebar and then
Main three times in that third row I’m going to want it to be sidebar and then content one two three so I’m literally going to write that in my CSS and the very last one is sidebar and then flutter three times now this part is really cool because I just wrote it
Out with plain text and now we just have to assign what we want to be visible where as you can see nothing changed in the UI of the website and that’s because we didn’t assign these values anywhere so the way that we’re going to do this is we’re going to label each element
What I have labeled up here in the grid template areas so the way to do that is for nav I wanted to reference this nav element right here that I defined in the grid template area so under this nav I’m going to write grid – area and then
Right nav then I’m going to do the same for main so I’m going to write grid area and then write main then I’m going to write grid area sidebar and so on I realized I did an extra space under content three and now the elements actually appear on the screen and it
Actually looks pretty close to the design so by using grid template areas and defining where we want our content we can easily create really cool layouts next I’m going to want there to be a little bit of space between each elements so I’m going to add a grid
Column gap and a grid row gap so I’m just going to write grid gap and I’m going to do point to REM so we can just see what that looks like and that just adds a little bit of spacing between each column and row next I’m going to make this responsive so
Right now I have the grid set up so it doesn’t matter how big or small the screen is everything stays in its same place and the width of it changes so I’m going to make some modifications so when this reaches a certain point the structure of the page changes just like
We had designed so beneath all this work I’m just going to write at media only screen and I’m going to write max width I’ll just write 550 pixels and we can see how that feels I’m going to add some characteristics of how I want this to
Look when it’s at 550 pixels in width so to go back to our design reference again here with our desktop layout and here is our mobile layout so I want everything in one column but in making everything in one column the number of rows that we have increases I’m going to jump back
Into code pen and I’m going to add a certain characteristics of how we want this to look in the mobile view so I’m going to write dot container I’m going to call that container again but add different characteristics here so here I’m going to write grid template columns
And then right 1fr because I only want it to be one column wide in this view then I’m going to specify the Rose I’m going to write grid template rose and then specify how I want the Rose to look in the situation now like I said before
In the desktop one we had four rows but here because each element will be its own row we’re going to need seven rows they’re going to have various sizes and some of this just has to do with tweaking so you’re going to have to just play around and see what fits well for
Your project okay great so now we’re going to do the same thing that we did before with the template areas but we’re going to redefine it based on this mobile view so we want the navbar to be first than the sidebar then the main followed by the content areas and then
The footer will be last so I’m going to follow that same structure for my grid template areas and as you can see now this view directly reflects our grid template areas that we have defined so now as this expands it goes to the other grid template area so now the mobile
View is exactly how we designed it with the grid template areas exactly following what we have defined and then when it exceeds a certain width it changes to that original template area that we defined earlier really cool and really easy to make different templates
So the last thing I’m going to do is add some styling to this so it looks like what we have designed so at the top I’m going to define some variables that I know I’m going to want to repeat throughout the system so I’m just going
To define a radius and padding that we may want to change later but I want it to be consistent across the whole design so I’m just going to define these as variables at the top then I’m going to use that for each element so I’m going to write border radius and then apply
That variable and then I’m also going to add a padding to the top with that variable that we defined and then apply each one to every element next I’m going to apply some styling for the text so I’m going to go back to my container then I’m going to
Add that font family that I put in the header of the HTML file I have a video that goes over how to import google fonts into your web design so I’ll link that video below so I’m going to add the font family I’m going to increase the
Weight of it I’m going to apply a text transformation of keeping it all uppercase then I will modify the size of it and the color and then finally align it in the center so there you go that’s how I make responsive CSS grids so just
To review what we did first I defined a layout in sketch I define the desktop layout and the mobile layout and then for the desktop layout I drew the gridlines to kind of get a sense of how many columns and rows that the design will need then I define each
Column and realize they were all going to be the same size and then define the rows which were going to be different sizes and for the mobile design I knew I wanted everything to collapse to one column but have more rows so in my HTML I originally defined one container that
Had all of the visual elements in the design and then in the CSS I defined a grid and then we set the columns and rows to their particular sizes and then defined a grid template area which directly mapped to the sketch design then I added a grid gap so then there
Was a little breathing room between each element then I labeled each element as a grid area so then it knew where to show up in the actual design and then for the mobile view we had an at media with a max width and then modified the number of columns and rows
And the grid template area so then it could actually map to the visual design so that’s how I make responsive layouts using CSS grid please let me know if you have any questions about the topic and subscribe to stay up to date with my latest content thanks for watching You
Video Keywords: *, sketch,ux,ux design,ui,origami,figma,product design,product designer,app design,web design,prototype,wireframe,ux process,how to,demo,tutorial,origami studios,zeplin,css,css grid,css grid tutorial,css grid tutorial for beginners,how to design a css grid,css grid column,css grid row,grid template area,css grid template areas,responsive,responsive web design,css responsive web design,desktop to mobile css,responsive layout,css grid responsive layout,grid
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Excellent instruction. Thank you.
Thank you so so much, you have helped a brother out here, God bless
Thank you for your simplicity. Continue creating such great content.
Excellent explanation Simplicity is worth a lot … thanks … Five Stars
Thanks Buddy
very easy to understand.
Thank you so much, I learned something new – grid-template-area and how to use them…
Sketch looks like such a cool design tool, what a pity it doesn't exist outside the Mac world. Nice presentation, thanks for sharing your throught/design process.
Thankyou somuch ❤❤ you make css grid so simple i understood this topic very clearly
very helpful, thanks
Your video is really really really incredible. BIGGG THANK U. I watched many tutorial and courese but I didn't get that clear like pure water.
Nice tutorial. Just wondering, which software did you use for the sketch?
Use me as a like button.
Youtube Top 10 videos for developers Responsive CSS Grid by Angela Design number one 🎉
A huge applause for you and for your work! A TREMENDOUS THANK YOUUU!
te amo 🥺❤
best tutorial ever !!!
Obrigado
This is still one of the best, clearest, and pleasant CSS Grid tutorials I have ever come across. Thanks so much!
Thank you so much, I have struggled with CSS Grid for 2 weeks now and thanks to your video I was able to finish my project. Great work!
Angela!
You are an angel. Such a nice way to explain grid! love u lady….
W video
Me acabo de enamorar!
Perfect explanation I've been looking for…. love it
It's was perfect! Thank you so much!!!
I'm new to web development, and your videos have been some of the best to help with projects. Your explanations, coupled with the training I've had, really helps me to further understand why we do some of the things we do! Thanks!