CSS Data Type - <flex>

The CSS data type <flex> signifies a flexible length within a grid container. This data type is used in grid-template-rows, grid-template-columns, and other related properties.

Syntax

The CSS data type <flex> is denoted as a <number> followed by the unit fr. The unit fr denotes the fraction of leftover space in the grid container. No space to be specified in between the number and the unit.

/* Using an integer value */
2fr

/* Using a float value */
3.5fr

CSS <flex> - Used with grid-template-columns Property

The following example demonstrates the use of <flex> data type used with grid-template-columns property, where the value is passed in fr unit, enabling those many columns creation:

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: 1fr 2.5fr 1fr;
      color: white;
      text-align: center;
      width: 360px;
      border: 2px solid black;
      background-color: tomato;
   }
   .grid-container > div {
      background-color: tomato;
      border: 2px solid black;
      padding: 10px;
   }     
</style>
</head>
<body>
   <h3>The grid layout has 3 columns.</h3>
   <div class="grid-container">
      <div class="grid-item1">Grid item 1</div>
      <div class="grid-item2">Grid item 2</div>
      <div class="grid-item3">Grid item 3</div>
      <div class="grid-item4">Grid item 4</div>
      <div class="grid-item5">Grid item 5</div>
      <div class="grid-item6">Grid item 6</div>
   </div>
</body>
</html>
Advertisements