CODEWITHSUNDEEP
htmlcsscss-grid
sethi67
sethi67

Reputation: 49

What is the benefit of the repeat function in CSS Grid?

What is the difference between these two grid-template-columns property values? Are they same?

grid-template-columns: repeat(6, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

Upvotes: 1

Views: 592

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371909

There's no functional difference.

However, practically, imagine a grid with 24 or even 100 defined columns.

The repeat() function would certainly come in handy in that scenario.

Upvotes: 1

Nouveau
Nouveau

Reputation: 11

They both represent the same. As stated in the Mozilla docs,

The repeat() CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

So, basically repeat() is used to write a value in compact form instead of repeating the same values. I hope that might help.

Upvotes: 1

Related Questions