Sizing Up Layouts: A Detailed Guide to CSS fr Unit

Different Ways of Using CSS fr Units

CSS offers a powerful way to create flexible layouts: fractional units. But how do we leverage them in real-world situations? Let’s explore some common scenarios where fractional units shine.

Proportional Image Sizing Space

When using the fr unit in a CSS grid, space is distributed proportionally among the elements defined with fr values. For instance, if two elements have 1fr each, they will share the available space equally, creating a balanced layout.

Moreover, the CSS fr unit enables responsiveness, adjusting dynamically based on the container’s size. Thus, it is ideal for designing fluid and adaptive web layouts.

Let’s look at an example to understand it in detail. 

HTML: 

<img src = https://www.lambdatest.com/resources/images/logos/logo.svg>
<div class="container">
 
<header class="header">Digital Experience Testing Cloud Built For <span> Enterprises </span></header>


<main class="main-content">Our Unified Testing Cloud enables you to deliver <br> world class digital experience with quality releases <br> and help accelerate your release velocity.</main>


</div>

CSS:

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    font-family: Inter,Arial,sans-serif;
  }
  span {
    background: linear-gradient(91.42deg,#2b56f3 18.38%,#a505d8 62.2%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .header {
    padding: 20px;
    font-size: 36px;
    font-weight: 800;
    box-sizing: border-box;
    border: 0 solid #fafafa;
  }
 
  .main-content {
   
    padding: 20px;
    font-family: Inter,Arial,sans-serif;
    color: #4a4a4a;
    font-weight: 300;
    font-size: 18px;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    --text-opacity: 1;
  }

 In the above code snippet, the grid-template-rows property is set to auto 1fr auto, meaning:

• The first-row height is determined by its content (auto), allowing it to adjust based on the height of the header.
• The second-row takes up one fraction of the available vertical space (1fr), which means it occupies the remaining space after allocating the heights for other rows. This ensures that the main content area expands to fill the remaining vertical space within the container.
• The third-row height is also determined by its content (auto), allowing it to adjust based on its content, such as footer content if present.

Balanced Content Distribution

The fr unit in CSS grid layouts lets you achieve balanced content distribution due to their inherent flexibility and responsiveness. By assigning fractional values to grid tracks, you can specify how space is allocated within the layout. This allows for precise control over content distribution, ensuring each element receives its fair screen share.

Additionally, CSS fr units promote efficient use of space by dynamically adjusting the size of grid tracks based on their fractional values. This results in optimized content presentation across various devices and screen resolutions.

HTML:

<div class="container">
  <div class="sidebar">
 
    <h1> Online Selenium Test </br>  Automation on </br> Desktop, Android, </br> and iOS Mobile Browsers </h1>
    <p>
      Run your Selenium test automation scripts </br>  across online Selenium Grid of desktop, </br> Android and iOS mobile browsers. </br>  Develop, test, and deliver faster every </br>  time with automated cross browser </br> testing using LambdaTest online </br> Automation Browser Testing Grid.
    </p>


  </div>
  <div class="main-content">
    <img src ="https://www.lambdatest.com/resources/images/selenium-parallel-testing-index.png">
  </div>
</div>

CSS:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    padding: 20px;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  
  .sidebar {
    border-radius: 5px;
    
    padding: 20px;
  }
  
  
  .sidebar h1 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
  }
  
  
  .main-content {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
  }
  
  
  img {
    max-width: 100%;
    height: auto;
    width: 100%;
    border-radius: 5px;
  }
  
  
  h1 {
    font-size: 2rem;
    font-weight: 600;
    font-family: Inter, Arial, sans-serif;
    line-height: 1.25;
  }
  
  
  p {
    font-size: 1rem;
    font-weight: 400;
    font-family: Inter, Arial, sans-serif;
    line-height: 1.5;
  }

The .container class utilizes a grid layout with grid-template-columns: 1fr 1fr;.

Here, the 1fr represents a fractional unit, indicating that each column should take up an equal share of the available horizontal space within the grid.

In this case, the grid is divided into two columns of equal width, and the content is distributed proportionally.

In the given example, the grid-template-columns property is set to 1fr 1fr, meaning each column will occupy an equal fraction of the available horizontal space within the grid container. This allows the sidebar and main content areas to dynamically adjust their widths based on the container’s size. Using CSS fr units helps create a responsive layout where both areas expand or contract proportionally as the viewport size changes.

Simplified Media Queries

CSS media queries are helpful for creating responsive web designs, but they can also be complex and challenging to maintain. CSS fractional units can help simplify media queries by allowing you to develop layouts responsive to different screen sizes without setting fixed breakpoints.

By implementing responsive design best practices, you can create a website that looks great, functions seamlessly, and delivers an optimal user experience across all devices.

Responsive testing tools like LT Browser by TestMu AI can help developers and testers build, test, and debug their websites for responsiveness.

LT Browser is a Chromium-based mobile-friendly browser that allows you to perform responsive testing of your web designs across 50+ pre-installed device viewports, including mobile, tablet, desktop, and laptop.

Let’s say you want to create a layout with two columns that are each 50% wide on a desktop screen but resize proportionally on smaller screens. Using fractional units, you can easily create smooth layouts without tricky calculations.

HTML:

<div class="pricing-container">
  <div class="pricing-card">
    <div class="price">$29</div>
    <div class="plan">Basic Plan</div>
    <div class="features">
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>


      </ul>
    </div>
    <button class="btn">Get Started</button>
  </div>
 
  <div class="pricing-card">
    <div class="price">$49</div>
    <div class="plan">Pro Plan</div>
    <div class="features">
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
        <li>Feature 4</li>
      </ul>
    </div>
    <button class="btn">Get Started</button>
  </div>
</div>
 
<div class="pricing-container">
  <div class="pricing-card">
    <div class="price">$29</div>
    <div class="plan">Basic Plan</div>
    <div class="features">
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
    </div>
    <button class="btn">Get Started</button>
  </div>
 
  <div class="pricing-card">
    <div class="price">$49</div>
    <div class="plan">Pro Plan</div>
    <div class="features">
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
        <li>Feature 4</li>
      </ul>
    </div>
    <button class="btn">Get Started</button>
  </div>
</div>

CSS:

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: #f9f9f9; /* Background color for the entire page */
}


.pricing-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15vw;/* Adjust the gap between pricing cards using viewport units*/
  padding: 2vw; /* Adjust padding using viewport units */
}


.pricing-card {
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 8px;
  padding: 3vw; /* Adjust padding using viewport units */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-rows: auto 1fr auto;/*Adjusts rows for header, features,          and button */
  justify-items: center; /* Centers the content horizontally within the card */
  align-items: center; /* Centers the content vertically within the card */
}


.price {
  color: #007bff;
  font-size: 2vw; /* Adjust font size using viewport units */
  font-weight: bold;
  margin-bottom: 1.5vw; /* Adjust margin using viewport units */
}


.plan {
  color: #000000;
  font-size: 1.5vw; /* Adjust font size using viewport units */
  font-weight: bold;
  margin-bottom: 1.5vw; /* Adjust margin using viewport units */
}


.features ul {
  list-style: none;
  padding: 0;
}


.features li {
  margin-bottom: 1vw; /* Adjust margin using viewport units */
  font-size: 1.5vw; /* Adjust font size using viewport units */
}


.btn {
  background-color: #007bff;
  color: #ffffff;
  border: none;
  padding: 1.5vw 3vw; /* Adjust padding using viewport units */
  border-radius: 4px;
  cursor: pointer;
}


.btn:hover {
  background-color: #0056b3;
}

The .pricing-container CSS class employs fractional units to create a flexible and responsive grid layout. The grid-template-columns: 1fr 1fr; declaration assigns each column an equal share of available horizontal space, making them responsive to different screen widths.

The use of 1fr as a fractional unit ensures that both columns adapt dynamically, so if the viewport is wider, each column will expand. If it’s narrower, they will shrink accordingly. This responsive design ensures that the pricing container effectively utilizes available space, making it ideal for presenting pricing options that adjust seamlessly to various screen sizes while maintaining a balanced appearance.

In the above-given example, the grid-template-columns property is set to 1fr 1fr, meaning each pricing card will occupy an equal fraction of the available horizontal space within the pricing container. This ensures that the pricing cards are evenly distributed across the container, regardless of the viewport size. The use of CSS fr units helps create a responsive layout where both pricing cards expand or contract proportionally as the viewport size changes.

Flexible Sidebar

Using CSS fr units allows you to allocate space proportionally, ensuring that the sidebar’s width adapts seamlessly to the available space. This proportional sizing is vital for creating a visually balanced sidebar with the main content area.

As the screen size varies, whether on different devices or by resizing the browser window, the CSS fr unit dynamically adapts the width of the sidebar. This adaptability ensures the sidebar remains functional across various viewport devices and screen dimensions. You can easily define the sidebar width without resorting to fixed or complicated calculations.

Let us understand it with the help of an example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Flexible Layout Example</title>
</head>
<body>
  <!-- Header -->
  <header>
    <h1>Selenium Automation Testing on Cloud</h1>
  </header>


  <!-- Sidebar -->
  <aside>
   <ul>
      <li><a href="#">Selenium Testing</a></li>
      <li><a href="#">Cypress Testing </a></li>
      <li><a href="#">Playwright Testing</a></li>
      <li><a href="#">Puppeteer Testing</a></li>
     <li><a href="#">Appium App Testing</a></li>
     <li><a href="#">HyperExecute</a></li>
    </ul>
  </aside>


  <!-- Main Content Area -->
  <main>
    <h1>Debug in Real-Time with LambdaTest Test Analytics</h1>


<p>Get rid of the dependency on external reporting. Access rich artifacts and get a detailed report on failure reasons to find out exactly what went wrong and get step-by-step drill-downs for fast resolution. You can also easily share your detailed reports with your team saving a lot of time and effort.</p>
    <!-- Add more realistic content as needed -->
  </main>


  <!-- Right Bar -->
  <div class="right-bar">
    <h2>BROWSER AND DEVICE COVERAGE</h2>
    <p>


Run Selenium Scripts on 3000+ Desktop and Mobile Devices</p>
  </div>
<!-- Footer -->
  <footer>
    <p>Cross Browser Testing Cloud Built With <span style="font-size:150%;color:red;">&hearts;</span>
 For Testers</p>
  </footer>
  
</body>
</html>

CSS:

body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* Sidebar takes 1 part, Content takes 3 parts, Right Bar takes 1 part */
  grid-template-rows: auto 1fr auto; /* Header takes auto height, Main Content takes 1 part, Footer takes auto height */
  min-height: 100vh; /* Ensure the layout covers the full height of the viewport */
 font-family: system-ui,-apple-system,BlinkMacSystemFont,SegoeUI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;


 line-height: 1.5;
}


header, footer {
  grid-column: span 3; /* Span the full width of the layout */
  background-color: #3498db;
  color: #ecf0f1;
  text-align: center;
  padding: 10px;
}


/* Style for the sidebar */
aside {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 20px;
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}


aside h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}


aside ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


aside li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}



aside a {
  text-decoration: none;
  color: #ecf0f1;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}


aside a:hover {
  color: #3498db;
}


/* Style for the main content area */
main {
  padding: 40px;
}


main h1 {
  color: #2c3e50;
  font-size: 3rem;
  margin-bottom: 20px;
}


main p {
  color: #555;
  font-size: 1.2rem;
  line-height: 1.6;
}


/* Style for the right bar */
.right-bar {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 20px;
  box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
}


.right-bar h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}


/* Style for the footer */
footer {
  grid-column: span 3; /* Span the full width of the layout */
  background-color: #3498db;
  color: #ecf0f1;
  text-align: center;
  padding: 10px;
}


/* Responsive Media Queries */


@media screen and (max-width: 768px) {
  body {
    grid-template-columns: 1fr; /* Full-width layout for smaller screens */
  }


  aside {
    grid-row: 2; /* Place the sidebar in the second row */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Adjust shadow for better visibility */
  }


  .right-bar {
    display: none; /* Hide the right bar on smaller screens */
  }
  
  /* Adjust styles for better readability on small screens */
  aside h2 {
    font-size: 1.5rem;
  }


  aside i {
    font-size: 1rem;
    margin-right: 8px;
  }


  aside a {
    font-size: 1rem;
  }


  main h1 {
    font-size: 2rem;
  }


  main p {
    font-size: 1rem;
  }


  .right-bar h2 {
    font-size: 1.5rem;
  }
}

The grid-template-columns: 1fr 3fr 1fr property defines the columns of the grid layout. It splits the available horizontal space into three columns. The 1fr and 3fr parts indicate how much of that space each column should take.

The first column (for the sidebar) is set to 1fr, meaning it takes up one part of the total available space. The second column (for the main content) is set to 3fr, indicating it takes up three parts. The third column (for the right bar) is again set to 1fr, taking up one part.

The use of fr ensures that each column’s width is flexible and adapts proportionally to the available space. So, if the total width of the screen changes, the sidebar, main content, and right bar adjust their widths accordingly.

The grid-template-rows: auto 1fr auto property defines the rows of the grid layout. It specifies the height of each row.

The first row (for the header) is set to auto, meaning it adjusts its height based on the content. The second row (for the main content) is set to 1fr, indicating it takes one part of the available vertical space. The third row (for the footer) is also set to auto, adjusting its height based on the content.

In the above code, fr values are also adjusted at different breakpoints to create flexible layouts that adapt to various viewports.