CSS grid - use minmax () function to create grid columns and rows
Hello,
Today I wanted to share 2 basic examples of CSS grid minmax() function.
Example # 1 - use minmax() function to create columns using grid-template-columns property
1. We have 3 columns created using grid-template-columns: 1fr 1fr 1fr; declared on our .grid container
2. Lets change 1st fr value to minmax() function like so: grid-template-columns: minmax(300px 400px) 1fr 1fr;
When we inspect and resize browser window 1st track would not shrink less than 300px and would not grow more than 400px.
Example # 2 - use minmax() function to create rows using grid-auto-rows property
1. We can explicitly declare our rows by adding to our previous example grid-auto-rows: minmax(70px, auto);
Similar to our columns with minmax, our rows woudn't shrink less than 70px but would grow if we add more content
2. Lets add some lorem ipsum text into on of the grid items to see the behaviour
Thats the most basic usage of minmax.