CSS minmax() Function Overview

Overview

This lecture introduces the CSS minmax() function, explaining its usage in grid layouts to set flexible size ranges for grid tracks.

The minmax() CSS function sets a size range between a minimum and maximum value.
It is primarily used in CSS Grid layouts to define column or row sizes that can adapt to content or container space.
minmax() ensures a grid track is at least the minimum value and at most the maximum value specified.

General form is minmax(min, max), where both min and max are required.
Each parameter can be a <length>, <percentage>, <flex> value, or keywords like max-content, min-content, and auto.
If max is less than min, the maximum is ignored and the track size becomes the minimum value.

<length>: A non-negative fixed value (e.g., 200px).
<percentage>: A non-negative percentage relative to the grid container.
<flex>: A non-negative unit (fr) that distributes remaining space proportionally.
max-content: Uses the largest required space for content.
min-content: Uses the smallest required space for content.
auto: As a minimum, uses the largest min size of items; as a maximum, behaves like max-content but can expand via alignment properties.

Example: grid-template-columns: minmax(200px, 1fr) 1fr 1fr; defines a column that is at least 200px but can grow to fill available space.
Can be used with grid-template-columns, grid-template-rows, grid-auto-columns, and grid-auto-rows.

minmax() — CSS function that sets a minimum and maximum size for a grid track.
<flex> — A value with fr units that allows proportional space sharing.
max-content — Keyword that sizes track to the longest unbreakable content.
min-content — Keyword that sizes track to the shortest possible content.
auto — Keyword that adapts the track size based on content and alignment rules.

Practice using minmax() in CSS Grid layouts.
Explore additional reading: "Basic concepts of grid layout: track sizing with minmax()" and experiment with code examples.