CSS Functions

CSS Grid and Flexbox combination CSS Color Functions

CSS provides different built-in functions that allow us to calculate values dynamically, handle variables, or create flexible layouts. These functions greatly contribute to modern, responsive, and maintainable web design.

calc() function

The calc() function allows mathematical operations within CSS values. This makes it easy to combine percentages, pixels, and other units.

This example shows how to subtract 50 pixels from the full width using calc().

var() function

The var() function allows the use of CSS variables defined with the -- prefix. With this, we can centrally control colors, sizes, and other properties.

In this example, the var() function calls a CSS variable value as the background color.

minmax() function

The minmax() function is used in grid layouts and allows us to specify both the minimum and maximum size of a column or row. This enables flexible and responsive layouts.

In this example, the first column of the grid is at least 150 pixels wide but can grow flexibly if more space is available.

Comparison of functions

Function	Usage
calc()	To mathematically combine values, e.g., 100% - 50px.
var()	To call and reuse CSS variables.
minmax()	To define flexible sizes for grid columns or rows.

Tips for using functions

CSS functions allow you to create dynamic and easily maintainable code, but it is important to know which function is the most useful in each situation.

Calc() helps avoid unnecessary wrapper elements when calculating layout values.
Var() is especially effective if you use the same colors or sizes in multiple places.
Minmax() enables a fully responsive grid that works well on both small and large screens.