[CSS3] Container query

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

 

Use the container-type property a value of size, inline-size, or normal. These values have the following effects:

• size: the query will be based on the inline and block dimensions of the container. Affects both Width and Height.
• inline-size: the query will be based on the inline dimensions of the container. Affects only Width
• normal: The element is not a query container for any container size queries, but remains a query container for container style queries.

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

 

Once a containment context is created, you can use the @container at-rule to write a container query. 

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* Container query applied if the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

 

It's possible to give a containment context a name using the container-name property. Once named, the name can be used in a @container query so as to target a specific container. The following example creates a containment context with the name sidebar:

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

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

 

The shorthand way of declaring a containment context is to use the container property:

.container {
  container: sidebar / inline-size;
}

 

FireFox doesn't support container query at the memont, you can use polyfill:

https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js

 

Tailwind has container query support plugin:

https://github.com/tailwindlabs/tailwindcss-container-queries

tailwind.config.js

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/container-queries")],
};

 

Example:

import "./App.css";
import movies from "./movies.json";

function Card({ image, title, subtitle, description }) {
  return (
    <div className="@xl:grid @xl:grid-cols-[1fr_3fr] mb-2">
      <div
        className="bg-no-repeat bg-cover bg-center h-64 min-h-full rounded-t-3xl @xl:rounded-tr-none @xl:rounded-l-3xl"
        style={{
          backgroundImage: `url(${image})`,
        }}
      />
      <div className="p-2">
        <h2 className="mb-2 text-3xl font-bold">{title}</h2>
        <h4 className="mb-2 italic">{subtitle}</h4>
        <p className="hidden @xl:block">{description}</p>
      </div>
    </div>
  );
}

function App() {
  return (
    <div className="max-w-5xl mx-auto @container">
      <div className="@4xl:grid @4xl:grid-cols-[3fr_1fr]">
        <main className="@container">
          <Card {...movies[0]} />
          <Card {...movies[1]} />
          <Card {...movies[2]} />
        </main>
        <article className="@container">
          <Card {...movies[3]} />
          <Card {...movies[2]} />
          <Card {...movies[1]} />
        </article>
      </div>
    </div>
  );
}

export default App;