Understanding calc() in CSS

The calc() function in CSS allows you to perform mathematical operations on values dynamically. This is particularly useful when working with responsive designs, ensuring elements adjust based on different screen sizes and available space.

Supported Operators

• + (Addition)
• - (Subtraction)
• * (Multiplication)
• / (Division)

Unsupported Operations

While calc() is powerful, it has limitations. You cannot use it for:

• Calculating colors (e.g., calc(red + blue) does not work)
• Concatenating strings (e.g., calc(10px + 'em') is invalid)
• Mixing units improperly (e.g., calc(50% + 20px * 2) may cause issues if not formatted correctly)

What is vw?

vw (viewport width) is a CSS unit that represents a percentage of the total width of the viewport. For example:

• 100vw means 100% of the viewport width.
• 50vw means half of the viewport width.

It is commonly used in responsive designs to ensure elements scale with the browser width.

Examples

Here are some examples of how you can use calc() in CSS:

1. Making a div take full width minus padding

div {
    width: calc(100% - 20px);
}

2. Centering an element

.box {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
}

3. Sidebar taking one-third of the screen width

.sidebar {
    width: calc(100vw / 3);
}

4. Text resizing dynamically

h1 {
    font-size: calc(1rem + 2vw);
}

5. Flexible button width

button {
    width: calc(50% - 10px);
}

6. Column layout

.column {
    width: calc(33.33% - 20px);
    float: left;
}

7. Combining percentages and pixels

.box {
    width: calc(70% - 50px);
}

Assignments