# CSS — Layout Patterns #4

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/v1698055048573/2b515474-4419-46a5-80a0-dc55056d4054.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 3👇

[![Scan the QR Code to Read more :)](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055050118/c4c43d26-849d-447f-8ca6-9fafcf68a5cc.png align="left")](https://nidhinkumar.hashnode.dev/css-layout-patterns-3)

### On this Post

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

1. RAM (Repeat, Auto, Minmax)
    
2. Sidebar says something
    

### 1\. RAM(Repeat, Auto, Minmax)

A responsive layout with automatically placed and flexible children.

To create a responsive layout with automatically-placed and flexible children we will use the concepts that we learned earlier. The key terms to remember here are **repeat, auto-(fit|fill), and minmax()**, which you remember by the acronym **RAM**.

All together it looks like

```css
.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
```

![Demo of RAM Layout](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055051803/a06a675f-03e5-4c16-9eea-0552806bf017.gif align="left")

Here we are using **repeat()** again, but this time, using the **auto-fit** keyword instead of an explicit numeric value. This enables auto-placement of these child elements. These children have a base minimum value of **150px** with a maximum value of **1fr**, meaning on smaller screens, they will take up the full **1fr width**, and as they reach **150px** wide each, they will start to flow onto the same line.

With `**auto-fit**`, any completely empty tracks will **collapse to 0** and the filled tracks will grow to take up their space. However, if you change this to `**auto-fill**`, empty tracks will take up the same amount of space they would do if filled

```css
.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
```

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

### 2\. Sidebar says something

A layout where the sidebar is given a minimum and maximum safe area size, and the rest of the content fills the available space.

![Demo of Sidebar](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055053870/e6a81409-7b38-4c66-b760-b4ee018ddd73.gif align="left")

Here we are using **minmax()** function for grid layouts. In the demo, **minmax()** is used to set the minimum sidebar size to **100px**, but on larger screens, letting that stretch out to **25%**. The sidebar will always take up 25% of its parent’s horizontal space until that 25% becomes smaller than 100px.

By using the property **grid-template-columns** with **minmax(100px, 25%) 1fr.** The item in the first column (the sidebar in this case) gets a minmax of **100px at 25%**, and the second item (the main section here) takes up the rest of the space as a single **1fr** track.

```css
.parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
  height: 100%;
}
```

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

### Congratulations!

![End note](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055055888/2bb2b3bb-2d0b-411e-a720-fdf7a2bbf3d0.gif align="left")

Checkout the Part5 of CSS Layout series 👇

[![Click the Read more button or Scan the QR to read more :)](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055057710/9bcc0562-c8f6-4dfc-a102-165e229d713d.gif align="left")](https://nidhinkumar.hashnode.dev/css-layout-patterns-5-f63dab322c6)