# CSS — Layout Patterns #1
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/v1698054990757/a2fdc1bd-1067-46b3-9868-0cffb0fb8688.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
### On this Post
In this post, we are going to see the first 2 patterns which is
1. Aspect ratio Image Card
2. Clamping Card
### 1\. Aspect ratio Image Card
The aspect ratio property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
```css
aspect-ratio: auto;
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;
```
```css
/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;
```
The box’s preferred aspect ratio is the specified ratio of **width/height**. If height and the preceding slash character are omitted, height defaults to 1. Size calculations involving the preferred aspect ratio work with the dimensions of the box specified by box-sizing.
Let’s look at the below example
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054993389/341fe0d9-cf4c-41f2-af69-37b7a57565b0.gif align="left")
Aspect ratio example
In the above animation, you could see the aspect ratio of an image in a card, while letting you resize the card.
With the `[aspect-ratio](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio)` property, as you resize the card, the pink visual block maintains this 16 x 9 aspect ratio. We are respecting the aspect ratio with `aspect-ratio: 16 / 9`.
Aspect Ratio Code pen
#### Browser compatibility
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054995393/0cd636c0-ce74-4a44-bd45-7163a82c455a.png align="left")
Browser Compatibility of Aspect Ratio
### 2\. Clamping Card
Sets an absolute min and max size, and the actual size for the card.
Let’s quickly see an example before we look at what is Clamping
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054997181/4f721e69-3352-4651-8a99-892a33f96145.gif align="left")
Clamping Card
In this demo, we are setting the width using clamp() like `clamp(, , )`.
This sets an absolute min and max size, and an actual size. With values, that can look like
`.card { width: clamp(23ch, 60%, 46ch); }`
The minimum size here is 23ch or 23 [character units](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/), and the maximum size is 46ch, 46 characters. Character width units are based on the font size of the element (specifically the width of the 0 glyph). The actual size is 50%, which represents 50% of this element’s parent width.
The **clamp()** function enables the element to retain a 50% width until 50% is either greater than 46ch (on wider viewports), or smaller than 23ch (on smaller viewports).
In the above demo, you can see how the width of this card increases to its clamped maximum point and decreases to its clamped minimum as the parent stretches and shrinks. It then stays centered in the parent using additional properties to center it. This enables more legible layouts, as the text won’t be too wide (above `46ch`) or too squished and narrow (less than `23ch`).
This technique can be used in responsive typography. For example: **font-size clamp(1.5rem, 20vw, 3rem)**. In this case, the font size of a headline would always stay clamped between 1.5rem and 3rem but would grow and shrink based on the 20vw actual value to fit the width of the viewport.
#### Browser compatibility
![Browser compatibility of clamp()](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054998972/8c97c26d-8d05-4ad9-a2df-d68a89b874eb.png align="left")
### Congratulations!
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055000525/c5e38320-ea50-4488-90cd-8fc74b520269.gif align="left")
Check out Part 2 of the CSS Layout Series 👇
[![Click the Read more button or Scan the QR :)](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055002706/6099ce58-08f7-4534-8be7-09d400f7548e.png align="left")](https://nidhinkumar.hashnode.dev/css-layout-patterns-2)