If you don’t have time to read but want to know what’s there in this post. Find the 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👇

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 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 is great for modals, toasts and messages, stacks and depth effects, popovers.

Congratulations!!!