标签：container https contain article com CSS layout

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

@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;
  }
}

<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/ypN-Uwshc5M?start=217" title="YouTube video player" width="560"></iframe>

(

标签：container,https,contain,article,com,CSS,layout
From： https://www.cnblogs.com/xgqfrms/p/16942423.html