 Thank you so much for the claps. Journey through CSS grids. So today I'm going to be talking about This clicker is not working Yeah, so today we are going to be talking about memes or Or CSS grids Don't worry. You are not being scammed Grids so how many of you are familiar with CSS grids raise of hands How many of you are using CSS for the first time or have heard about CSS for the first time raise of hands? Okay, so I am the only amateur in here. So what what are grids? While working on my personal site I came across this thing Not a thing actually this problem of you know creating a grid like layout. So This is not actually gonna be a professional kind of talk So what I'll be doing is just share my experience through how I discovered the perfect grid solution to all the CSS layout so I have no idea let me just check Yeah So when we thought about grids the first thing that came to our mind is tables Tables is like the really basic solution to grids grid like layouts. I mean wow You just create the table tag table data insert the header insert the table row table data and Does that but You know table is not the best solution when you approach grids Because what happens is table is really restrictive when it comes to responsiveness when you change the grids the Tables is like the comic sense if you are Familiar with memes. I mean That is a really bad joke Yeah, so frameworks so framework what framework does is it's it provides a you know built-in not built-in ready-made Code so that you can just put in your contents and then work on the grid like Layout so the most familiar framework that we might all have heard about is bootstrap But bootstrap I found it really complex when it comes to grids so This is the site where I Was working on this is actually my personal site. I know the name is really Long but blame coldplay. I will just show you the reason why So this is actually the song that coldplay came out of it while I was working on my site so I just named this song name as my website name so So this is my site and While I was working on this page on my portfolio page The internet is really great. Thank you for that. Oh, what is happening? So if you are wondering, what is this? This is actually my logo mark for What is happening? The image is not loading. Let me check Okay so, yeah If the image is for image was loaded, I think the grid layout Would be working perfectly fine. Let me check I think we should please give us a moment. I'll just tether my phone for Thanks for helping It'll come nag me Okay G is it okay, okay, okay Let's hope this works or you can use G is it okay, let's try that Oh caps log is on Yellow pencil Look, let's try it Oh, how it works. It's clearly a cache More time Okay, yes Singapore my available Want to try this one then but this also I mean, I guess it's okay. There's too much damage work But you have the image stored locally somewhere. No, I think it's okay. Yeah Okay. Yeah So yeah, I think there is some caching issue with the browser or something I swear, I have coded this website as it should be I'm not Really an immature. Yeah, so this is the site I was working on while I was You know working as a freelancer. So what happened was I was really inspired by the portfolio layouts So what it does is if you click on branding it will it would show all the branding related projects animation It would show the all the animation related projects But the secret to this grid layout is something that I will share later on this presentation, let me Just carry on Okay, so flex grids How many of you, you know thought about using flex boxes when it comes to grids? Nope, okay, so Flex box flex boxes are really, you know Accessible example of achieving a grid like layout, but it is really scary so That is an exaggeration, but it can be really confusing at times. Let me show you why this This is actually Greed layout from already existing CSS framework that I will share later in the top. So what it does is it creates a grid row with the Display format as flex and the flex direction as row So what it does is it creates a grid layout in the row format and also it defines the width of that Flex container and also for defining the grid column we use this so what this Flex property does is the first value defines the flex growth the second value defines the flex shrink The third value defines the flex basis. So I will just explain what each of them means flex growth means Let's say you have this first row Just highlight. Yeah, so this is the first row if we Defined is defined the flex shrink as zero You will see that Thing is working. Let me check. So what it does basically is it attempts to you know Grow the flex with a relative to all the other flex items present in this container the second flex value What it does is it tries to you know shrink the flex container items with relative to other flex items in that container and The third one auto is called the flex basis. So if you set a specified value, it will just Set it as a fixed value for other widths in the container. So the default value is auto Let's switch to that So, yeah, that is how the flex container works, but it can be really scary at times and also confusing because Yeah, so what it does is you can there are only two cases that I discovered either the flex items can be row wise or Column wise like this. So it can be either this or this This or this by defining a media query Here So if it if the resolution of the device is below 768 pixels It just switches to the column wise layout, but I found this really, you know Unpractical in case you want to still, you know have a have an easy access to the flex like layouts you can go to Let me just share the link Flexbox read.com. So this is the site which provides the framework for flex grids That I just talked about now it is an open source project you can fork it or work on it as you like So the next slide let me So, yeah, I try Inspire inspire by getting inspired by the already existing frameworks. I tried to create my own framework not copy so Why is this not working again? Sorry, I'm trying so hard to be funny. Let me check. Yeah So I tried to get this framework of mine in code pen so that it can be accessible to everyone Let me just yeah It is called project bliss wave if you you can just go to code pen dot IO slash Sudipto and Access this framework So, yeah, there was this already existing framework called milligram which uses the flex grid layout If you just scroll down here Yeah, this is the grid layout that milligram uses so it is really a stripped down version of Bootstrap you can just use flex and easily, you know Define grid layers here. So what the advantage of using flex is it you know automatically calculates the Width of each item on the grid so that you don't have to specifically define the percentage of each menu item here the disadvantage is As I spoke before you can only get this row wise direction or you know column wise direction Yeah So inspired getting inspired by this I created this framework, but I Found that this is a really bad drawback for my side layout. So what I did was I searched for For some grid generators on Google so this was the best one that I found by Graham Miller So why this responsive grid layout, let me just show you the demo so To just try this layout I created this fake movie site What it does is I you know present the movie posters in a grid like format and As we resize it it changes the layout In a really fluid manner. So if we go below, let's say 800 pixels it switches to four Columns if you go below 600 pixels it switches to three columns if you go below 400 pixels It doesn't do anything Not sure why so yeah, so yeah the secret behind this layout is If we go to responsive grid generator comm So this is the side if you want to note it down. So yeah, what he does is He creates four deals with some fixed percentage values Like spend three or four this defines the you know specific width of The grid items like 74.6 Or if we want to show one item in grid of force, we can set it as 23.8 So that is how this grid actually works. What it does is let me just show you an example code Create a new pen. I'll just reset the CSS so that there is no padding or something like that Do so we can create four columns like this we can name it content one To show that we can identify the columns. What is happening? Oh, yeah, so yeah, I can add the column wrapper as Display block and this content here is the column we can define the width as 24% 25% because There are only four columns we can define the float element as left So that They fit each other apparently they are not let me just check the keys are all over the place Just check. Yeah, what this is doing is creating a grid of four elements and then creating this hidden horizontal line Which I have hidden using this CSS value called Visibility hidden so that it can clear the float that I have created here float left So using this simple logic this grid System works really great so that it can you know Where did go yeah, so that it can it can switch the grid layout dynamically as You change the screen size So there is the five column four columns and three is the maximum number of columns so that was all about Responsive grid system comm and if you want more you can have You can note this CSS grid generators A grid calculator audit DK, which is the first result that comes up on Google But I don't really find it as helpful as the responsive grid generator because I Mean look at this The UX is really all over the place. Oh, you can't really understand what's happening here The next thing is simple grid dot IO. This is not an actual CSS framework This is only a great framework for the CSS grids this uses this actually uses the flexbox system that I Explained talked about earlier The last one is code pen dot IO so Let me just so this is the site where you can get Open source codes to play around Play around and you know create your own CSS layouts or grids that you want So, let's say if you want to search some grid layouts You can just search for grid layouts code pen And you will get open source like links to already created grid layouts here You can just click on any one of them and Yeah, you can click on any one of them and just add a player on this open source code that you get here so Yeah, open source a code pen dot IO is really a great resource to start with Let me just so you might be wondering What is this 14-year-old kid Doing presenting, you know about CSS grid. I'm actually a happiness here engineer at automatic The creator of wordpress.com and also I'm a memes enthusiast if that matters and also I'm I have email and Twitter handle to contact and I'm actually 24 I might be so do you have any questions or Suggestions or meme resources that you want to share sure You know the thing is I did not draw up with tables I draw up with frame sets Okay, if you go to Google.com have you heard about So if you go to Google.com and search for memes you will get the actual definition of memes on the right hand side corner I'm sorry Yeah, we are actually the you know owner of wordpress.com that is based on wordpress.org That is an open source software. Oh, no, no, no, so why so what let me just show you if you go to my weirdly long website You will find that the homepage and other pages that You actually see here are built on PHP and HTML and core JavaScripts, but actually this Journal section that is actually a blog is based on wordpress.com So what I did was I used a blank theme that already contains functions of PHP file header header dot PHP file And also footer dot PHP file So it already includes all the PHP files that I need it right So I just I can incorporate my own CSS file and create the Blog which I haven't posted anything Yeah, so that's that you have any questions anything. Yeah, I believe Internet Explorer does not support CSS grids So is there any format option for that? The thing is we CSS developers really don't consider Internet Explorer right now So I know that that can be mean But what we do is we have prefixes like MS for Internet Explorer 10 and above or 11 and above I'm not sure so you can use those prefixes like MS flake flexbox or something like that You can use those prefixes to support the specific browsers The you don't have any you know prefixes for CSS grids you can just use widths floats and Clear the floats around so yeah, so it's to use those yeah, so Internet Explorer does support right? Yeah, so for flexboxes the the safari browsers Disclaimer the safari browsers are really wonky with flexboxes So if you want to use the flexboxes, I really don't recommend it If your major focus is safari, so yeah, that's that Any other questions? Okay