![]() The min and max values are both static, so by default, the grid is not responsive. Secondly, we can define the width of more than one grid column using minmax(). The second and the third columns retain their fixed width (200px) while the first column ranges from 100px to 200px, based on the available space. On the gif demo below, you can see that this layout is not responsive, however the first column has some flexibility. There are two basic ways how we can use the minmax() function with static length values.įirstly, we can use minmax() only for one grid column and define the width of the other columns as simple static values (pixels here). ![]() We can use different kind of values inside the minmax() function, all depends on what kind of custom grid we want to create. See the Pen Starter demo for the minmax() CSS function by HONGKIAT on CodePen. In the Codepen demo below, you can find the HTML and CSS code we’ll use throughout the article. Grid-template-columns: minmax(100px, 200px) 1fr 1fr In our example, we’ll use the former, as it’s a much more frequent use case. We can use the minmax() function as the value of the grid-template-columns or grid-template-rows property (or both). The min value has to be smaller than the max, otherwise max gets ignored by the browser. The syntax of the minmax() function is relatively simple, it takes two arguments: a minimum and a maximum value: Read Also: Introduction to the CSS Grid Layout Module Syntax It makes it possible to define the size of a grid track as a minimum to maximum range so that the grid can adapt to the viewport of each user the best possible way. The minmax() function is one of these less widely known features. Now, we can’t only define custom grids blazingly fast solely with pure CSS, but the CSS Grid also has many hidden gems that allow us to further tweak the grid and achieve complicated layouts. ![]() The CSS Grid Layout Module takes responsive design to the next level by introducing a new kind of flexibility that was never seen before.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |