10 Modern CSS layout and sizing techniques that blows your mind!

Explore the power of CSS Grid and Flexbox

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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!

Edidiong Asikpo's photo

It definitely blew my mind!

This was very insightful Devalla Sai Charan. I have also bookmarked it for future reference.

Devalla Sai Charan's photo

Glad that you have two of my articles as bookmard 🤭

Samina's photo

These are awesome tricks- didn't know about at least half of them! Thank you for sharing. :D

Devalla Sai Charan's photo

Glad you found them useful.