# CSS Layout Patterns #7

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

![Quick Read](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054958329/8206e3e5-f5b4-4125-8736-01f60daaabc8.gif align="left")

### 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 6👇

[![Scan the QR Code to Read more :)](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054960566/fd852d97-64a6-4787-8796-eb5b3f6b9455.png align="left")](https://nidhinkumar.hashnode.dev/css-layout-patterns-6)

### On this Post

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

1. Content center
    
2. Fluffy center
    

### 1\. Content center

A centering technique that is only a few lines of CSS, works great for many elements but has the side effect of making children match the width of the widest element.

It can be used in the grid as well as in flex since it centers and justifies children collectively, it’s a solid centering technique for groups of elements meant to be read.

```css
.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
```

* Content is centred even under constrained space and overflow
    
* Centering edits and maintenance are all in one spot
    
* Gap guarantees equal spacing among n children
    
* Grid creates rows by default
    

![Content Center Demo](https://cdn-images-1.medium.com/max/800/1*s_V48SaesMZD-613wEXWGg.gif align="left")

Content centers are great for macro layouts containing paragraphs and headlines, prototypes, or generally things that need legible centering.

<iframe src="https://codepen.io/nidhinkumar06/embed/preview/JjvmgOg?default-tabs=css%2Cresult&height=600&host=https%3A%2F%2Fcodepen.io&slug-hash=JjvmgOg" width="700" height="525"></iframe>

### 2\. Fluffy Center

A centering technique that puts the content in the center via equal padding around all its sides.

It is the only centering technique that’s entirely element/child owned.

![Fluffy Center Demo](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054964621/40a56378-de5d-4df1-b6e1-fa5dfb63418f.gif align="left")

* Protects content
    
* Every test is secretly containing this centering strategy
    
* Word space is gap
    
* There’s a clash between the container and the items, naturally since each are being very firm about their sizing
    

<iframe src="https://codepen.io/nidhinkumar06/embed/preview/eYrPqPx?default-tabs=css%2Cresult&height=600&host=https%3A%2F%2Fcodepen.io&slug-hash=eYrPqPx" width="700" height="525"></iframe>

Fluffy center are great for word or phrase-centric centering, tags, pills, buttons, chips, and more.

### Congratulations!!!

![End Note](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054967358/43b472e7-4624-4637-a9be-3df1f9ed41d9.gif align="left")