Flex Grids with HTML5 & CSS Flexbox

NOVEMBER 28, 2022

Creating grids with native HTML5 and the "display: flex" CSS property.

Chapters

Transcript

Hi everyone. It's Nono here. And this is a quick tutorial, a hands-on coding tutorial on how to create a flex grid with HTML5 to display your content on the web before you had to do many hacks, but the Flexbox CSS component or properties allow you to specify a display flex property on your items and this makes it super easy to display content in nice ways, even making it a responsive.. So let's dive in into the side of coding and see how this is done.

Create a Laravel app

I have a Terminal window here. The first thing is... I'm going to go to my desktop and I do have the Laravel command line interface here installed. I installed it with Composer and you can probably Google or look for previous videos on how to get this going.

The first thing that we're going to do is a simple command that this CLI tool lets you do.

We're going to run laravel new.

And what this does is going to create an application on my computer, on the desktop with the name app. So that's going to be the name of the folder. And if I hit enter, you can see that the CLI tool starts going. It clones the latest version of Laravel and then it runs the command to install with Composer all of the dependencies, all of the bender packages that this application requires to be able to be executed on my machine.

It's finished. It also created a key, like a security key for my application, and install 74.. 61.. I don't know how many packages, but there, there are many packages in here. So I can go now on enter the directory of my application. I can click ls. I can see that if I do list all the vendor packages, there's a bunch of stuff in there, right? So it did install many packages.

Serving with Valet

And right away, we could run Valet link app. And what this is going to do is that is going to serve our application. So this is a CLI tool from Laravel that is called Laravel Valet and you can Google that and see how to install it or go to my Laravel playlist and see those previous videos.

So I can now go and open HTTP app test, which is what we're serving. And this Laravel application that I just created is going to get running.

Laravel routes and views

So this is running on my machine and I can show you that if I just open the application with Visual Studio Code..

So I'm gonna just open this here and we're going to browse the files in what we're going to do is we're going to go two routes to see that we have a simple route here that is showing the welcome view.

We could override that to Hello from Nono Live.

So we can now go back.. So we can comment this one out. And refresh, so this is a live application that we have here and we're serving a view. So we are going to still leave this, but we can rename this view as list because we're going to create a list of contents or maybe even like a grid view.

And I'm going to go to the resources of this project. I can find the view here and I'm going to rename it to know that this is a view that we are going to customize and we can actually use the boilerplate code here. You can see that there is a lot of coding here that we don't need, and we're just going to leave the body of this application empty.

I'm going to also remove the styles that were here in the body, and I'm going to remove some of the other staff that we don't need. We're going to change the name of the site, none of the, my life. And we're going to load this, right? So now we just get the title. It's an empty website. And actually I'm going to try to run this with a handy command that comes with Laravel.

Hot reloading

Let me see if we can do NPM to install that the dependencies of this application, and we can remove this part.

All right. So now once these packages are installed, we install 769 packages. We can run NPM, run hot, and this is going to serve our application locally in a way that it's going to be rebuilding every time I make a change and reloading without me having to refresh. And I don't know if this is going to happen automatically, but let's try it because I think I do need to install some tools that we don't have right now.

So the thing that we need to do on our webpack.mix.js file. The only thing we need to do is that we need to put here mix browser sync and then the domain name to which we want to reroute this application that is going to be served.

So we run again, NPM run hot, and you can actually go to packets dot JSON and see those commands, right?

What they are actually doing. This is running mix watch --hot and using the webpack.Mix configuration. It says here, if this is the first time you run it, do you need additional dependencies which are run. And now, we can probably skip that part. So NPM run hot.

Right. So we get this window now in here. This is the outdoor test, but this is the local host. So this is routing our application. When I add the test and you can see this, if I now write something in here, so let's do right test code, right? So this is she's updating live, which is pretty cool because now I don't have to hit refresh every time that we're doing changes to our code.

I can hide the Terminal and now we have a really good starting point to get going.

Flex Grid

So the first thing I'm going to set everything to have a nice font family, just system-ui, which works on Mac. And you can see that there, and I'm going to put a font size of three rems if that's not too big, that's really big.

So maybe 1.5. So we can add some padding to our body. So we get that separated in, we're going to make now a block so let's say none of the, my life and this is flags grids, , and now we're going to make a, the block here.

So I'm going to make a div that is going to be called or kinda have the class container. And we would make here container items, right? So we're going to make the friend container items. So we do that. We don't have any CSS, we're going to add that CSS here.

So we say container is going to have, let's say a boarder, there's going to be maybe purple. And it's going to be of one thing, sail on solid, not split, but solid. And if we see now that is going to be stretching, but maybe we want a max width, which is maybe 45 rem and that makes it go up to a maximum height. So with, in, we can also do now margin zero auto. So the sites are going to be automatically set.

So we actually get like a center diff right. And we can actually apply this same thing to.. To maybe if we make like a header component just to put our title so we can do here, they've done header and I brushed up and then we put that there. So we get that in there and what we're going to do now, just put some margin to the bottom of this component.

So if we go back here we leave the site here, we have one item. And if we do a style for that item, so we do call them thinner item and we also put a border. So we do maybe one pixel solid and choose the color of salmon. Then you see that's feeding the entire thing as well.

So the first thing we can do, and this is important part, I'm going to set here, the display of the container to flex. And now you see that these items is not taking the full width, but just a tiny bit, and that we can add more items there, right? We have now three items.

There's one thing that we can do.

Flex Basis and Flex Wrap

So for example, we can say that the, let's say the flex basis of each component might be like 35%, or maybe it's 38%, right? If the width of the component it's 100 in total, 38 multiplied by three is 114. So these are actually being squashed to 33.33333. You can see that if I do maybe 20%, those get squeezed there.

And if we were to do, let's say 45%, they wouldn't fit. We still get three thirds. But we can do here use this property that is flex wrap and we say wrap, and then these components actually get the 50 to 45% perfectly. We can see that in here. And we're actually going to put this one's to 28%.

And if you multiply 28 by three, we get 84 that makes we have 16% that is missing. And we'd like to add a margin between the boxes, but not at the end. So one thing that you could actually do is you say align items. I never exactly know which one it is, but you space between.

Dynamic CSS Editing

And I think in my be justify items, so justify items, space between align content. Okay. One thing that I like to do here that is handy is I, you get the inspection box. You maybe put it here. You can make this a bit bigger, so you can read. And once I have this right, I can get the flex. I can click here. The flex book highlighted, I can push this up and then I can modify this live.

So I can say justify items, for example, those are moving. So justify content space in between, which is what I thought I had put before. You can see that here, I get a highlight of this box margins that are not being filled. The problem with this is that if we said justify content, so just defy what we just put these justify here.

We have that, we have this, but if we put more items, look what happens. So I've just put two items. Then these two go to the sites. We would like to be 1, 2, 3, 4 on the PFive here in the middle. So for that, we need to do something else. We use need to use the wrap. So we get back to where we get the silence, but now we need to, put that 24 by three.

Flex Grid Styling

So we're missing 28 pixels. I put 28. So let's put 28 here, 16. So that means that we need to put a margin on the right. That needs to be 16, between two. That is going to be a percent on the right. The problem is that this one is also trying to put margin on the right. And the only thing we can do is that we say container item, what I'm trying to do, and I'll show you what happens with that is if I say, for example, container item is not the nth of type. So I say, I don't want it. I don't want this to affect to the third of it's type. I'm going to say that the background color is going to be, RGBA like a transparent color that we can see, but it's not too much.

So this is feeling one, two, not the third one, two, and not the third. So if I put more of these items here, you see these 1, 2, 3, 1, 2, 3, 1, 2, 3, the third one is always not affected. That's the third end of the component.

So all we can do here is that we can say, Okay, for that component, that is white I can set the, my margin rate is zero. So I reset it. And now we get this working here. But it's exactly the opposite, right? So what we want to do is that one, there is the one that is not of that type is the one that has to have that 8% and the one by default doesn't have it. So let's do the calculus once again.

So is this multiplied by three? So we have 16 and then we get two. So that's eight. And this is working. The problem is that because we add boarder to these item, it actually adds with, to the elements. So the only thing we need to do, I believe is just remove that here and remove that from here.

Okay. Yeah.

So what we've done is that we've removed the border from this item. And what I'm going to do is that I'm going to add some padding to the item. So maybe 1.5 rem . That's not too much. Yeah. That seems like it's a bit too much. Okay. So let's put that by default, the background of this is of a slight different color. So you see that differentiation, so this is green and we're going to put like a margin to the bottom. There's going to be one rem. And then maybe like a minimum height is going to be five rem or maybe that's too much.

Let's put this here and we'll do more of that radius to 3 px.

So this is our container. We could actually add some thing inside, we could have a container highlighting content or something, and then we can add some padding. There are no padding to separate the content and we're going to do wraps or we'll wrap. Let's say we change everything here.

And we say, Okay, this is going to be a container item, content, and then we put item, right? So now we have the control of where we want to be in respect to the actual item. And we want some margin there to make our content look nicer. So we're going to put this here.

So we want to make the font here slightly smaller on size, 1.5 rem. And we're going to make now a container title and container. So these would be item, title, and item content. For the content, I'm going to say that , the the color is going to be a lack, but with a bit of less capacity, and this is going to be maybe a little wait, 600.

We just now make our, all our items the same and we just make the items half like these container item title, and then we make the body here is this text or body item content, maybe didn't buy.

. So we got that, right? This now looks slightly better than before. And maybe we can remove that background or put it back on them. Makes a bit more sense. That's something that looks a bit nicer. So what we can do is that for this thing here, we're going to make the color of the font which we want to see a lot. . So we factually made this a different color. Let's leave it like that. Let's just maybe change. We don't really need these to be different.

Flex List

And we can have a class that tells our list to either be this proportion or how different proportion. So we could say, for example, we have these items, but if we say this is like a grid right now, right? So we say container when the container has the property list, the container item is going to have a flex basis of 100 and margin, or zero, and even this one is going to have it right. Maybe we can just do container when not list. Awesome. So if I could now where to add to these container, I were to add the class list, if I save, you, see, now we get this list of items here and we could adjust all their parameters.

We could say also maybe that the the mean height doesn't really need to be so tall. So you can do maybe here, like to rem or something. So we don't really have a minimum height. . So now we have the possibility of saying this is like a grid and this is a list and maybe we can even restrict.

So our max width is not so wide, so we just make it like this, but we can make it for both of them.

CSS Variables

And a nice tip here is that we can make..

I think just like this, right? If we do wrap with, or we say thirty rem, so we just have a variable there.

And I, if I change this number, everything that uses that variable changes. So now we have a variable there. You can make this, and now. I can visualize that list grid arrangement again.

Even or Odd with the Nth Selector

A really nice thing that I showed before that you could use is we could use these end types of, for example, I could say, okay container, item of the nth type of to answer every even or odd. So we're going to make a transform scale, maybe 1.3 or 0.5. So now I'm making each other component, I'm making it slightly smaller. But only the even ones, right? Every two. So every other one I could say, that the capacity is 0.5. And you can apply any property here. So every third, so only this one's every fourth

and you can play with these arrangements if you do, of course, every other you could do this. And if you want to shifted. You can say plus one, and then everything is shifting, right? If you do plus two, everything shoots by two. All right. So this is a little tip that I'm doing here, even really need to do this.

Alignment

This is a flex grid. There are many other arrangements that you can use. So take a look at the properties at , the display flags and the wraps and the justify contents and line. If we hadn't done this thing with the flex basis, so big. So if I do here maybe temporarily flex basis at 23, and I get back my bore there.

So I say, border one pixel solid salmon or something. Now I have that board and you can see there are nine to the left. One thing, if we go, this is more apparent. I think if we go to the list everything doesn't need to be aligned to the same part. I can, for example, here, say align items and say like flex and I think it was right.

And again, if you don't know about these properties, you just go here, click on your flex container and try the options. So justify flex flexing, right? So as you can see, like sand or flex start, or, you have a lot of other options, so stretch and many others. So let's go back to what we had before, because it was early.

Outro

Okay. And you can imagine that you can add a lot more content and these would be your flex grade. If you have any questions, leave them on the comments. Send me a message or whatever. I hope you learned something today. This was HTML5 flex box, or like the way to create grids with native HTML5.

This was Nono Martinez Alonso.

I hope you got something out of this video.

There are more videos on Laravel and web development on my channel.

I would invite you to go there.

Thanks for watching.

And I'll see you next time.

Blog Video Code Html5 Css