@layout

Description

The @layout at rule is used to define a set of CSS rules that should apply only at a given layout size or set/range of sizes. Layouts are defined using a syntax inspired by the spec.ly notation format.

Example Usage: Simple Use Case

If you are building an ad that will display at three sizes: 970x90, 728x90, and 300x250, then you will likely want to adjust the layout of your content depending on the current size of the ad. The example below shows you how to do this simply using layout queries.

/* Define your base styles first. */
.button { position: absolute }
.headline { position: absolute }

/* Position the elements for 300x250 */
@layout (300x250) {
  .button{ bottom: 10rem; right: 20rem }
  .headline{ top: 10rem; right: 30rem }
}

/* Position the elements for 970x90 */
@layout (970x90) {
  .button{ bottom: 10rem; right: 10rem }
  .headline{ top: 10rem; left: 30rem }
}

/* Position the elements for 728x90 */
@layout (728x90) {
  .button{ top: 10rem; right: 5rem }
  .headline{ top: 10rem; left: 5rem }
}

Example Usage: List of Sizes

Perhaps you'd like to do the same as in the previous example, but you know that the 970x90 and 728x90 require the same styles. Instead of declaring the layouts and rules over again, you can use a / to separate sizes in a list of sizes.

/* Define your base styles first. */
.button { position: absolute }
.headline { position: absolute }

/* Position the elements for 300x250 */
@layout (300x250) {
  .button{ bottom: 10rem; right: 20rem }
  .headline{ top: 10rem; right: 30rem }
}

/* Position the elements for 970x90 and 728x90 */
@layout (970x90/728x90) {
  .button{ bottom: 10rem; right: 10rem }
  .headline{ top: 10rem; left: 30rem }
}

Example Usage: Range of Sizes

In the previous example, styles were applied for three fixed sizes in two declarations (300x250 and 970x90/728x90). If the ad loaded at 900x90, none of the layouts above would match as that size does not explicitly match any of the three sizes.

But what if you wanted styles to apply when the ad is 90px tall, but the width is anywhere between 728 and 970px wide. In such a case you would use [ and ] brackets to denote a range value as shown below.

/* Define your base styles first. */
.button { position: absolute }
.headline { position: absolute }

/* Position the elements for 300x250 */
@layout (300x250) {
  .button{ bottom: 10rem; right: 20rem }
  .headline{ top: 10rem; right: 30rem }
}

/* Position the elements for layouts that are 90px high and between 728 and 970 wide */
@layout ([728-970]x90) {
  .button{ bottom: 10rem; right: 10rem }
  .headline{ top: 10rem; left: 30rem }
}

Example Usage: Complex Combinations

Using range [] brackets and layout lists using the / you can define complex combinations of layouts when styles should apply.

/* Define your base styles first. */
.button { position: absolute }
.headline { position: absolute }

/* List of various sizes/ranges */
@layout (300x250/[300-500]x50/[501-970]x90/480x[600-800]) {
  /* Styles for these ad sizes go here */
}

/* Most popular phone screen sizes in US */
@layout (640x1136/1080x1920/640x960/768x1024/480x800) {
  /* Styles for these ad sizes go here */
}

Example Usage: Creating Breakpoints with Layout Queries.

/* Define your base styles first. */
.button { position: absolute }
.headline { position: absolute }

@ad (ad-height: 90) {
  /* Styles that apply for all sizes when the ad is 90px tall go here */ 
}
  
@layout ([0-400]x90) {
  /* Styles that apply when the ad is between 0 and 400px in width go here */
}
@layout ([401-800]x90) {
  /* Styles that apply when the ad is between 401 and 800px in width go here */
}
@layout ([801-970]x90) {
  /* Styles that apply when the ad is between 801 and 970px in width go here */
}
@layout ([970-20000]x90) {
  /* Styles that apply when the ad is between 970 and 20000px (essentially any) in width go here */
}

Achieving the Above Effect with Flowlanes

The above example shows how you could define some styles to apply when an ad is a given height, and the adjust additional styles to apply when the ad is at various widths along that height.

This concept is a common design pattern that we have abstracted into an idea called a flowlane. You can achieve the same effect as the above example in a more concise format with more flexible options using the @flowlane and @breakpoint layout queries. Learn how here