CSS @container layout All In One

CSS @container layout All In One

article {
  contain: content;
}

article {
  contain: layout;
}

article {
  contain: paint;
}

article {
  contain: size;
}

article {
  contain: style;
}

article {
  contain: strict;
}

https://caniuse.com/css-container-queries

WD === Working Draft

CSS Containment Module Level 3

W3C Working Draft, 18 August 2022

https://www.w3.org/TR/css-contain-3/

@container

@container <container-condition> {
  <stylesheet>
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@container

https://developer.mozilla.org/en-US/docs/Web/CSS/contain

https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries#naming_containment_contexts

CSS Containment

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment

CSS Container Queries

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

demos

.container {
  container-type: inline-size;
  container-name: sidebar;
}


@container sidebar (min-width: 700px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

codepen

https://codepen.io/xgqfrms/pen/rNKqVRZ

https://codepen.io/xgqfrms/pen/yLERNwK

https://codepen.io/xgqfrms/pen/dyKgoEb

youtube

refs

https://css-tricks.com/next-gen-css-container/

https://css-tricks.com/wp-content/uploads/2021/04/Kapture-2021-03-24-at-12.04.23.mp4

https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/

https://ishadeed.com/article/container-query-units/

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---