CSS Layout Patterns #8

CSS Layout Patterns #8

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

Quick Read

On this Series

We are going to look at the commonly used CSS layout patterns. Most of the patterns which we are going to see use CSS grid and flexbox to achieve the common UI patterns such as cards, dynamic grid areas, and full-page layouts supported on all modern browsers.

The patterns which we are going to see in this series are

  1. Aspect ratio Image Card

  2. Clamping Card

  3. Deconstructed Pancake

  4. Holy grail layout

  5. Line up

  6. Pancake Stack

  7. RAM (Repeat, Auto, Minmax)

  8. Sidebar says something

  9. Super centered

  10. 12-span grid

  11. Autobot

  12. Container query card

  13. Content center

  14. Fluffy center

  15. Gentle flex

  16. Pop n’ Plop

If you are new to this series check out the Part 7👇

Scan the QR Code to

On this Post

In this post, we are going to see the following patterns that are

  1. Gentle Flex

  2. Pop n’ Plop

1. Gentle Flex

A centering technique that only aligns content and doesn’t change their size during the process.

Gentle Flex is a truer centering-only strategy. It’s soft and gentle, because unlike place-content: center, no children’s box sizes are changed during the centering. As gently as possible, all items are stacked, centered, and spaced.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;

Gentle Flex Demo

  • Gentle flex handles alignment, direction, and distribution

  • Edits and maintenance are all in one spot

  • Gap guarantees equal spacing amongst n children

2. Pop n’ Plop

A centering technique for overlaying other content. It’s a classic and handy overlay centering technique that’s flexible and dynamic to content size. Sometimes you just need to plop UI on top of other UI.

.pop-n-plop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

Pop n Plop Demo

Pop n’ Plop is great for modals, toasts and messages, stacks and depth effects, popovers.


End Note