One flex/grid item sets the size limit for siblings in CSS

Last Updated : 27 Mar, 2023

When working with CSS Grid or Flexbox, it is possible to set a size limit for siblings using one item as a reference. This means that the size of all other siblings will be defined in relation to the reference item, creating a layout that is both flexible and consistent.

Syntax: To set a size limit for siblings in CSS Grid or Flexbox, you can use the following syntax:

For Grid:

.grid-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 1fr 2fr 1fr;
}
.grid-item {
     grid-column: 2 / 3;
     height: 100%;
}
 

For Flexbox:

.flex-container {
      display: flex;
      flex-wrap: wrap;
      height: 100%;
}

.flex-item {
      flex: 1 0 25%;
}

Approaches: There are two approaches to setting a size limit for siblings in CSS Grid or Flexbox. 

Approach 1: This approach is to use a fixed size for the reference item. This means that all other siblings will be limited to the same size, creating a consistent layout. 

Example: Fixed Size Reference Item

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
          Example with Fixed Size Reference Item
      </title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr 2fr 1fr;
        }
        
        .grid-item {
            background-color: #cfc9c9;
            padding: 7px;
            text-align: center;
        }
        
        .reference-item {
            grid-column: 2 / 3;
            height: 80px;
        }
    </style>
</head>

<body>

    <center>
        <h1 style="color: green;"> 
              Geeks for Geeks 
          </h1>
    </center>
    <div class="grid-container">
        <div class="grid-item reference-item">
            <h1>Reference Item</h1>
        </div>
        <div class="grid-item">
            <h1> Sibling 1</h1>

        </div>
        <div class="grid-item">
            <h1>Sibling 2</h1>

        </div>
        <div class="grid-item">
            <h1> Sibling 3</h1>
        </div>
    </div>
</body>
</html>

Output:

 

Approach 2: This approach is to use a relative size for the reference item. This means that all other siblings will be limited to a percentage of the reference item, creating a flexible layout.

Example: Relative Size Reference Item

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
          Example with Relative Size Reference Item 
      </title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            height: 100%;
        }
        
        .flex-item {
            background-color: #eee;
            padding: 10px;
            text-align: center;
        }
        
        .reference-item {
            flex: 1 0 50%;
        }
    </style>
</head>

<body>

    <center>
        <h1 style="color: green;"> 
              Geeks for Geeks 
          </h1>
    </center>
    <div class="flex-container">
        <div class="flex-item reference-item">
            <h1>Reference Item</h1>
        </div>
        <div class="flex-item">
            <h1> Sibling 1</h1>
            <div class="flex-item">
                <h1>Sibling 2</h1>
            </div>
            <div class="flex-item">
                <h1> Sibling 3</h1>
            </div>
        </div>
</body>
</html>

Output:

 
Comment

Explore