Center and crop images with a single line of CSSĀ 

This technique works great for cropping awkwardly-sized avatar pictures down to squares or circles. Take this wide photo of a bear below for example. Once object-fit: cover is applied to the image and a width and height are set, the photo crops and centers itself. object-fit: cover crops the exact same way background-size: cover does, but is used for styling imgs, videos and other media tags rather than background images.

CSS GAP property

Using the gap property with Grid CSS

CSS Stop text wrapping around image For use in WP Show Posts

Full-Width Containers in Limited Width Parents

The idea here is:1. push the container to the exact middle of the browser window with left: 50%2. pull it back to the left edge with negative -50vw margin

Angled divs with SCSS

I recently worked on a project where the design called for a slanted or angled div. This was achievable using some CSS selector magic. The following scss snippet easily creates angled divs for you.