CSS - container-type Property

Quiz

The container-type Property

CSS container-type property specifies an element to act as a query container for its child element. It is an important property that allows container queries. Using container queries, styles can be applied based on the container's dimensions (i.e. width and height) instead of the viewport.

Syntax

The syntax for the CSS container-type property is as follows:

container-type: size | inline-size | normal;

Property Values

Value	Description
normal	It is the default value where the element does not act as a container for queries.
size	It specifies container queries based on both the width and height of the container.
inline-size	It specifies container queries based only on the width.

The following examples illustrate how to use the CSS container-type property in different scenarios.

Using inline-size for Responsive Elements

The inline-size value makes a container responsive based on its width.

Example

In this example, we have used the inline-size value to make the container responsive based on the container width.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS container-type Property</title>
    <style>
        .container {
            container-type: inline-size;
            width: 60%;
            border: 1px solid #031926;
            padding: 20px;
            margin: auto;
        }
        .content {
            text-align: center;
            font-size: 18px;
            background-color: #031926;
            padding: 15px;
            color: white;
            font-family: Verdana, sans-serif;
        }
        @container (max-width: 450px) {
            .content {
                font-size: 16px;
                background-color: #04af2f;
            }
        }
    </style>
</head>
<body>
    <h2>CSS container-type Property</h2>
    <div class="container">
        <div class="content">
            Resize the container to see changes.
        </div>
    </div>
</body>
</html>

Using size for Responsive Elements

The size value makes a container responsive based on both width and height.

Example

The following example uses size value to make the container responsive based on the container's width and height.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS container-type Property</title>
    <style>
        .container {
            container-type: size;
            width: 300px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
            resize: both;
            overflow: auto;
        }
        .box {
            padding: 20px;
            background-color: lightgray;
            text-align: center;
        }
        @container (min-width: 350px) {
            .box {
                background-color: orange;
            }
        }
        @container (min-height: 250px) {
            .box {
                background-color: green;
                color: white;
            }
        }
    </style>
</head>
<body>
    <h2>Using size for Both Width and Height Queries</h2>
    <div class="container">
        <div class="box">Resize Me</div>
    </div>
</body>
</html>

Using normal to Disable Container Queries

We have set the container-type property to normal i.e. the default value where the element does not act as a container for queries.

Example

The following example disables the element for container queries.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS container-type Property</title>
    <style>
        .container {
            container-type: normal;
            width: 60%;
            border: 1px solid #031926;
            padding: 20px;
            margin: auto;
        }
        .content {
            text-align: center;
            font-size: 18px;
            background-color: #031926;
            padding: 15px;
            color: white;
            font-family: Verdana, sans-serif;
        }
        @container (max-width: 450px) {
            .content {
                font-size: 16px;
                background-color: #04af2f;
            }
        }
    </style>
</head>
<body>
    <h2>CSS container-type Property</h2>
    <div class="container">
        <div class="content">
        This container does not support queries.
        Try to resize the container.
        </div>
    </div>
</body>
</html>

Supported Browsers

Property
container-type	105	105	110	16	91

Print Page