CSS just continues to grow and evolve, much like its cousin Javascript. I thought I would share a few CSS layout properties that are still relatively unknown at the moment with developers. The first 3 are variations of almost the same thing, with the fourth being the most obscure and unsupported of them all.
place-items
This one blows a lot of the minds of developers I’ve shown this too or told about. The place-items property is shorthand for align-items and justify-items CSS properties.
If you wanted a completely centered layout (on both the X and Y axis) you can just use place-items: center.
.layout {
display: flex;
place-items: center;
}place-content
Similarly to the place-items shorthand property, the place-content property is shorthand for align-content and justify-content CSS properties.
.layout {
display: flex;
place-content: center;
}place-self
Another shorthand property, place-self is shorthand for the align-self and justify-self CSS properties.
.layout {
display: flex;
}
.layout .item {
place-self: center start;
}aspect-ratio
One of the most exciting CSS properties which is not a shorthand property is aspect-ratio which allows you to control the calculated size of an element. The obvious use-cases here are video and images, but really, you can use this property for anything you want.
In the following example, we create an element which only has a width specified of 250px, but using the aspect-ratio property will give us a perfectly square box of 250px both height and width.
.square {
width: 250px;
height: auto;
aspect-ratio: 1/1;
}Now, say you have a video and you want to maintain a 16/9 aspect ratio without resorting to Javascript or CSS padding hacks, you can just do this.
video {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}Now, at the time of writing this, support for this is interesting. Many browsers support it in some capacity but have shipped support for internal mapping use only. Of all of the properties listed, this is the newest and most experimental. So, this property while cool is not directly useable yet. It is worth remembering we still have object-fit which is well-supported.
