Member-only story
22 CSS Tricks That Can Make You a Layout Ninja
A look at some lesser-known CSS properties
Today I would like to tell you about several CSS properties and values that are rarely mentioned in technical literature, but, in my opinion, are of particular interest for improving the speed and quality of web interface development.
Many of the properties discussed are experimental. Most of them are supported by all modern browsers. However, if you decide to use any of these properties in production, consider visiting Can I use to clarify if they are supported.
So, are you ready for a little journey into the amazing and almost borderless world of CSS? Let’s get started!
grid + place-items
This technique allows you to align items horizontally and vertically with just two lines of code.
place-items is a shorthand property for justify-items and align-items.
This property can be applied to one or several (child) cells at once.
flex + margin
Another modern way to align items horizontally and vertically is to use a combination of display: flex and margin: auto.
It would be fair to say that the same can be done using the following snippet:
