![]() Then, it divides the rest of the space into 1:2 fractions. So, how does this work? The browser assigns the 60% of the viewport width to the first column. For instance, in the example below, I used the 60% 1fr 2fr ratio for my grid. ![]() You can combine the fr unit with any other CSS units as well. Basically, the browser deducts the grid gap from the viewport width (in this example, the grid gaps add up to 80px), and slices up the rest according to the given fractions. I also increased the value of grid-gap so that you can see how it changes the layout. ![]() Below, I used 1:2:1 fractions that also divide the space into three columns but the middle column will be twice as wide as the other two. Of course, you can’t only use 1:1:1 but any ratio you want. You can find the full code in the demo at the end of the article. Note the CSS above doesn’t contain some basic styling such as background colors. If you don’t want any gap just remove this property. The grid-gap property adds a 10px grid in-between the boxes. Otherwise, it can have strange results on some devices, however, even then, the fr unit does maintain the ratio (and this is huge). The grid-template-columns property uses the fr unit as value the ratio of the three columns is 1:1:1.įor the grid rows ( grid-template-rows property), I didn’t use the fr unit, as it only makes sense if the wrapper has a fixed height. To use the Grid Layout module, you need to add the display: grid CSS property to the wrapper. The belonging HTML is made of six divs marked with the. The layout below divides the space into three equal-width columns and two equal-height rows. Read Also: Introduction to the CSS Grid Layout Module Basic usageįirst, let’s have a look at a basic grid that uses the fraction unit. If you also want to support older browsers here’s a great CSS grid polyfill that allows you to use not only the fr unit but other grid features as well. As a result, the creation of fully responsive and flexible grids becomes almost a breeze.Īs the fraction unit was introduced together with the Grid Layout module, you can use it in any browser that supports the CSS grid. The new unit makes it possible to quickly slice the grid up into proportional columns or rows. As straightforward as it can be, fr is the abbreviation of the word “fraction”. The CSS Grid Layout Module was shipped with a new CSS unit called the fr unit.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |