CSS Function- repeat()

The CSS function repeat() is used to express a repeating section of the title list, which is a more concise way to define a large number of columns or rows with a recurring pattern.

This function can be used within the CSS grid attributes grid-template-columns and grid-template-rows.

The repeat() function accepts two parameters:

  • repeat count: first argument defines how often the track list should be repeated. It can be set with an integer value of 1 or higher or with the keywords auto-fill or auto-fit.

  • tracks: the second argument selects which tracks should be replicated. The <track-size> or <fixed-size> variables can be used to provide one or more size values that define these tracks.

Possible values

<fixed-size>

Could be in one of the following forms:

<flex> - A dimension with a non-negative value that uses the unit fr to indicate the flexibility factor of the track.

<length> - A postive integer length.

<line-names> - One or more <custom-ident> values are separated by spaces and enclosed in square brackets, for example: [first header-start].

<percentage> - The <percentage> number provided for column grid tracks is based on the grid container's inline size, whereas for row grid tracks, it is based on the block size of the grid container. The <percentage> is considered as auto if the tracks of the grid container control its size.

auto - At its maximum, it corresponds to the max-content. At its minimum, it denotes the largest minimum size (as defined by min-width/min-height) of the grid items within the grid track.

auto-fill: automatically create as many tracks as needed to fill a grid container without causing an overflow. This displays both empty and filled tracks. Note that empty tracks are columns or rows with no grid item.

auto-fit: automatically create as many tracks as needed to fill a grid container without causing an overflow. It collapses empty tracks to 0px. Note that empty tracks are columns or rows with no grid item.

max-content - It indicates the maximum contribution of the grid elements placed in the grid track to the max-content.

min-content - It indicates the maximum min-content contribution made by the grid items within the grid track.

CSS repeat() - Using auto-fit and minmax()

In the following example, the CSS property grid-template-columns uses the repeat() function to create a responsive grid layout.

The auto-fit parameter dynamically adjusts the number of columns to the available space, and minmax(200px, 1fr) specifies that each column should be at least 200 pixels wide, but can grow proportionally to the available space.

<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
      color: #333;
   }
   .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
   }
   .grid-item {
      background-color: #3498db; 
      padding: 20px;
      text-align: center;
      color: white;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
   @media (max-width: 600px) {
      .container {
         grid-template-columns: repeat(1, 1fr);
      }
   }
   @media (min-width: 601px) and (max-width: 900px) {
      .container {
         grid-template-columns: repeat(2, 1fr);
      }
   }
   @media (min-width: 901px) and (max-width: 1200px) {
      .container {
         grid-template-columns: repeat(3, 1fr);
      }
   }
   @media (min-width: 1201px) {
      .container {
         grid-template-columns: repeat(4, 1fr);
      }
   }
</style>
</head>
<body>
<div class="container">
   <div class="grid-item">Item 1</div>
   <div class="grid-item">Item 2</div>
   <div class="grid-item">Item 3</div>
   <div class="grid-item">Item 4</div>
   <div class="grid-item">Item 5</div>
   <div class="grid-item">Item 6</div>
   <div class="grid-item">Item 7</div>
   <div class="grid-item">Item 8</div>
   <div class="grid-item">Item 9</div>
   <div class="grid-item">Item 10</div> 
</div>
</body>
</html>
Advertisements