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 👇

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👇

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.

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

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

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.

.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.

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.

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

Congratulations!

Checkout the Part6 of CSS Layout series 👇