# CSS — Layout Patterns #5

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/v1698054974472/81db4956-7b24-439d-a185-77906e159f5c.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 4👇

[![Click Read more or Scan the QR code :)](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054976394/dcd4c8d3-ded9-4540-93ec-67d149f6c40f.png align="left")](https://nidhinkumar.hashnode.dev/css-layout-patterns-4)

### On this Post

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

1. Super centered
    
2. 12-span grid
    

### 1\. Super centered

Centering a child div in one line of code. By using the property `place-items: center` we can center an element with its parent.

First, specify **grid** as the display method, and then write **place-items: center** on the same element. place-items is a shorthand to set both **align-items and justify-items at once**. By setting it to center, both **align-items and justify-items** are set to **center**.

![Demo of Super-centered](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054978030/6c5bcc65-bf4a-4f97-a17d-55f70d514c49.gif align="left")

```css
.parent {
  display: grid;
  place-items: center;
}
```

place-items property will enable the content to be perfectly centered within the parent, regardless of intrinsic size.

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

### 2\. 12-span grid

A grid is broken up into 12 segments where you can place areas onto the tracks evenly. You can quickly write grids in CSS with the **repeat()** function. Using: **repeat(12, 1fr);** for the grid template columns gives you **12 columns** each of **1fr**.

```css
.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}
```

Now you have a **12-column** track grid, you can place child elements on the grid. One way to do this would be to place them using grid lines. For example, **grid-column: 1 / 13** would span all the way from the first line to the last **(13th)** and **span 12 columns**. **grid-column: 1 / 5**; would **span the first four**.

![Demo of 12span grid](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054980717/b083ce1c-b6f6-441e-9145-e75f98d22c51.gif align="left")

Another way to write this is by using the **span** keyword. With span, you set the starting line and then how many columns to span into from that starting point. In this case, **grid-column: 1 / span 12** would be equivalent to **grid-column: 1 / 13**, and **grid-column: 2 / span 6** would be equivalent to **grid-column: 2 / 8**.

```css
.child-span-12 {
  grid-column: 1 / span 12;
}
```

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

### Congratulations!

![Thankyou note](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054982933/3c90c6ae-4c46-478a-a839-5831f9e1d791.gif align="left")

Checkout the Part6 of CSS Layout series 👇

[![Click the Read more button or Scan the QR to read more :)](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054984601/a2f02f42-0d8a-46c5-9588-5bf7fee51b5b.png align="left")](https://nidhinkumar.hashnode.dev/css-layout-patterns-6)