The CSS minmax()
function was introduced as a part of the CSS Grid Layout specification. It only works with CSS grids, specifically, with the following grid tracking properties:
grid-template-columns
;grid-template-rows
;grid-auto-columns
;grid-auto-rows
.
It can be used for setting a size range for grid tracks (i.e. columns and rows), between the specified minimum and maximum values. For example:
#container { display: grid; grid-template-columns: minmax(100px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 150px; width: 100%; background-color: pink; } #container > div { background-color: aqua; padding: 5px; }
<div id="container"> <div>Flexible maximum width with a minimum of 100px.</div> <div>Inflexible item of 150px width.</div> </div>
This will produce the following output:
Flexible maximum width with a minimum of
100px
.Inflexible item of
150px
width.This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.