1fr in CSS

1fr in CSS

For more questions and answers visit our website at Frontend Interview Questions

What is 1fr in CSS?

The 1fr unit in CSS Grid Layout stands for one fraction of the available space. It divides the available space in a grid container into equal parts based on the total number of fr units specified.

For example, if you have two columns defined as 1fr and 1fr, the total available space will be divided into two equal parts, and each column will take up one fraction of that space. If you have three columns, each with 1fr, the space will be divided into three equal portions.

Syntax

Here’s a basic syntax to define a grid using 1fr:

grid-template-columns: 1fr 1fr;

This syntax divides the grid container into two equal columns. Each column will take up one fraction of the available space.

Example 1: Two Equal Columns Using 1fr

Let’s create a grid layout with two columns, each taking up an equal portion of the available space using 1fr.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1fr in CSS Example</title>
    <style>
        .grid-container {…