A fraction, also known as 1FR, is a mathematical concept that represents one part of a whole. It is commonly used to describe proportions or divisions of objects or quantities.
In the context of web design, fractions play a crucial role in creating responsive layouts and grid systems. Understanding fractions is essential for designing visually appealing and user-friendly websites.
What’s a Fraction (1FR)?
A fraction or 1FR is one part of the whole. It represents a proportionate amount of space within a container.
In web design, containers can be sections, divs, or any other elements that hold content. By using fractions, we can distribute available space in a flexible and responsive manner.
Understanding Fractions in Web Design
In web design, fractions are often used to create responsive layouts using CSS Grid or Flexbox systems. These systems allow us to divide the available space into different fractions, which can then be assigned to different elements on the page.
Example: 1 Fraction Is 100% of the Available Space
When we assign 1FR to an element within a grid container, it means that the element will occupy all the available space within that container. This is equivalent to setting the width or height of the element as 100%. For example:
<div class="grid-container">
<div class="grid-item" style="grid-column: span 1;">
This element occupies 1/3rd of the available space.
</div>
<div class="grid-item" style="grid-column: span 2;">
This element occupies 2/3rds of the available space.
</div>
</div>In the above example, the grid container contains two grid items. The first grid item has a width equivalent to 1FR, which means it occupies one-third of the available space. The second grid item has a width equivalent to 2FR, which means it occupies two-thirds of the available space.
Example: 2 Fractions Are 50% Each
If we assign 2FR to an element within a grid container, it means that the element will occupy half of the available space. This is equivalent to setting the width or height of the element as 50%. For example:
<div class="grid-container">
<div class="grid-item" style="grid-column: span 2;">
This element occupies half of the available space.
</div>
<div class="grid-item" style="grid-column: span 2;">
This element also occupies half of the available space.
</div>
</div>In this example, both grid items have a width equivalent to 2FR, which means they each occupy half of the available space. This ensures that the elements are evenly distributed within the container.
Conclusion
Fractions, represented as 1FR or any other value in web design, allow us to create flexible and responsive layouts. By using fractions in CSS Grid or Flexbox systems, we can distribute available space proportionately among different elements on a webpage. Understanding fractions is crucial for designing visually engaging and user-friendly websites.