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 👇

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 👇

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 }

Deconstructed pancake flex-grow stretching

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

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:

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

Deconstructed pancake no stretching

Browser Compatibility

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.

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

Holy Grail Layout

Congratulations!

Check out Part3 of the CSS Layout series 👇