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

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

Output:

👁 Image

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

Output:

👁 Image