Grids & Responsive Design. Ultimate Guide for UX/UI Designer (Figma Files + Basic HTML & CSS) | Christine Vallaure | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Grids & Responsive Design. Ultimate Guide for UX/UI Designer (Figma Files + Basic HTML & CSS)

teacher avatar Christine Vallaure, UI/UX DESIGN + CODE

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

31 Lessons (1h 37m)
    • 1. Promo

    • 2. Welcome

    • 3. --> COURSE MATERIAL

    • 4. Understanding Columns Gutter and Margin

    • 5. Adding Elements to the Grid

    • 6. Avoid Common Positioning Mistakes

    • 7. How Does the Grid Become Responsive?

    • 8. Which Breakpoints Should I Use?

    • 9. Why Those Breakpoints?

    • 10. Responsive vs. Adaptive Grids

    • 11. Setting up Responsive and Adaptive Grids in Figma

    • 12. FIGMA: Responsive Grid Design Setup

    • 13. FIGMA: Adding Content to Adaptive Grids

    • 14. FIGMA: Adding Content to Responsive Grids

    • 15. Do I Really Need One Design per Breakpoint? That Is Crazy!

    • 16. Understanding CSS Grids

    • 17. FIGMA: CSS Grid Setup

    • 18. --> PROJECT: Responsive Portfolio in Figma

    • 19. BOOTSTRAP: Grids in HTML & CSS: Introduction

    • 20. --> COURSE MATERIAL: Bootstrap Grid

    • 21. BOOTSTRAP: HTML Setup

    • 22. BOOTSTRAP: Adding Fixed and Fluid Containers

    • 23. BOOTSTRAP: Adding Rows and Content

    • 24. BOOTSTRAP: Responsive Design in HTML & CSS

    • 25. CSS GRID: Introduction to CSS Grids

    • 26. --> COURSE MATERIAL: CSS Grid

    • 27. CSS GRID: Grid Setup

    • 28. CSS GRID: Fluid Design with Fraction Units

    • 29. CSS GRID: Advanced Distribution Gird Rows and Columns

    • 30. CSS GRID: Responsive Grids

    • 31. Thank You

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class, you'll learn everything about using grids for your UI Design.

Grids are not only your best friend when it comes to creating a consistent layout. They are also the backbone when it comes to responsive design and making your product shine across all screen sizes.

We will start from zero and make sure you will be a pro by covering the following subjects:

  • We will learn about the basic setup like Columns, Grutter, Margin, and Rows
  • We will learn how to add content to the grid
  • We will make sure to avoid common positioning mistakes
  • Then we will have an intensive look at how Grids make your design responsive
  • And how you, as a UX/UI Designer set up your designs in Figma accordingly
  • We will get into the details of how breakpoints work, where we can find them, and why they are such strange numbers
  • We will learn about the difference between responsive and adaptive behavior
  • As a final project, we will be building our own responsive portfolio in Figma

Besides the classic Grids like Bootstrap and co, I will tell you a bit about my favorite grid, the CSS Grid, full of possibilities.

And yes, we will go the extra mile and look at some basic code, all set up for UX/UI Designers to really understand the technicality behind the product you are building.

The Figma and code template that I will show you are part of the course material to make sure you can dive right into the making. 

Meet Your Teacher

Teacher Profile Image

Christine Vallaure



UX/UI Designer with a passion for code and founder of moonlearning.

I’ve worked internationally, in-house, and remotely on projects for leading brands, agencies, and startups. I care deeply about creating well thought through and aesthetic products. My work ranges from initial ideas to sketches, wireframes, prototyping, and front-end tuning.

Besides client projects (visit for references), I am building, an online learning platform for UX/UI Designer. I also write about Design & Code on Medium and my own blog.

For more information about me please visit my LinkedIn page. 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Promo: Hi, I'm Kristine, a UX UI designer. In this class we'll learn everything about grades, online. Grids on not only your best friend when it comes to creating consistent layouts. They are also the key to responsive design and making your design shine across all screen sizes. We will start from 0 and make sure you become a pro by covering the following subjects. We will learn about the basic setup like columns, gutter, margin and rows. We will learn how to add content to your grid and make sure you avoid the most common positioning mistakes. We will have a deep dive into how grids meet your design responsive and how you as a UX UI designer can set up your design in Figma. Accordingly. We will understand how breakpoints work and why they are such strange numbers. I will teach you about the difference between responsive and adaptive behavior. And besides classic resistance like bootstrapping co, I will tell you a little bit about my favorite grid, the CSS grid, full of possibilities. In the end, we will go the extra mile and look at some basic code and how all of these really get set up in reality. This is all set up for UX UI designers to really understand the technicality behind a product you're building. I will provide you with Figma and code templates that you can use and dive right into the making. And there's a final project. We will design our own responsive portfolio page in Figma. This isn't caused by relearning dot IM. 2. Welcome: Welcome to this class about grids from absolute beginners to pro. In UX UI design grid on not only a design element, but a very important part to get you designed coded, derived way. Grids are also the backbone when it comes to responsive design and making your product shine across all different screen sizes. So in this class, we're going to have a look at standard grid systems as well as CSS grid and cover the following topics. We're going to look at the anatomy of grids, columns, gutter margins in rows. Then we're going to learn to understand how we add content degrades the right way. We're going to talk about some common mistakes that tend to happen and make sure we avoid them. We're going to make the grid responsive and understand where breakpoints are coming from and how to use them. We're going to talk about different behavior the grid can have between breakpoints. So the difference between responsive and adaptive design. We're going to set up a responsive grid in Figma and see different ways how that can be achieved. End, we're going to look at some real HTML and CSS. Don't get scared about this is all set up for UX UI designers to really understand the technicalities behind the grid. 3. --> COURSE MATERIAL: You may want to work alongside me, so I prepared some files for you to download in the course you're taking simply navigate to project and resources. And there you'll find all the information and the link we can download the material or you can navigate to my profile. Well, you'll also find a direct link to the download page. And this page you'll find a variety of downloads. You can simply pick the cause that you're currently taking and then just click Download. And it will automatically download the file for you. To open a Figma file to download it, It's important that you have a Figma account. Inside your account, navigate to new, impress Import. You can then choose a file that you would like to open. It might take a moment as they're quite large, but once you imported them, they will be on your account and you do not need to repeat this process. I am working with Google fonts for most of my designs. So if you're working with the Figma app, then you don't need to do anything. All Google fonts are preloaded automatically. If you want to work with Figma in the browser, then you just need to search the font that it's showing you as missing. For example, Poppins, I use a lot. And then you can directly download this font installed on your computer and you're ready to go. Or resources are free for existing students and you do not need to enter any additional information. You can, of course, also download any of the other files in case you're interested. So under general are always add Anything that I think might be useful. So there is, for example, a Bootstrap template and then a list with links for inspiration books and blocks that are really great for UX UI design. This list of downloads are steadily growing, so make sure you come back and have a look from time to time. 4. Understanding Columns Gutter and Margin: The most common grid you'll probably come across in web design is the so-called 12 column grid. You don't have to use a 12 column grid. There is also a great 24 column grid, for example, by an InDesign or 16 column grids. Just note that it always needs to be an even number. The important thing is that you understand how grids are set up because they all follow the same principle. So if the red area is our browser window, you can see the 12 columns on top in light red. The space between those columns is called gutter. Use a Bootstrap grid for example, per default, this gutter will be set to 30. You can adjust this got a size 2, you need just be aware it is one got a value that applies to all of them. I personally like my gotta to be a multiple of eight as our user 8 spacing system. And eight is my magic number for everything in my design. There is also grids that increased the Gaza proportionally, but I personally prefer having it fixed. The space on the outer left and right-hand side is called the margin. In most credits per default, this is half of a gutter. This is because the gutter is actually made up out of two margins. One of his left-hand column side and a right-hand column side now contain this can behave in two ways. They can either be fluid, that means that they take up the whole width of the browser window or they can be fixed. That would mean that a container sits as a fixed size in the center of the browser window. In a fixed container, there will be additional outer margin and that will be determined by the remaining space of the browser window. If you're working with a fluid grid and we're more outer margin, that is no problem. You can just add that. And it could be a fixed size or a relative size of the width. Just be aware that you have the natural margin of your grid plus some extra margin that you're setting them. Don't stress too much about exact calculations of this margin. Just be aware that this is how it's setup when playing with it. You can join the columns to simplify a layered structure, as long as you always find the original grid underneath. They do need to be equal. You can, for example, also set up a design like this that will create a sidebar. In the end. It's all based on a full grid below. 5. Adding Elements to the Grid: Let's talk about how to add and position elements integrate. Before we position the actual element, we need to understand the role of rows. You will not really see or add those rows in your design software. But later in programming, they will be there like a container holding your content. So you need to sort of have them in the back of your mind when adding content in your design. Per default row span across the whole container and you can have as many rows as you want below one another. Now, inside those rows, we can now place our items and tell them how many columns we want them to use. So we can use up all 12 columns, for example, for a header or break the columns up however we want to for our design. Understanding that the rows hold those items helps you to understand why something like this is most likely not going to work within the grid. There is, of course, ways to build this. So if you have a fancy hero section and you really want to have an effect like this. You could just take that section out of the grid. Having a custom section like this is of course a little more time consuming to build and maintain. However, if we're talking about your hero here, that first impression users are getting, it might be worth your while. Some standard information deep down in your content, however, probably not so much worth the effort. So be aware of this and use it wisely. So let's get back to our example where we have everything sitting nicely in our rows. The distance between the rows, unlike the gutter space, can be individually adjusted per row. You can also leave gaps of empty columns which help you to create a less rigid design. Just make sure that our full columns think of it like an invisible block. Within this setup, you can now lay out freely and add images, colors, and text. Usually the rows have the height of the content. By the way, however, you can add background color, padding and so on to adjust it to your needs. By adding whitespace and creating clusters, you can achieve great results within a grade. Just be aware that content might be changing over time. So if you're adding content to a row, you're expanding the whole row. Or you think of rows as invisible boxes holding your design. 6. Avoid Common Positioning Mistakes: When positioning your design elements on the grid, make sure to mind the gap. Let's take a moment to understand how and where you can position and where mistakes tend to happen. When adding elements such as images or text, you would put them on the grid. So basically, they spend across columns and you ignore the gutter left and right of the first and the last column. If you want to add a background color to the row or the element, we can do that. Now one thing is really important to understand. Remember that the gutter is made up of the margin of two columns and belongs to those columns. So the content, like this image here sits on the columns, but the container holding your content sits like this. So if you were to color this container holding your item, this is usually a diff in your HTML. Then you would get a background colors sitting like this. But to be honest in your design file, this will be very tedious to set up. So people don't really do that, because once you set up a grid in your design file, you just get the columns and you get the gutter. And this is how it behaves. And that is totally fine. We don't really do this pixel perfect design anymore. You, however, need to be aware that in the browser this might be an easy solution at the developer is using. So just know how your things work. So this is really just something that applies to background color. Really background color only very important to understand. Because the thing is, if you add content like an image or text, it can never use up to gutter in any way. So don't ever designed something like this. It is not possible. If you do however want the 0 gutter between your images, you can do that and you can just add all the gutter to 0 and have your images next to one another. Usually this sets dugata for the whole grid. But in some grids like Bootstrap or CSS grid, there are clever solutions. You can just change the GSA for specific rows. Best to quickly check this with your development team and as usual, don't overdo it. Sometimes you might want to use columns, but still adjust the spacing a little bit. That is no problem. You can just add some padding to your elements. As long as the parent container sits on the grid, you can adjust all the small details within it by padding and margins. And you can get some really nice results. 7. How Does the Grid Become Responsive? : Besides being a great help and positioning elements and adding structure, one of the main tasks of the grid is to add responsive behavior to you design. This means making the design adapt to different screen sizes in order to guarantee the best design and usability experience. But how does a great do that? Now, even though we can set our grid in such a way that it adapts to different screen sizes. This is not enough for a real responsive experience. Because the same layout might work well on one screen size, but not on a similar, larger or smaller one. That's why we use something called breakpoints. Breakpoints literally break up the design in little ranges. And within those ranges, a certain design can be displayed. Let me explain you how that works in a little more detail. Now, most designers started design on the larger screen. But in development best practices actually to start at the smallest screen and then work your way up. This is called mobile first. Here we have our mobile design. And to be honest, on smaller devices such as mobiles, you usually don't display the 12th grade, you just have everything below one another, or you might split it up in twos or maximum force. So from a certain size on having, for example, images below one another is not going to work anymore. So you will set a breakpoint that basically says from this size onward, the content is the same, but we're going to display the layout like this. If we would leave our setup like this, that will be just fine. We would have a mobile version, and then from a certain breakpoint, the design would look like this, no matter how large it gets, it would just stay with this layout. However, if you need some more changes, that could be a layout change, or it could be something like a change in font sizes, could be colors, or it could be hiding or showing something. This will, for example, be the case. Hiding a burger menu and adding a larger desktop menu, then you could just add another breakpoint. So again, we would say from this side onwards, please display for anything larger, this new layout. Layout in the middle, you basically locked between the size of the first breakpoint and the second breakpoint. And this is how you create those ranges. As you can see, we're still position on the grid and leave pretty much everything the same way. We just optimize it for the different screen sizes. Now in a very simple design, you might be fine like this. But design systems like Twitter, Bootstrap usually offer you up to five breakpoints. You don't have to use all of them all the time. By the way, you can also have them all set up and just activate them if you need it. As always, the simpler, the better. 8. Which Breakpoints Should I Use?: If you're setting up your design, you might be wondering where to get those breakpoints from. Well, one way would be to choose them yourself as you go along. That could be the case if you're setting up your own grid with CSS grid or similar, then you would just start at mobile first, work your way up and whenever necessary, set a breakpoint. I will be a little careful on this approach. It works really well. If you're working on a small project, let's say your own portfolio. And you might even be playing with your own code a little bit to get some practice, then that is fine. As soon as it gets more advanced in a larger project, I would stick to some fixed breakpoints. If you're using a grid system like Bootstrap or it could be any other than the breakpoints are already set up for you. Whatever system you use, you will get all the information in the documentation. So here we have the Bootstrap documentation. By the way, bootstrap comes with a whole library of buttons and texts and cards and everything that you can imagine. However, most of the time I'm only interested in the grid, so only familiarized with the grid. And later in the development, I only add the grid and not all the other stuff. It's absolutely your decision if you want to use the whole library or only elements, as always, make sure to check with your development team. So I can see that there are five different breakpoints. Extra small, small, medium, large, extra large. And each of them shows me a break point, a pixel value where they start kicking in. This will be another example, the Google Material Design Grid. And here you can see they give you the breakpoints. They are slightly different but quite similar to the one we just saw in Bootstrap. And also don't get confused if you seeing DP or points or pixels, when you design, your always designed at something called one x, which means one pixel equals 1. So you do not need to worry about resolution if you're ever confused about this. Just used a preset artboards given by Figma. They're already set up for you add one x. Here. You also see that the adjusted the column size for different screens, or for example, in mobile where it really doesn't make sense to have 12 columns, they just reduce it to four, but it's all the same system. One last one I want to show you as the Zurb foundation grid. If you want to explore a little more, you can go to this page. There's like they have different kinds of grids and different behavior. So it's really interesting for media queries, which is what our breakpoints are called in CSS, have a small, medium and large, and they give you here to pixel value which you would use in your design data and later define it in EM, which is really good practice because it's more accessible. But as we're designing at the 1 X, where one pixel equals 1, we don't need to worry about this. We can use these numbers because we don't care about resolution. We have it set up as one X, so we're not going to cause a problem. If you're getting a little confused about resolution and units, there is a whole separate course about this. 9. Why Those Breakpoints?: Now you might wonder why those breakpoint numbers are so odd. Would it not be much nicer to have six hundred, eight hundred, ten hundred and so on. You could do that and change your breakpoints. I just want you to understand why they're set up the way they are. Now there are many, many different screen sizes out their old ones, new ones, and surely many to come. So if we would take them and group them according to their size, we would get a range, something like this. Each dot is a screen size here. I made this one up. But people building grid system, we'll obviously look at some real data and very carefully create those clusters. Because by carefully examining those dots, you can see that you can group them. So what the breakpoints really do is that they have some sort of calculation where you can see that like natural gaps would occur. And then they can put together the most amount of possible screens within one breakpoint. This is obviously simplified a little bit. You might also come across different grid systems that don't have exactly those breakpoints. This is because they might have slightly different data they're relying on, or they might have the same data, but simply choose a different technique to cluster. But there will always be a sound thought and research into why they have exactly those breakpoints. I personally appreciate that they did all of his research already for me. So unless I have something really simple or that I set up my own CSS grid. I quite like using those numbers. However, if you want to use different breakpoints, just go ahead. Don't over-complicate it. It's really there to help you. 10. Responsive vs. Adaptive Grids: When using a responsive grid, you need to be aware that within your breakpoints, the grid can behave in different ways. And this is where a lot of misunderstanding happens between design and development. We tend to call all design that works across different screen sizes. Responsive design. There is, however, two ways degrade can behave to achieve this. The first way is the so-called adaptive design. What that basically does is it sets several fixed layout designs. The layout displayed depends on the screen width of the viewer or better on the browser width. So you are working with fixed containers within fixed breakpoints. Let me show you an example. I just place some items in a classic Bootstrap grid here for you. And as you can see, if I resize it, we reached a first rate point and then we reach another breakpoint. I, by the way, I told you that this breakpoint I wanted to reshuffle. And then we have another breakpoint I set. And you can see that in between those breakpoints to contain it to stays the same size and just positions in the middle. Now the other way a great can behave is the so called responsive design. Nowadays hereby you basically mix fluid and adaptive design. So you have breakpoints, but what they do is they create a range. And within that range, the design behaves fluid. Now you might have heard about fixed and fluid design. Only. Only fixed design basically means one side for all greens. That doesn't really work nowadays anymore with all the different screen sizes around, especially the mobile devices, you might get away if you just have one login that could work for all screen sizes. But generally it's not really something we use anymore. Now, completely fluid design is actually the original idea of responsive design. And what it originally meant is that you have one page that adapt seamlessly to all different devices. You could still do that, but it actually turns out a little more difficult than just using a grid to help you. So in general, if you're looking for that flowing, seamless design experience, you are most likely talking about a responsive design using a fluid container, but still using breakpoints. So let me show you what that will look like in the browser. So here we have the same example than before, but this time I to set my container here to be fluid within the breakpoints. I also added a little bit of margin to the left and right. Nothing you have to do. I just prefer it like this. So if I resize now you can see that it always resizes. If I then go smaller and reach up to the first breakpoint. Still reshuffle. I reached genetic spray point and it would reshuffle again. But in-between the sizes of the breakpoints, it will just always use up the whole width. You can use either adaptive or responsive. I generally recommend that you talk to your development team before you start designing just to make sure that there are no limitations you're not aware of. My advice would be that if you're working with something that has a lot of detail and small elements, like a lot of positioning inside your columns elements, then I personally find it much cleaner and easier to scale with an adaptive approach as it gives me much more control about different parts of my design. As a designer from an aesthetic point of view, I obviously really like the responsive design as I love, the fluid enters between the breakpoints. However, it takes a little more attention to detail. But for something like a simple portfolio or a very graphic, minimalistic company page, you can get really great results. One thing worth mentioning is that adaptive design generally loads a little bit faster then Responsive Design at it only transfers and necessary assets. This is, however, not always the case. There are ways around that worth checking with your development team. 11. Setting up Responsive and Adaptive Grids in Figma: I am going to show you how to set up your grades in Figma. So up here, I copied the information that I get from my documentation about the grids that I'm using. You might be using a different grid. So you can just use different numbers to set it up. That is no problem. So I just randomly chosen art board and this is quite a large one of one hundred, ten hundred, four hundred and forty pixels. That means that from my documentation, I need to take those numbers here because this is larger than one hundred, ten hundred, two hundred pixels. On the right-hand Properties panel, I can just click on Layout Grid to add a grid. Now we don't want a grid like this. We want a layout grid with columns. So click on this icon here next to your grade. And then from the drop-down, choose columns. From my documentation, I can see that I am working with 12 columns, so I will change them to 12. Now here comes the important part. If you would work with a fluid container, then you can set the gases ties, which are given here at 30. You also need to add a margin of 15 on each side. This is because, as you can also see here in the documentation, if you add a GSA of 30, then it is made up of two 15 pixels on each side of the column. So what ever you got the size, you need to add half of it on each end. If you'd want some more margin to work with, that is no problem. Let's say you want an additional 50, then you would just have to add 65 here. Now because your grade is set to stretch. If you resize it, everything would stay in place. Now let's say that I don't want a responsive grid. I want a adaptive gradient with a fixed container. So I'm just going to get rid of this one here. And I'm just going to add a new one. I do the same again. I go on Columns, 12 columns. I can add my data. But this time I am working with something called center. So what I will do to make my life a little more easily is it going to actually set it to the container size? So I set it to 1, 1, 4, 0, which is the container size m giving at Excel. And then I just need to calculate the size of my column at this width. So basically, I know that I am having a fixed cost of 30, 12 times, 11 times between my columns and then 15 on each side on the end. So this is together 360. So I then take my container size of one hundred, one hundred and forty minus 360, which gives me 780 pixels. This is all the available space for the columns. And as I have 12 columns, I divide 780 by 12 and get a column size of 65. Now this will be really the smallest size. So if I start resizing this, you can see that at any larger size, it sits nicely in the middle. With an adaptive approach, I would have to do this with each of my given breakpoints and containers. By the way, you can save all of those grids you setting up as styles and reuse them. Simply click on the four dots here and save it. 12. FIGMA: Responsive Grid Design Setup: Now to set up and test my design in Figma for responsiveness, I have this little setup that I would like to share with you. So I'm using my Bootstrap grid as an example again, and this is the information that I was given in a documentation that I copied in here, so I just have it at hand. Now what I do is that for each of the breakpoints, I am setting up those ranges here. So you can see that I start at 320, that's not in here. I put this because I know this is basically the smallest phone around. And then I'm having the breakpoint, the first one given here, the extra small everything up to 576. And then I'm having the next range starting at 5576 up to 768 and so on. For each of the breakpoint ranges, I then set up an artboard. Let's have a look at one of the artboards. So here you can see that this one is set up with the grid and I'm using a responsive grid here so I can move it within this range. I saved as great as his dial. So you can see it here. It's called responsive as to Excel does is because mobile is the only one that has a different grid. So all of those have the same grid applied. That to setup an adaptive grid that will work a little differently. On first sight, the adaptive layout will look pretty much the same. But if you resize the airport, you notice that it behaves very differently. Because what happens is that the container sits in the middle. So the grid really is a different one for each of those. This is why in our library, we have to set it up as a single grade for each of our ranges. In this example, I also added the container just to make you aware how it sits with a design, you don't really need this actually. By the way, usually you would really choose one or the other for your design. You might have some fluid elements here or there. But generally speaking, you would choose either an adaptive responsive approach. To set up the grid for the adaptive approach is a little more complicated. However, later on you'll notice it's much easier to work with it. The fluid approach, order responsive approach, as we call it, is quite easy to set up because you're using one grid. However, later, when we add elements, as you will see, it gets a little more complicated. None of this, however, should be your final decision. The decision is which one is right for your product. 13. FIGMA: Adding Content to Adaptive Grids: Now that we have our setup, let's add some content. By the way, I'm always showing you adaptive and responsive here, you would obviously choose whether you want your page to be one or the other. So either adaptive or responsive, I'm just giving you the biggest picture possible so you can choose what you need for your own project. So I'm going to start here with the adaptive grid. I'm going to start just randomly with this one here in the middle. You would usually obviously start at mobile first. I'm not doing this out of the simple reason that the mobile setup is the same for responsive and adaptive. So we're gonna get to that later. So I'm just going to add a semi random images in a bit of dummy text. And important thing is to make sure that your images are really said edge to edge. And if they wouldn't, then just make sure that you adjust accordingly new CDL to snap to it. Here I have my text and then I can choose how in that sit on my grid. I'm just randomly choosing sizes here. Let's say it goes to go through there. And that's fine. Now, if we have those images here and we will just resize our window, and not much would happen. But if we pick all of our content and then you need to go to constraints in a little drop-down choose center when you're working with adaptive grids. And now if you resizing, everything sits nicely in your grid. Now you're resizing, remember, between those two breakpoints that you set. The next science, we would have to take our design. Let me just check what distance I have here. So just make 60 amps going, make simple distances and numbers. Just to show you, in reality, I obviously haven't, let's say an 8 spacing system and adjust everything perfectly. So if I copy it on here now, I would need to adjust the sizes. Now, this one I can just drag to the side I want. And in nicely adjust everything else. Make sure you have this one here. This is the auto height set with texts. And however the images I would need to do is I would by hand fix them like this. Snap to the grid going up here and then I will take the same distance that I have, so 60. So this is a bit of the tedious part, did have to adjust all of this. So here the same, once I've done this, I can just see different behavior in my different breakpoints. So as you can see, this is pretty straightforward. And now I can see that my images look grade sitting in exactly the same amount of columns. Here. I noticed that this one actually, this one I put in nine and this one I put in eight. So not really sure if that is such an important element. So I might either just adjust this one to be larger or actually, I might just adjust this one to sit in eight columns as well. I'll do that with the headline as well. And then we actually don't even need an own breakpoint. Everything would sit nicely without any changes. They wanted a change here, then obviously that wouldn't be a problem either. Let's say I wanted this one to sit like this for whatever reason on a larger screen and that's no problem. I will just fix this one to five columns and this one to eight columns on the size L. And ever breakpoint here that activates it. And remember to get a better idea of your design, you can toggle the grid to just select a frame here, then go over to the right-hand side grid. You need to hover to see the little icon and you can switch it on and off. 14. FIGMA: Adding Content to Responsive Grids: Now let's go down to our responsive design. And I pick the same size than we did in the beginning with the other one. I copy my images in here. And now, if I have the setup that I had before and resize, the problem is that that's not working anymore because this grade behaves differently. Now for fluid grids, you have to pick all of your elements again and set them to left and right. And with that left and right, that actually sticks to a grid you setup. So once I've done that and I resize the grid, you can see that it behaves nicely with whatever size the greatest taking. Now you might have noticed that this works quite well if we're testing, for example, our copy our text. But in the images, it's sort of does this weird thing where it cuts them off. Now, if you want to keep your aspect ratio of your images, bad news. Figma does not automatically do it. Now there's three ways you can deal with this. First one, you say, I don't really care. This is the design that I'm setting up and I'm having all of these different breakpoints. And then here I can just make sure my texts sits nicely if I want to. And I don't care about this little thing because I know even if my images look a little different here, that in reality they will keep the aspect ratio. And to be honest, that is just a fine approach. You just need to make sure that you pick like 1 where you design the actual thing. So I, for example, or with login to my exact breakpoint. Now for whatever reason you say, but I need to see it at another size in that range. We'll you to do the second solution will be press Command and then pull out your frame. And then you just need to adjust by hand your images again to your grid. And then you would obviously make sure you have to distance right here again. And then this one you will just pull out. Don't I just did this one by pulling out like this because then you will distort the box. Always just pull it out like this and adjusted to the new size. I think that's what the columns that were sitting it, if I remember correctly. Now, obviously he would have the same issue if you go back. It doesn't keep the aspect ratio of your images. So you'd have to do the same thing backwards again. Now, I talked about a third version as well. However, third version is auto layout and networks really well on mobile. And I'm going to show you in a minute. However, if you've got all excited, I have to say I don't recommend you use it on larger screens. Because frankly, you're just going to go crazy. I'm going to show you why. Now if you're not familiar with auto layout, that will be a whole separate course. It's quite an advanced technique in Figma to set up things in such a way that it automatically keep their distances and layout. Really, really great tool takes quite a bit of practice. So if you knew to auto layout and want to use it, I recommend you first familiarize and dive into learning a little more about auto-layout. I'm going to quickly show you why that not really going to work on a larger screen. So what Auto Layout does I pick, let's say those two images. And now I set them here to auto layout. And it's great, automatically keeps my distance. Now if I would add 50 year, I could change the gutter. I could also do an outer spacing. So that's why it's so amazing with fluid grids. Now let's say I put 15 here and 15 here. And then it says automatically on the whole width. Now if I set the container to have to do this first fixed, then left, right? Don't ask me why. I personally think it's a bug. Then I pick this and an apple it, you'll see nothing happens. Because I also need to set stuffed images inside to first fill the container and then it's going to work. But as you already saw, so now works. However, as you saw, it starts distributing them evenly. And next the problem, auto layout can only distribute evenly. So it can't like, give it like certain colony can't fix it to certain columns anymore because it doesn't recognize the grid anymore, even though you sort of rebuilding the grid with auto layout. So unless you have something really, really equally distributed on larger screens, then don't really try around with auto-layout. You're just going to go crazy. How ever for your mobile version of your design is going to work just wonderful. So let's get here because death is also where you really want to test a small ranges. Now however, I'm still going to have my problem with the aspect ratio. And here I'm going to show you a little hack. Go to the community section and type in aspect ratio. And you will find this page here. Present duplicate. And then within here. You can see that someone was so nice to set up a way that it keeps the aspect ratio. Now this is a really complicated, so I would say, don't worry about it. Just pick the side as you want. So I think I need a square and I'm going to work with the square and I'm going to work with one of these sizes, so I'm going to copy them over. Now. Added them here to my frame and I added an image. And how you do that is you go to fill and then just choose your image. And by the way, this is 16 to nine and this is a square. So I have my images saved like this before Hansel, it fit perfectly, but you can also just try around with the images. Now as you can see. This now, keep the aspect ratio without me pressing anything else. Also don't try to hold Shift or anything because then you will just break it, just pull it out. Or if you have it in the container, left and right. Nice. Now we can just add our auto layout so we're going to want to adjust this perfectly. Make sure this one is at 60 again. And now I'm going to select those two auto layout. I can adjust the distance to 32 lightheaded before going to make those to an auto layout, own auto-layout as well. I think here my distance was to 16 or something like that. Have to double-check that. And now I'm grouping those and then I have like a bigger container holding my auto layout. So I'm just going to name that, hey, I'm going to name that container. And I'm gonna name that text. And I'm not going to name that images. So it's a little clearer to us. Now to make this behave when resizing, what we need to do is we need to go down, down, down into the into the items themselves and make sure they're all set to fill container. So everything needs to say be said to fill container. Then we have those ones as well are also they're all set to full container. And of course, our container itself is set to left, right? So now, as I resize, look at this, isn't that amazing? You can obviously make this a little larger so you can see the full behavior. And you have an amazing responsive mobile version. Now this behavior in our example, while I'm using Bootstrap grid, is actually the same if I'm using responsive or adaptive mobile phones, because there it's always add it as one column and little margin on the side with liquid behavior. One little trick, if you're working with full-width background yet say you want a background color here. And then that's not going to be across the whole screen. So what you would do is you set everything to full-screen. And then within your little sub containers, you just said demand in that you have and because it's a liquid grid, that is totally fine. So you said it like this. And you say that again for your texts as well. And in this way, it's total grid. You can see that it sits nicely. Well, obviously we need some lighter color here to see it. And you can see that it sits nicely in here. And then like this, you can also add all the other inner padding. So I could ICC, add some padding for the top and for the bottom. And that would always stay the same. So this is really amazing to test your mobile screens. 15. Do I Really Need One Design per Breakpoint? That Is Crazy! : Now you're probably going to think, hang on. If I want to design one homepage to have to do all of those sub-pages and testings on everything. Don't worry. You don't. First of all, you would either have your page setup, adaptive or responsive. Most of the time might be elements of one or the other. But in general you set it up one or the other way. Now let's take an example and say you set up your page adaptive. So let's take this one here. As you can see, there's little stars on my breakpoints. And what these little stars indicate is that this is actually my master page to page I am designing on. So every team, every designer might set this up differently. But the way that I like doing it is that I have different pages for everything. I have this one here called Responsive Testing, and then I have my page called design. And the two breakpoints that you saw with the little stars is the pages that I chose to work on my design. So once I start working on my designed, first thing I do is I set up those pages. Here are only ever one pager. Like if I had more, I would do this for each Etsy. I have a sub page with the project file in it. Then I would have another page, like right here, next to it. And then on here, I would set up my design, try out, see what I like. So you might be wondering why exactly those two-side this, while mobile is mobile first, you always need to have a mobile size. But then here I could have a tablet or a medium screen or large screen. And what I did is I choose this one and I chose it because I looked at some data and the latest data tells me that this screen size from a breakpoint of one hundred ten hundred, two hundred, ten hundred four hundred right now is the most popular screen size that people use. So you can just go online and Google dad, there's a lot of pages that gives you statistics. There might be reasons why you should use a tablet size or different size for your design. If you already have data from the side and you think that is valid data and know that everyone looks at your side from a tablet. Then by all means, use your tablet as your master page and design for that and later adapt to the other sizes. To goal is that the website looks good and everything, but we also have limited time and resources. So I want to make the two most important screens really shine, discuss those, miss my client, and then all the rest adapts nicely. Now here I have a one-pager. So I would then, once I know that is a design alike, I would then go into my responsive testing and really just try it out here. However, I am working with components. So this is a reusable component, this card, for example, and reusing. And on the sub page, I might be reusing this again, so I don't need to test this all the time. So sometimes I might just be testing like little parts of the website and see whether that looks nice. Because once I know that this is my design and how I want it to behave responsively. I will add all the information in my components and styles. Now I just made a little example here you have a component like literally for everything. So my whole page like this would be a component, that card is a component, then this here would be a component to everything you build will be a component. Now, amid a little example here for you. And what you basically do is that you have here you component. So I have my example. And I can see here this is my hero text. And then I give all the information like older spacing. And especially with the topography it says see in your typography style sheet. So I would move up to my typography style sheet. And in here I can see this is older size. Instead I'm using four different fonts, like different age one to age two. What font I am using, what size I'm using, all the information. And then we can see here, if I have a breakpoint from break point onwards, each one changes from this size to that size n. From size L onwards, it changes again, and age two was changing as well, and so on. And you can fully adapt that to your needs. As usual. Try to keep it to a minimum. By the way, there's different ways that you can work with responsive typography. I have a whole separate course on that if you're interested. Now, I still need to show how this component sits within my grid. So here I say from a size access on worth for my mobile it sits like this. And then from size L onwards, it sits like this. And then for larger ones from m onwards, let me actually check if it's from m onwards. It's, it's like this. No, actually from L onwards, let's change this. So from our onwards, it would sit like this. So in this way, basically, you would only need to have to look InDesign and invite away. Here we have an inspect that programming team can then use. Day go on here. There's a, for example, let's say here you see the background color and they see all the information. And then in combination with this, they know exactly how it's going to behave. So most of the time, unless there's something really tricky, I don't even need to show this to anyone. And then you would just do that for all of your components. Like here I have my card and again, I give all the information and I show how it would sit in my responsive grid. Also, the more experience you have and the more pages your design, the more you'll be. Know what things you will need to test and what things are pretty clear. 16. Understanding CSS Grids: Besides standard column grid systems, I want to make you aware of one of my favorite grids, which is the CSS grid. With the CSS grid, you can pretty much create any kind of grid with a few lines of code. You do not need to add a plugin nor any additional heavy files, and you're not stuck with a specific amount of columns anymore. Now you do need to go completely crazy with the CSS grid. You can also use it to just set up any standard column grid. So you could use all the preset numbers from any other grid system. And your development team might just decide to write everything in CSS grid instead, absolutely no problem. You can use fixed containers or fluid containers. You could have breakpoints or gotta join columns, anything you want. Basically, most of the time, I just use it like this. Especially if I want a very simple design and might have just reduced columns. I also don't need to have this fixed for everything. So if I decide in the middle of a project that I would need a row with a different layout. I could just do that with CSS grid. I could even have single elements with individual grids. So I could, for example, change the GSA for specific elements. You can also nest grids in other grid system, such as Bootstrap, but it's usually quite tedious. So in short, you can pretty much set up any layout with CSS grids. Another great thing is that you can set some columns to fixed and others to fluid within the same grade. You could, for example, have one fixed row and then divide up the remaining space however you wish. They would basically use up a percentage of the remaining space. And you can also reshuffle and change the behavior of grids completely between breakpoints. Another handy thing is that you can change the entire positioning. So something that was at the very bottom at one breakpoint might be displayed higher up in another one. Now, as you can see, CSS grid is full of endless possibilities. However, it is not a free pass to just design anything and throw it at your development team. Bear in mind that the more crazy you go with the grid, the more difficult it will be to set it up and maintain it. So as always, try to keep things as simple as possible. Keep the usability in mind, but feel free to play with the possibilities this grid gives you. 17. FIGMA: CSS Grid Setup: So using CSS grid as a classic column grid will be absolutely no problem. You would use your column settings in Figma and just set it up like any other grid. If you want to use a more fancy features like mixing fixed and fluid, that is a little more complicated. I'm going to show you a way how you could check the different behavior of degreed in Figma. However, I highly, highly recommend that if you want to do this sort of design, then familiarize with how the CSS grid works. Setup a very simple version with CSS and HTML and just tested a little bit. You don't need to code the whole page, but you can test the elements. You know, if you design a component that it will work in your CSS grid the way you intended it to do. Now one way you could check your responsive behavior with a little more advanced CSS grid is like we did with the responsive and adaptive grid. Dead. You just set up the ranges and then you just adjust the layout for all of them. Now, another one that seems very tempting, but it's actually a little tricky, is to use different auto layout and combine that with some constraints. So I, for example, would have my design here. And then it would behave nicely up to that break point. And from this break point onwards, I decided that I have a new design. If I now wanted to say add breakpoint x L. So anything above 1200 pixels, I could just open a new one here and then set up a new design for every breakpoint. Now, if you purchase this course on my page or any page that I am collaborating with, then you will get the course file. And I highly recommend that you open this file in Figma to really understand how this works. So basically what I did here, Let's start with the mobile version. I have. In a mobile version, I just have a normal menu. And within that menu, I'm having my logo. And here I'm using constraints and I'm setting the constraints to the left. So this sticks to the left. My burger menu. I'm sticking it to the right. And then my menu bar, this, this whole surface here. I am set to left, right. So this will always like stick to the sides and resize with the frame. But to hide, I kept the same here. Now, if you're wondering how I managed as miracle of keeping the aspect ratio of my image. Then let's go to community section. I used something called aspect ratio. And it's here. You can duplicate this and then it's all explained in here. So this is nothing that I invented or I set up. So full credit goes to aspect ratio on the Figma community. What I did is I integrated this here for you. So if you use my working file, all set up for you already. So that's basically am here you can see I added an auto layout. And then this is also said to behave to fit left to right. And then here we have inside the auto layout, we have all the copier that fills the container. And then we have here our image with the aspect ratio. So if you click it open, you see it's all like put. Like it's all locked because I am using the preset of the aspect ratio. And this is also said to feel container. Now if I am going here where I want this to change to a sidebar, what I did was that I'm having to also layout containers flex. And this one is a sidebar fixed. So it is fixed sidebar here. I have it fixed by just, I just locked it to the left. So it will always have the same width and it will always stay stuck here on the left. And inside, I have my logo and I have my menu topics. And it just sitting in here. And then the menu bar is also said to full container. And you can also use these ones here so we can add some padding. And here, for example, I can position it inside. Now if I'm looking at the flex part here, I'm having coffee text down here. And that fills the container. And then I am having another one. And that also fills a container. So this is my image inside my image that I have to hold locked aspect ratio thing again, which I copied out of the file from the community section. This one here, I simply made the copy as a auto-layout as well. So I can, for example, like change. Let's make those 26 or something. So I can like Teams little, There's will always stay the same. A little padding between elements. That is, is it seems really wonderful. And if you have something like this, you can definitely tested as soon as you have more content in here, I have to say it gets quite complicated. For example, if you want to rebuild something like that would have more fraction units sitting here and keep an aspect ratio, trust me, that will drive your absolutely insane because Figma doesn't really do that. It will, it will set it up to two equal parts if you wanted to fill the container. So there is limitations, there is possibilities. Try to play with it. Auto layout is amazing, but it takes a lot of practice. Don't be scared anyways, to use CSS grid. What you can always do is just break this apart and just test on different screen sizes if you're unsure about it. The other thing is, I really encourage you dive into the code, gets a little bit of understanding about CSS grid. It's really, really easy. And then you can just design one nice page and try it out in your own code. 18. --> PROJECT: Responsive Portfolio in Figma: Now it's your turn as our final project, we want to build our own responsive portfolio page in Figma. Now there are two files. There is this file which is a template file, and I'll tell you a little bit about it and there is a solution file. Now these solutions are my solutions, how I would personally set it up. You might come to a very different way of building a page, and that is fine too, as long as it works. Also, there is an image file and I added some images for you that you can use as a placeholder to set up your project. Now, on your design page here, you find the exercise and this is what you're supposed to build. You're supposed to build as mobile version and this desktop version. And I gave you a little something to start with, or the grids, everything already set up for you. Remember, you can toggle the grid, either deselect a frame and then press here on the little eye icon or press Control. And g. Now you can either build exactly that example that I'm giving you. All. I encourage you to go ahead and make it your own, build your own portfolio, or build a completely different page. Really be creative. Try out what we just learned. In our responsive testing page here, you find the adaptive to responsive and some CSS grid layout if you want to. And you can just test it in here. And you can either choose one that you would like to test or practice and is tested on everything. In real life, you pick probably either adaptive or responsive. Once you've set up your design and done your testing, then you would transfer UK opponents into here and document them. And I've already set up one for you. So you have a little bit of a guideline. If you watched my last video carefully, you might have already gotten a bit of a sneak peak as well. The components, I also set up a responsive type scale for you. You do not have to use it, but you could try around a little bit, it's a little more advanced. So how you would use this is you start here with your mobile first. You can either use the topography that I set up for you or set up your own. And then once you need to change the size, or for example, a headline, it will be noted down here. So you would go to, let's say, break point M. And then use this specific size for your headline here. So jump in, try it out, and most of all have fun with it. 19. BOOTSTRAP: Grids in HTML & CSS: Introduction: It's great to understand the theoretical setup of a grid InDesign, but as a UX UI designer, there is nothing better than understanding how it really gets built. I will show you how your grid really works behind the scenes. And I will show you some HTML and CSS. Don't freak out and don't switch off. This is really quite simple. You do not need to write code yourself. Actually, HTML and CSS is only called markup by the way. But you should understand the simple structure. And I promise it will be a huge benefit to your design. Because only if you understand how things get built, you will be able to design at your full potential and push the limits. So your website is a combination of different files. What you see in the browser is HTML and CSS. The HTML file holds all the information. So your text, your image is like the raw data, one below the other. The CSS file hold all the styling and positioning. So any thing that you beautify about your page, how big is the picture, what color is the font? What distance or thing to one another? And of course, where are things placed? So our grid is described in such a file, usually its own file. This is a bit of a simplified version, by the way, in real life, in development, they will probably use languages like PHP or React JS or something similar. However, all of those languages will always be translated by the browser into HTML. And this is why it's so important to understand the HTML setup because it's the root of everything. Also, if you understand how to set up your grid and HTML and you later look at, let's say a React js file. You will understand what's happening and wider set up a certain way. You might also have several CSS files and not only one, there might be one for your grittiest them and another one way you put your own styling. In larger projects. They are even split into many, many small ones, like one CSS file for each component. But we will keep it simple for this example, however many you have, the information you need will be pulled in by the HTML file. So let's have a look at the structure of a typical HTML file. 20. --> COURSE MATERIAL: Bootstrap Grid: If you want to work alongside me when I'm showing you some code examples, I've added some files for you. So to access those files, you need two things. One is a browser and I recommend that you use Google Chrome or in safari. Sometimes you can have problems with local files like this. The other thing you need is a code editor. You can either have this one that I downloaded for free, which is called Visual Studio Code, or another free one is called Sublime. Simply go to the website and download them, access a file. Click on a file and find the index.html file. Right-click and open with Google Chrome, or simply drag it onto the Google Chrome icon to open. You can then resize the browser window and see the behavior. To edit the code. Take the whole file and drag and drop it onto your code editor. And this 504 example here we have the index HTML. So here you can see, for example, this is them, the grid I set up for you. This is this up here. And then here you will see a row with different distribution. And we're gonna go through all of these examples in the class. The files I'm pulling in up here in the head is a my style CSS. And he can really go wild and try out things. And an external file to bootstrap grid file. This one don't touch because I downloaded this from Bootstrap and just connected with here. So this is order grid setup for you already. 21. BOOTSTRAP: HTML Setup: All HTML documents must start with a document type declaration, which you see here. The browser then knows that this is an HTML5 document that it can read. The HTML document itself opens with an HTML tag and finishes with a closing tag. The closing, you always see where the slash in front of it. So inside the HTML, we have our head tag and a head holds all the information like links to typography, all the information about the website, what is it called, what it is about who made it, and things like what language is it in. And also links to our CSS files. So this is all the information that you can think of surrounding the website, but not really visible to the user. The body. This is a body tag here, opening and closing. And within all of this is divisible content of the website. So everything you want to be shown is going to be in here, your images, your text, all your content. By the way, don't confuse the head tag with a so-called header to head is what is a round like in the background information of your website to header is inside, so it's going to live inside the body here. And it's going to be probably the first part, holding your menu and holding your logo. This is two different things, but don't confuse them. So in this head part, besides like other staff, as I mentioned, you would link to your CSS files. So in my example here, I am linking to two files. I'm linking to my bootstrap.css. And you can see here it is this mom telling the browser that this is a style sheet. And I'm linking to one that I called my styles.css. You can call that anything. Just make sure that the actual file, CSS file has the same name as the one you're calling here, and then it can find it. And again, I simplify this for you. In larger projects, your H ref will probably be much longer because you will have everything installed in subfiles. Also, you might see something like dot main.css. That means that it is files they get compressed because then they can load much faster. However, it all works out of the same principle. Namely that you are making information from a CSS file available in your HTML file. So basically by just adding this link to the ready-made Twitter Bootstrap grid. The grid information is available to me now. It's not yet visible, but it's there in the background. And I can just activated anytime I want to. Most of the time, to be honest, I don't even touch that bootstrap file. I just leave it there and use it how it is. You might want to adjust the gutter or some margin a little bit. But that's the only thing I really do. Otherwise, I leave it alone. Someone's set it up perfectly for me already. 22. BOOTSTRAP: Adding Fixed and Fluid Containers: So while our bootstrap grid is pulled in, in the head section of our HTML file. All the content and older setup happens in the so-called body section. So let's forget about all the architecture around it for a minute and let's concentrate on what happens inside those body tags. The first thing I would do is to add a div with a class called container. If you're totally new to this, diff is like a little box that holds my content. And if I tell the div or any other tag that it has a class, the net refers to the CSS so it can pull all the information I give it about the container from the CSS. In this case, it is already set up for me in Bootstrap. It will automatically assign a container of a certain width depending on my browser window. If you're wondering what happened to the columns, they already there in the background. We just didn't assign them to anything yet. It's the same with the container. I just colored it red for us to understand. In reality, you wouldn't see anything yet because there's no content. But let's first understand a little bit more about those different container size as I mentioned. So if you go to the Bootstrap documentation, they will tell you exactly what container size you will get and what width. So as an example, anything with a width equal or larger to 992 would have a container of 960. However, if we have very large screen sizes, for example, anything larger than one hundred and two hundred. Usually our desktops, then our container size will be 1, 0, 0, 0, 0, 140. You can also look into your grid CSS file and you'll find the same information. So did is an original cut-out of the Bootstrap grid file. And for example, you can see that from one hundred two hundred onwards to contain it is one hundred, ten hundred, one hundred and forty, just as we just saw in a documentation, is add media signs. By the way, that's the media queries. So that means at media, and then you get the width, like for example, the minimum width of one's album to a 100 means if you have at least one hundred, ten hundred, two hundred dense dial, everything as I tell you between those brackets. Otherwise, just use all the other styles that I gave you beforehand. So you basically overwriting styles. Now you could change those container sizes and you could change it as media queries. But unless you have a good reason, I would recommend that you just trust the people that set up those things for you with a lot of detail. Or you could adjust or ask your dev team to adjust is the gutter, that is usually 30 pixels in Bootstrap. So that means 15 pixels on each side of the column. And you could adapt it to anything you want. Bootstrap also comes with a really nice shortcuts. So you could just add a 0, got it to a certain row or the whole document. You can check that out in a documentations is really, really nice and actually quite easy. Now setting up a container like this is called an adaptive container as it adapts to different screen sizes. If you change this class from container to contain a fluid, then you will get a fluid container. And what it does is it stretches over the whole width of your browser window. The class name might be different for different grid systems, but in the CSS, it will always do the same. It will tell the container to stretch 100% of the available width. If you want to use a fluid grid, you can still add some margin to the fluid grid itself. Today doesn't stick to the edges just like this. This could be a fixed margin or this could be a percentage of the width. The margin will always stay fluid. Now this can be really nice to design with, but it also comes with quite a few hurdles. So just be aware that even though it's super easy to change it in CSS, your setup inside the grid will be much more complicated on a fluid grid. 23. BOOTSTRAP: Adding Rows and Content: To set up our layout, we'll want to add a row to our container. So inside our container div, we add another div with a class called a row per default. That row spans across the whole container. And now comes the fun part. If you place items within this container, you can tell them how to sit in this row using your columns. So here I added an image and told it image occupy four columns. I did this by assigning the class call minus 4. And again, this is very specific to bootstrap. Now, in another grid system, this might be called a little different, but it all works after the same principle. Now we can add some more items. Now they all sit in the same row, but to all occupy their own columns, each of them for, so together they equal 12. They could be less than 12, and I could have an empty column, but it can never be more than 12 in a row. They don't have to be equal. So I can give them, for example, a class of column 6 occupying six columns, and the other occupying three columns, eat, so they will distribute accordingly. I can also add more rows with their own content and distribution. For example, I added some text above this using eight columns. The background I gave here, by the way, is just for me to explain and show you where the rows are sitting. You could add a background color in your custom CSS, but per default, it will look something like this. By the way, you might have seen that a lot of websites are set up within a grid for their content, but they still use full background color. And this is possible. One way of doing it would be like this. You could divide up the design and then have each of the chunks sit in his own container. That's no problem because the container always pause the same information from the CSS. So it doesn't matter if I have five containers or one containers. Only thing is just be aware that you only use this method if you really want to set up a background color. So around one of my containers, I would then just add another class called full background. The name of full background, by the way, It's just something random I chose but could be called anything. Now in my custom CSS file, I can then just give it to properties like the background color I want, and I would give it a width of 100%. I'll probably have some more attributes like a little bit of padding and some styling here as well. 24. BOOTSTRAP: Responsive Design in HTML & CSS: Now besides being the skeleton for our design and positioning to grid has another major job. And that is to make our design responsive. And with a ready-made grids like Bootstrap, this is so incredibly easy that it almost hurts. I can not only assign the columns, but I can assign columns in such a way that I tell my design on what screen size I want a specific element to occupy, how many columns exactly. To do this, I am using the so-called responsive classes. So in my example here, I am saying column md. I'll explain this in a minute. Use 12. So I'm saying at a smaller screen size, use 12 columns, so filled of full row and on a larger screen size. So that will be the class of column LG ISA for. So just use four on a larger screen. Here I am in my Bootstrap grid documentation. And here I can find all the corresponding responsive classes that I can use. Again, remember, if you're using a different grid system, this might be noted down slightly different. Look for something called class prefix responsive classes. Now here I can see my example that if I'm using the coal miners which are used before, and then just add an amount of columns here. Then this is the layout for anything starting from mobile all the way up. If I, however, at some breakpoint 1 to change this, I can just use one of these provided classes to change it. So as we did call minus MD and then I add a new distribution. So that means at this breakpoint here, this will kick in and then work for anything larger unless I add another class. So for my larger sizes, everything looks just like before. But if I re-size below that break point, I set my new classes kick in. And I have exactly the same content, but a very different distribution. And this is the real advantage when your UX UI designer and understand how stuff like this really works. Because now you can familiarize with this and see that distribution is actually quite easy. But I only add and remove classes. I do not change the actual content because that will make it very complicated in my HTML. You can now also understand much better that we do know create whole new designs per break-point, but much rather can change the distribution. And you can communicate with your programming team how you want this to be set up. You can play with those classes and you can show or hide content. You can change size, distribution, and color. Even though it is simple, it's still needs to be maintained. So the golden rule is use as much change as necessary, but as little as possible. Don't just dial randomly because you can always style because text will not be readable. Images will be too large or too small, cetera. As little as possible is key. Also remember, programmers will probably start from mobile and then scale up. So try to do the same in your thinking. So make sure to always cover the smallest size and then work your way up. 25. CSS GRID: Introduction to CSS Grids: Css Grid is a fantastic way of creating a grade in a really simple manner with no extra files needed. I love this grid and try to get everyone to use it whenever I can. Because it is so free and flexible, it's actually a little harder to set up on your design file. I would recommend you to start writing and playing with the CSS yourself or find a nice developer that you can sit together and work with. Did is always a good idea anyways. So let's have a closer look at the CSS grid and how it works under the hood. So as with any traditional grid system, we would have an HTML holding our content, CSS file, holding our positioning and styling. The HTML file will pull in the styling information from the CSS file. This will be done by referencing the CSS file in the head of the HTML file. In this case, it's just a blank CSS file for now because I'm writing my own grid here. You can name it anything. I named it migrated dot css. You might actually come across that there is more than one CSS file. So one might also just hold the CSS grid in the other, the styling. But for small page, it could also be all in one. 26. --> COURSE MATERIAL: CSS Grid: So if you want to, you can work alongside me here. And in your course material there is a CSS grid folder. To open it as usual, take to in next file and open it with your browser. I as usual recommend Chrome because with Safari, I had some issues. When you resize the window. You can see the different behavior. Now to open the code, take the whole file and drag and drop it on your code editor. So what I did in this file here for you is you find an index file and this is pretty straightforward. It just holds the five items we're going to have a look at. And then what it does. However, in the migrate file, you see that I set up different versions and they're grayed out. The warning color is the currently active when you're seeing. So what you should do is if you want to see another version, uncomment this one, and then just find the version that you would like to use. So let's say we want to have this period advanced one here, our responsive behavior. So here we have simple responsive behavior. Try there are some headlines, don't uncomment the headlines. Then you just get rid of the data and the star. You save it. And an important for it to work, you need to go back into your browser, refresh your browser, and you will see the version. So this one here, Let's see what this one is. So this one here, some responsive behavior. So we will start with version one probably. So you uncomment, go to the very beginning and end. You can see here we're starting with them fixed column sizes. Off we go. 27. CSS GRID: Grid Setup: So in my HTML, I'm just going to set up five deaths. By the way, to add those colors and spacing, you'd usually add another class to each of those diffs and then add some styling as we're only concerned with the great right now, I left all of that out to keep it simple. Also, if the texts that I'm showing here would be important for display on a real website. I would wrap that into a tag, a p tag, which is used for text. So just be aware that this is a very simplified version. So let's jump into our CSS file. In here, we turned the container class. Whenever you see a dog, that's a class into a grid by simply adding display column, grid. With grid template columns, we activate the desired columns, in this case five columns with 250 pixels, each. With grid template rows. We can set the height of a row if needed. In this case, I just said a 150 pixels to simulate we see something. If you don't set anything, that is fine, l will just adapt to your content. And that's it. You just created your first CSS grid in our course material. That will be version one. Just make sure it's active and no other versions are active. Everything else needs to be grayed out. And then in the browser, if you don't see it, also make sure to refresh. You can see a fixed grade. Okay, so here is my grid. Now want to add some gutter. So I go back into my CSS file and I'm going to add great minus gap colon and then GST amount of gutted other one, I just put 34. Now, you do need to put this all in pixels. By the way, you can just use any other unit as well. And done. And remember this will result in 30 gutter and 15 outer margin. 28. CSS GRID: Fluid Design with Fraction Units: So up to here, we worked with fixed sizes. Let's change that. So we jump back into our CSS file. And this time I'm setting the grid template columns not to fix pixels, but to FOR that fraction units. So I'm using one FR, FR and to FOR. As the name already says, the fractional units basically divide up the available space, two fractions. Now this can be any number. You're not stuck with anything like 12 columns anymore. So our result would look like this. Now because we added three fractional units, we created three columns with a corresponding size. Let's jump back a second into our CSS to see how that works. As we're working with fractions, we're basically need to add up whatever numbers we give here. So it will be 1 plus 3 plus 2. So in our case, sticks. So this divides up the space in 16, 36, and 26. That would obviously be the same as 16, a 3.5th. As recreated three fractional units that automatically create three columns. If we would add one more, for example, we would have four columns. Our items automatically put themselves in the available columns. So if we add one more column, item 4 would move up into the first row. As you can see, this gives you a lot of flexibility also because you can mix fixed sizes and fraction units. The grid template rows that I have below here define the height of the row. So the first row I set to 100 and the second one to 200. You don't really need to do this. If you don't set a row height, then it will just adjust to the size of the content, which in most cases is fine. Let me show you what this example would look like in the browser for real. So here we're back in our example file. And before I do anything, I need to uncomment the currently active version. Then here I have one called automatic distribution. I activate that save, go to my browser, refresh. And now if I move the browser, I can see that they are distributing beautifully to all the available space. Now the great thing is, and I could just mix fixed and fluid. So if I change my CSS and just put a fixed number like let's say 150. And then the rest in FAR, I get something like this. So down here I have version for mixing fixed and fluid activated save, refresh, got some data in this example of law. And you can see that this one is staying fixed. What arrest keeps on moving and adjusting to the size. 29. CSS GRID: Advanced Distribution Gird Rows and Columns: I want to show you a more advanced technique because with CSS grid, we have a really fancy way of distributing items with the so-called grid columns. So I have my grid here with my five items as they would fall naturally. Let's look at the CSS again. And we have one FR, FR, and two of our. I also gave my row some height. This is by the way, a short form of noting this down. And again, I just did there so you can see it better. You don't need it if you added content, they will just adjust to the content size. Now we will add grid columns and we fall, we add them. We must understand what grid lines are. So every time a column starts and ends, there will be a grid line. Basically. Note that the first line starts at the very beginning of the first item. That gets overlooked quite a bit that this is not 0, but one. In my HTML. I also added some class here so that I can call the items individually. I just called them Item 1, 2, 3, and so on. You can call them anything. It doesn't matter as long as you use the same class in your CSS again. So now in my CSS, I call class item one, and I tell it span from line one to line 4. So across the whole width. An item 5, I am telling, span from line three, line four. So that would be from here to here. And that will look like this. So you can see that item one uses up the whole of the first row, pushes the other items down, an item 5 I told to sit here, so it leaves the first two columns empty. This is the horizontal distribution, but I can also distributed vertically. Here I would use the grid rows. So if I add grid row to item one from three to four. And item 2, I'm just gonna change grid row from one to two. And I'm getting rid of this item 5 to not confuse you too much. So what I get is this, as I have my grid columns here, I have my grid rows. So item two spans from one to three. And item 1 now sits down here, so it keeps his behavior going across the whole width, but it's sitting at the bottom of my design. Now as always, try to keep this one to a minimum. As you can see, it gets quite confusing quite quickly. So if you needed on a very important element of your page, yes, you can use it. But really, really try it to be very conscious about it. 30. CSS GRID: Responsive Grids: If you want to make your CSS Grid responsive, you would use media queries. Now remember, we usually start mobile first and then work our way up. So let's say we have a simple spec mobile design like this in CSS that would look like this. So we would use just one fraction unit. And then here we have our short form of repeating columns. Again, I just added some height so you can see something if you have content, you don't really need this. So let's say from a 768 onwards, I want to change the layout. I just pick that number because it's a bootstrap breakpoint. I know you can just put anything you want. So I would add a media query like this. So we say at media only screen, don't worry about this. This is just a safety net of all the browsers don't support it. And then we say, if the screen has a minimum width of 768 pixels or whatever number you put here. Then use the following layout, which you will be placing within those brackets. You can use as many or as little breakpoint as you want, but try to keep it simple. I also advise you to choose some breakpoints and then stick to them and not just randomly make them up as you go along. And side note, you notice probably that I'm using pixels here. You also don't need to worry about the resolution. That's going to work fine to only thing is to be concerned with accessibility. So in real life, a programmer would probably transfer this and use EM instead. But for now we're just going to work in pixels to keep things a little more simple, but bear in mind that you might see EM around and it's actually good practice. So let's fill the brackets. I'm going to say change the column from one FOR 2 to FOR. So I should get two columns on a wider screen. So it will change from something like this to something like this. So let's push this a little further. Let's say I wanted to have a site navigation and then for example, some blog post listed on the right-hand side of it. So what I will do is in my grid template columns, I say have one fixed column here and then the rest is one FR, so it distributes equally over the available space. And then I'm saying grid row for my first item. So this will be sitting in here. Just make it span from the very top to the very bottom. So this is the result you will get. You here, have your item one spanning the whole height, and then you have all your other items sitting nicely next to it. Let me show you the real thing in action. So here I activated under responsive design, the simple responsive design. And then as you can see, if I resize this at my breakpoint, it just jumps to the new layout. Now you can do a lot of amazing things with CSS grids and even nest grids within grids and stuff like that. But it can get out of hand quite quickly. And then if you want to scale something, it can become a big mess. So as usual, my mantra is use it, but uses as simplified as possible. A great way to start is to just set up a simple column grid and some media queries. Once that is set up on works nicely, you still have all the possibilities with CSS grid to add some extras. 31. Thank You: Well done for finishing this course. Feel free to reach out to us at moon learning dot io, we're always interested in hearing your feedback. You would also do as a great favor if you could just take a minute and leave a review right here. If you enjoyed this course and also make sure that you have a look at our additional courses. At Moody Learning dot. We cover all subjects from the very foundations of UX UI design through to Figma and even some code basics. Make sure you visit our website at Moody Learning dot IO, where you can also sign up to our newsletter.