10 Modern CSS layout and sizing techniques that blows your mind!
Explore the power of CSS Grid and Flexbox
Bonjour,
When it comes to programming, there are many ways to achieve a specific use case. It always depends on the state of our mind at that time and what logic strikes at first. But, out of all logics you can think of to build that, there will be only few efficient ways. Efficient meaning - the length of the code you write, complex operation it involves, amount of memory it takes and so on.
Ok ok.. I know I talked enough already. The point is, there are so many ways in CSS to achieve a particular design. There is no correct or wrong solution as long as it is producing the same output. In this article I am going to show you 10 beautiful tricks in CSS that will help you achieve your target design with less lines of code (in fact very few) that you thought you would write. I bet for it!
Let's get into it.
01. Super Centered
> place-items: center
Most of the times, its a real pain when it comes to center an element in the DOM. Using display:grid we can easily achieve that. Here is the code pen to it:
Current Browser Support: Edge, Firefox, Chrome,Safari
02. Auto adjustable grid
> flex: 0 1 <baseWidth>
Let the elements on DOM listen to you and do what you want! With very few lines of CSS Flexbox, we can control the elements beautifully to adjust itself. Here is the pen to demonstrated how to make grid layouts that will adjust automatically according to browser size easily.
Current Browser Support: Edge, Firefox, Chrome,Safari
03. Sidenav
> grid-template-columns: minmax(<min>, <max>) ...
Ever wonder you can create sticky side-nav in just few lines of css? So, here it is:
Current Browser Support: Edge, Firefox, Chrome,Safari
04. Pancake Stack
> grid-template-rows: auto 1fr auto
Tell the browser to only adjust one part of the entire design and restrict other parts of a website.
Current Browser Support: Edge, Firefox, Chrome,Safari
05. Classic Holy Grail Layout
> grid-template: auto 1fr auto / auto 1fr auto
Create powerful layouts using few lines of CSS!
Current Browser Support: Edge, Firefox, Chrome,Safari
06. 12-Span Grid
> grid-template-columns: repeat(12, 1fr)
Possibilities are endless. You can always play around with elements in DOM if you know this trick!
Current Browser Support: Edge, Firefox, Chrome,Safari
07. RAM (Repeat, Auto, Minmax)
> grid-template-columns: repeat(auto-fit, minmax(<base>, 1fr))
Another one to control how your grid should look like based on the viewport width and height.
Current Browser Support: Edge, Firefox, Chrome,Safari
08. Responsive Cards
> justify-content: space-between
Let us control how the space around the elements needs to occupied. Let's not waste any space and keep it void.
Current Browser Support: Edge, Firefox, Chrome,Safari
09. Clamping My Style
> clamp(<min>, <actual>, <max>)
Clamp the item to whatever place you want in the DOM. Like a sticky note on a wall!
Current Browser Support: Edge, Firefox, Chrome
10. Respect for Aspect
> aspect-ratio: <width> / <height>
A very powerful yet easy way to change aspect ratio on the go.
Current Browser Support: Edge, Chrome (less support)
So, we came to the end of this article. Hope you learned few tricks today!