# CSS — Layout Patterns #2

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

![A quick read about this blog](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055008871/14c44555-edd6-427f-86e9-3b0917969120.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 1 👇

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055012054/182f0fbd-b3e5-4d95-97ef-b29dc8f13084.png align="left")](https://nidhinkumar.hashnode.dev/css-layout-patterns-1)

### On this Post

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

1. Deconstructed Pancake
    
2. Holy grail layout
    

### 1\. Deconstructed Pancake

This is a common layout for marketing sites, for example, which may have a row of three items, usually with an image, title, and then some text, describing some features of a product. On smaller screens, you’ll want those to stack nicely, and expand as you increase the screen size.

By using Flexbox for this effect, you won’t need media queries to adjust the placement of these elements when the screen resizes.

The flex shorthand stands for: `**flex: <flex-grow> <flex-shrink> <flex-basis>**`

#### flex-grow Stretching

If you want the boxes to stretch and fill the space as they wrap to the next line, set the value of `**<flex-grow>**` to **1**, for example:

.parent { display: flex }  
.child { flex: 1 1 150px }

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055013815/d9e3714d-7595-43d1-b3b4-a94f5a7dbda3.gif align="left")

Deconstructed pancake flex-grow stretching

Now, when you increase or decrease the screen size, these flex items both shrink and grow.

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

#### No stretching

If you want your boxes to fill out to their `<flex-basis>` size, shrink into smaller sizes, but not stretch to fill any additional space, write: `**flex: 0 1 <flex-basis>**`. In this case, your is 150px:

```css
.parent { display: flex }
.child { 0 1 150px }
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055015577/18bcd7db-4554-4239-a100-60c5a4ae0d5d.gif align="left")

Deconstructed pancake no stretching

#### Browser Compatibility

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055018367/c5afdcf5-ccef-4be0-8e26-128284dda319.png align="left")

Browser Compatibility of Flex

### 2\. Holy grail layout

Classic layout with a header, footer, two sidebars flanking, and a main content area.

To write this entire grid using a single line of code, use the **grid-template** property. This enables you to set both the rows and columns at the same time.

The property and value pair is `grid-template: auto 1fr auto / auto 1fr auto`. The slash between the first and second space-separated lists is the break between rows and columns.

```css
.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055020687/97111366-f62c-466d-a513-b322729f1586.gif align="left")

Holy Grail Layout

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

### Congratulations!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055022636/5e7ccf5b-90ff-4fa1-b006-574a9c0ea3bd.gif align="left")

Check out Part3 of the CSS Layout series 👇

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055025527/758d19cb-234a-4534-b70f-5eca8a1b2aed.png align="left")](https://nidhinkumar.hashnode.dev/css-layout-patterns-3)