Footer with no media queries and Margins.
Have bored of writing more code for simple things today I'm showing how to Write less code with more features.Once again I'm using a grid to achieve these.
Grid is a new thing in css3 which is 2 dimensional the main thing in a grid is very easy to make layouts with less time and less code.
Just one line of code does all things
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
auto-fit and min-max functions are used.
I will explain what min-max is min-max takes two arguments first value is minimum and second is max value.
auto-fit helps us to cover the available space with the given columns.
Check out Demo & Code in Code pen
Top comments (9)
Nice! But please note that this is not a “responsive” behavior, it is just the normal grid fluid/block behavior. Responsive means mostly adapt your layout/app with media queries like targetting touch devices, pointer precision, screen resolution, device orientation..and many other things you can do with the mediaqueries.
Yeah you can do many things with media queries but you can do some things without media queries dude it is responsive layout what it does is automatically calculates the available space.check out jen Simmons layout land channel in YouTube if you have doubts 😎
Fluid, adaptive, responsive design... they existed long before jen simmons videos :) and she say that responsive web design is something more complex, complete that may include fluid layouts and adaptive layouts in the same time. Responsive web design is much more than a normal block level element behavior 😅. The point here is that the title is misleading to learning people.
Cheers.
Cool bro... 😅 but grid is not existed before...
Hi,
nice approach...but can you let me help me on how to make grid-template-columns work in ie11..
You can’t
So Media Query is the way to go right!!
Check the browser support and prefixes.
That's awesome! Thanks 😀