# CSS Layout Patterns #6

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/v1698054921093/2453a49f-4bba-4d46-8b25-aedae526819b.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 5👇

[![Part 5 of CSS Layout Series](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054923957/0348b838-7415-4a2f-ab30-086d343dfba5.png align="left")](https://nidhinkumar.hashnode.dev/css-layout-patterns-5-f63dab322c6)

### On this Post

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

1. Autobot
    
2. Container query card
    

### 1\. Autobot

A centering technique where an element pushes equally from all edges of a flex container. Best for quick centering for single items only.

```css
.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
```

The container is set to flex with no alignment styles, while the direct children are styled with auto margins. The `margin: auto` working on all sides of the element.

Though it is a fun trick which is quick and dirty but it will be awkward when the elements overflow. Being pushed into position doesn’t seem optimal and can result in a change to child’s box size.

Autobot will be great for centering icons or psuedo elements.

![Demo of Autobot](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054925779/68ae6b91-f4d4-4d35-86a3-d23d950f2dea.gif align="left")

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

### 2\. Container Query Card

Container queries are a new CSS feature. They let websites shift away from designs based on page size to a container-based approach, part of a larger evolution in the design ecosystem.

Containers allow you to add styles to elements, like font sizes, colors, and layout widths, based on the parent container. This is a whole new approach to responsive design, which formerly relied on the viewport size.

For instance, on a website where an element is in a hero section or a grid on a page, the element will change sizes based on the container, not the viewport.

Container queries use breakpoints similar to how media queries do. The big difference is that the `@container` responds to its parent container, while `@media` follows the viewport and user agent.

To create the container, first set containment on the parent:

```css
.container {
  container-name: myContainer;
  container-type: inline-size;
  /* You can also use the shorthand property `container: myContainer / inline-size`.
}
```

The following example shows how the card goes from a single-column layout at more narrow sizes to a two-column layout when it is at wider sizes.

![](https://cdn-images-1.medium.com/max/800/1*en45YnhALXN-Q4tXnggwxA.gif align="left")

Container Queries

```css
/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
.card {
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
  gap: 1rem;
  text-align: left;
 }
}

/* Display description at >=500px */
@container (min-width: 500px) {
.desc {
  display: block;
 }
}
```

This means that if you have this exact same component in different parts of your UI, it’s able to use its own logic to resize and best fit its container. You have better control over the card’s layout than you would if you only had the global viewport to rely on.

Container queries are supported in [few browsers](https://caniuse.com/?search=container%20query)

![Browser Compatibility for Container Queries](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054929944/67fdc272-c1ce-4ec4-92a6-bb5b859f180d.png align="left")

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

### Congratulations!!!

![Thankyou note](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054931913/db71de09-007d-47ac-9f20-51f54ccee637.gif align="left")

Checkout the Part7 of CSS Layout series 👇

[![Click the Read more button or Scan the QR to read more :)](https://cdn.hashnode.com/res/hashnode/image/upload/v1698054934771/8484eadb-cec7-4c3c-9831-4f06870180e2.png align="left")](https://nidhinkumar.hashnode.dev/css-layout-patterns-7)