CSS — Layout Patterns #1

CSS — Layout Patterns #1

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

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

On this Post

In this post, we are going to see the first 2 patterns which is

  1. Aspect ratio Image Card

  2. Clamping Card

1. Aspect ratio Image Card

The aspect ratio property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

aspect-ratio: auto;  
aspect-ratio: 1 / 1;  
aspect-ratio: 16 / 9;  
aspect-ratio: 0.5;
/* Global values */  
aspect-ratio: inherit;  
aspect-ratio: initial;  
aspect-ratio: revert;  
aspect-ratio: revert-layer;  
aspect-ratio: unset;

The box’s preferred aspect ratio is the specified ratio of width/height. If height and the preceding slash character are omitted, height defaults to 1. Size calculations involving the preferred aspect ratio work with the dimensions of the box specified by box-sizing.

Let’s look at the below example

Aspect ratio example

In the above animation, you could see the aspect ratio of an image in a card, while letting you resize the card.

With the [aspect-ratio](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) property, as you resize the card, the pink visual block maintains this 16 x 9 aspect ratio. We are respecting the aspect ratio with aspect-ratio: 16 / 9.

Aspect Ratio Code pen

Browser compatibility

Browser Compatibility of Aspect Ratio

2. Clamping Card

Sets an absolute min and max size, and the actual size for the card.

Let’s quickly see an example before we look at what is Clamping

Clamping Card

In this demo, we are setting the width using clamp() like clamp(<min>, <actual>, <max>).

This sets an absolute min and max size, and an actual size. With values, that can look like

.card { width: clamp(23ch, 60%, 46ch); }

The minimum size here is 23ch or 23 character units, and the maximum size is 46ch, 46 characters. Character width units are based on the font size of the element (specifically the width of the 0 glyph). The actual size is 50%, which represents 50% of this element’s parent width.

The clamp() function enables the element to retain a 50% width until 50% is either greater than 46ch (on wider viewports), or smaller than 23ch (on smaller viewports).

In the above demo, you can see how the width of this card increases to its clamped maximum point and decreases to its clamped minimum as the parent stretches and shrinks. It then stays centered in the parent using additional properties to center it. This enables more legible layouts, as the text won’t be too wide (above 46ch) or too squished and narrow (less than 23ch).

This technique can be used in responsive typography. For example: font-size clamp(1.5rem, 20vw, 3rem). In this case, the font size of a headline would always stay clamped between 1.5rem and 3rem but would grow and shrink based on the 20vw actual value to fit the width of the viewport.

Browser compatibility

Browser compatibility of clamp()

Congratulations!

Check out Part 2 of the CSS Layout Series 👇

Click the Read more button or Scan the QR :)