Responsive CSS Grid with NO MEDIA QUERIES!

today you're going to create this without the use of any CSS media queries before we begin to when to mention this video sponsor Skillshare comm which is an online learning community for creators with over 25,000 classes in design business and more so whether you want to feel your curiosity your creativity or even your career skill share is the perfect place to do just that for instance you're about to watch my tutorial on the CSS grid but you could learn the grid from scratch by watching this course at Skillshare go share is also super affordable with an annual subscription of being less than ten bucks a month but if you're one of the first 500 people to click on the link here in the description in YouTube then you get the first two months 100% free so join up everyone what's up Gary Simon of course satchel column so today we're gonna be taking a look at the CSS grid and really just two properties of the CSS grid and we're gonna be using it to create something that you would typically think would require media queries so we have sort of a photo gallery right here and as we come in it looks like we have different break points in certain areas but there's absolutely no break points that are defined within any type of media query in fact there's no media queries that we're using in the CSS I'm going to show you exactly how to do that the inspiration for this tutorial is written by an individual I'll gonna link it in the article here in the YouTube description so definitely check that out and also I'll throw in an extra tip in terms of a very cool little sass feature alright so let's go ahead and get started but make sure first to subscribe all right so first we're gonna get started here visual studio code free code editor from Microsoft and I have an empty folder called grid and I have it opened up as open folder and we'll go ahead and create our index.html really quick and a new folder called CSS and inside of it and main dot sass file we're gonna use a fun sass function by the way as a kind of like an extra tip in this video and of course we're going to be using two visual studio extensions if you already know what I'm about to mention because I do it in most of my videos you can just skip but we're gonna need a sass eye extension right here where we can watch the sass file which live compilation of sass so to CSS so we're gonna use this just type in live sass and the live stats compiler install that and then also we'll want to install live reload I believe it's called our live server right here alright so install those two and get ready to rock alright so we're gonna watch this so it just generates our CSS if I you don't know what sass is I have a free course just use my channel search to find it and close that out and close welcome out here as well and let's get started so quick boilerplate exclamation point enter and that will give us some quick HTML let's type in link we'll get our CSS folder main CSS file linked up as well and we're good to go okay so let's start writing out the HTML and then we'll worry about the CSS you know the the most important issue from what this tutorial is about so we have our h1 element I'm going to say my awesome shots whatever you'll want and then we're gonna have a container of some sort this container is going to act as the grid container alright so we're gonna use just a main element inside of here we're gonna have a series of cards this could just be images if you don't want any accompanying information along with your your thumbnails or whatever your photographs then it could just be you know the image tag right here if you wish it'll still work but our CSS grid child elements are going to be a div of a class called card alright so div class card right there and inside of it we're gonna have to type based elements a title in a description who would've thought so we'll say a div we're gonna have we're gonna wrap that in its own div as well on that way we'll be able to style them with some padding for both of those elements so we'll say div info and then we're you strong here because I want it to be a bold title so strong class got the class there will be title although we don't have to use title cuz we really have one strong element anyways so we'll put it in just my title here we'll put in a paragraph over the class of the description again we don't need to do this I'm looking at my reference code here and I'm realizing i unnecessarily did it and originally i was going to have two paragraph tags that's why I gave them classes I digress though so let's continue on just a paragraph with lorem ipsum text so typing lorem hit enter we're gonna delete a fair amount of it yeah maybe right around there and then outside of our div class info we're gonna have our image so our image source is going to be I I found these on google images I sorted it by free to use commercially available images all with a specific size of I think like 640 by 480 or something like that I'm not gonna bother with alt tags I know I should but I'm just lazy and this is the card right here this is what we want now I already have these cards set up pretty much in this same manner so I'm going to just paste the recipes in here the reason I'm doing that is because I have unique URLs for each of these so in the YouTube description if you want you can see the code pen for this demo and you can just grab all the HTML that we just wrote with all the cards I think there's gonna be like six of them or so alright so I'm gonna pause and do that alright and here it is so there's just six cards here the only difference being is the image source because I wanted different images here so now at this point that's all it is for our HTML that's it that's all we are using so we won't be touching this document again so let's right-click and we're gonna open with live server alright and here's what we have without any CSS being applied to it dirt ugly alright so let's get to the meat and bones as they say for the tutorial so first we're gonna get out of the way just some real basic stuff I'm just gonna copy and just paste stuffin very simple just setting the height 200% on the body in HTML element we have the body element here with margin zero font-family Montserrat's already installed machines my machine so I don't have to import it h1 just giving it some beefy margin here so again nothing changes very much here I read some margin and all that so now let's go ahead and get started here control B by the way to get rid of that sidebar actually we're going to leave it because I know I'm over here somewhere I don't want to screw up the code so I'm gonna do I mean for our selector and we're gonna display the grid all right so once we save this again nothing too much changes here if we have control shift I to get up dev inspector you'll see we have our dashed line grid right there so these are all have their own grid element each of the div class infos alright so now the magic really occurs here in the single property for what we're about to do which is a responsive gallery of some sort that doesn't require media queries so grid template columns alright so this sort of thing works great when we're just dealing with the type of content that we have here again it doesn't even have to be images it could just be any type of container that's repeating I in a column sort of format so grid template columns will say I we're gonna do well first of all let's just do I something like I that's a little bit more typical for grid template columns and then I'll show you something different so if I put repeat well first let's not do that let's do we have six of these images right six of these cards yes so what we could do is say 200 pixels and I'll just copy and paste this very silly six times all right so of course we can do multiple I you know different it doesn't have to be pixels it could be any type of other acceptable element like percentages and such but as you can see as we do it here it's not responsive at all it's not any type of flexible unit so another better way if you were to do this because they're all the same is repeat so you want to repeat it six times and the value for 200 pixels you'll see this result is exactly the same so I'm just to giving a little bit of a refresher by the way for those of you who may not be familiar so I can kind of set this up properly so we could see our grid right here and it's just 200 pixels not very exciting so we're gonna keep our repeat here and instead of specifying a numeric value for the first parameter which is the number of times it's going to repeat we're going to put in something different called Auto - and there's two different potential values that you can put here or properties rather and that is autofit actually it's a value or autofill so let's put Auto fit here and for this value instead of putting let's just say this I real quickly though we'll see if anything changes and it doesn't really so in order for this to work properly we have to change this to the CSS a min/max function all right so min and short for minimum and then maximum min Max and this accepts two parameters as well and that is the minimum value of the width and then a maximum so again we could put pixels here we can put a.m. units REM units let's just do REM units I'm gonna put something like nineteen REM units for the minimum width and then for the other width we're gonna put something a lot of people haven't seen and that is the F our unit which is a fraction unit we're gonna put one fr so now we see things have vastly vastly changed and it magically becomes quite responsive so we'll describe this in a second but one thing that's not behaving like we thought it would is it's wrapping this on the bottom here so why is that well we have to real quickly create another rule set because the image is not set to a hundred percent for the width so inside of a card our image we're set the width to a hundred percent all right so if I double click this and expand it we can see it goes to a hundred percent the width here but as we come in we'll see it starts to fill out and that's the what determines the number of elements or the cards are going to be displayed on one row is based on this value right here so if we turn it down maybe to 14 REM units and save we'll see now it's showing them up because it is based on the minimum width the minimum the minimum acceptable width for the card elements once we get to this smaller size right around here which would be for 14 REM units as we currently have it's going to push off any other remaining elements onto its own new row just beneath it and so if you really if you want to get to the point where you're at like a mobile point or a mobile view and by the way this is kind of screwed up because I have so much I let's let's remove that and just be good like 2/3 there we go so if we wanted it to be set up so that we have maybe a hundred percent you know like one element per line we can bump this up to around perhaps 19 like we had it before and now we have one image or one card per line for a mobile view very very cool stuff so how exactly does this work well first we have Auto fit and let's demonstrate the difference between autofit and autofit if I put in autofill let's bring this back to maybe to something lower like 12 we'll see that based on the available space of the grid container maybe we've been bringing this up as well to better demonstrate it will see that it it's it's only going to fill it out to the the necessary space here now if we put auto fit it's going to stretch them all out to the available space as shown here all right so then you may be wondering what is the fr unit for the maximum value well it basically means based on the remaining available space of the grid container that will be the maximum width so you can learn more here at the specific eye page here at AI well I'll just try to remember to link this URL in the description I but it's gonna tell you what auto fill and auto fit does as well as the fr unit just underneath it right here which is a flexible length or I it represents essentially a fraction of the leftover space in the grid container so when you understand what Fr unit is you can then begin to experiment with changing these values up based on you know the the content that you have inside of it so this is you know more of like a dynamic value as opposed to hard coding like you know three or four or whatever like that so that's what makes it pretty much responsive without worrying about media queries well let's go ahead and I'm gonna show you just as a bonus tip we're going to make this a look a little bit better just because I'm a UI designer and front-end developer primarily and I just I can't not leave it looking like this oh by the way if you want gaps between years you can use grid grid gap put something like one REM unit and the gaps will perfectly work there's no space bars and it's it's it's accounted into the way we have this set up very very cool stuff I'm gonna take it out though so now let's do cursor:pointer and then inside of card we're gonna transition a transform property from one second and we'll do like a hover so we'll say and hover transform translate lie or you could scale it if you want we'll just do negative ten pixels when somebody hovers over it it's gonna push him up alright they also look like garbage because there's no white space in there so let's fix that as well we'll take our info and add some padding no.not exclamation point we'll do one room all right and what if we wanted this is the bonus tip for a little bit of more intermediate to advanced sass all right what if we wanted random colors to be placed random shades perhaps or random colors from an array that we create of colors to be placed as the background for our info section up here how exactly would we do that alright so first we're going to create a variable up here alright and we're going to separate the value by commas so it's essentially an array so I'm gonna do I just I'm gonna say gray at first and I'm gonna change the gray by hovering over here in Visual Studio code up to something lighter so it changes to RGB values and then I'm going to put a comma copy this and then paste this six times all right so now they're all the same color but if I quickly hover over them and just change them up a little bit maybe some lighter than others maybe one a little bit darker go here to the end change this one up as well all right we'll save it does nothing now of course I then we're going to iterate over these and I'm going to say right here at 4i that's going to be our key here from 1 through 6 because we know we have six of these I cards we're gonna say now we're going to put in our pseudo selector and nth of type and we need to put a coal in there first damn it what the hell there we go and nth of type and we put in the parenthesis and this is where we pass in our key which is referenced as the I variable the way you do this is you put the number or the hash sign rather our brackets and then I inside of it so that will say an nth of taught a type 1 2 3 4 5 6 it'll pre it'll create that in our main CSS file then we can say background we're going to use the nth function here and accepts two parameters it's going to take in our colors array essentially and then we just pass in I for the key so if we're lucky we'll see it worked very very cool stuff so now if we go over to our main dusty SS file we will see this is what it produced that little iteration that we did you see are 1 2 3 4 and then our colors that we specified awesome awesome awesome stuff all right so hopefully you found that very useful if so let me know in the comments and of course as always subscribe already click the bell notification icon so you get notified as well and look forward to more to tourists throughout this the week and also throughout the rest of the year of course alright see you guys later goodbye [Music] [Music]

Channel: DesignCourse

Views: 172,876

Rating: 4.9229589 out of 5

Keywords: media queries, css grid, grid, css grid tutorial, responsive grid, responsive css grid, css grid responsive, responsive grid tutorial, responsive web design, responsive website, css responsive grid, css grids, responsive design, web design, css grid layout

Id: bam83Xv4VMA

Length: 20min 4sec (1204 seconds)

Published: Mon May 13 2019