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 2👇

On this Post

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

1. Line up

2. Pancake Stack

1. Line up

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

The main point demonstrated here is the use of **justify-content: space-between**, which places the first and last child elements at the edges of their bounding box, with the remaining space evenly distributed between the elements. For these cards, they are placed in a flexbox display mode, with the direction being set to the column using **flex-direction: column**.

This places the title, description, and image block in a vertical column inside of the parent card. Then, applying justify-content: space-between anchors the first (title) and last (image block) elements to the edges of the flex container and the descriptive text in between those gets placed with equal spacing to each endpoint.

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

2. Pancake Stack

Commonly referred to as a sticky footer, this layout is often used for both websites and apps.

Unlike the deconstructed pancake, this example does not wrap its children when the screen size changes. Commonly referred to as a sticky footer, this layout is used for both websites and apps, across mobile applications (the footer is commonly a toolbar), and websites — in particular single-page applications.

Adding display: grid to the component will give you a single column grid, however, the main area will only be as tall as the content with the footer below it.

To make the footer stick to the bottom, add:

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

This sets the header and footer content to automatically take the size of their children, and applies the remaining space (1fr) to the main area, while the auto-sized row will take the size of the minimum content of its children, so as that content increases in size, the row itself will grow to adjust.

Congratulations!

Checkout the Part4 of CSS Layout series 👇