Home Programming How you can Use the CSS Grid repeat() Operate — SitePoint

How you can Use the CSS Grid repeat() Operate — SitePoint

How you can Use the CSS Grid repeat() Operate — SitePoint


On this article, we’ll discover all the chances of the CSS Grid repeat() perform, which permits us to effectively create patterns of Grid columns and rows, and even to create responsive layouts with out media queries.

Desk of Contents
  1. Don’t repeat() Your self
  2. Choices for the repeat() Operate
  3. Utilizing Size Values with repeat()
  4. Utilizing the min-content Key phrase with repeat()
  5. Utilizing the max-content Key phrase with repeat()
  6. Utilizing the auto Key phrase with repeat()
  7. Utilizing the minmax() Operate with repeat()
  8. Utilizing the fit-content() perform with repeat()
  9. Utilizing Named Strains with repeat()
  10. Utilizing repeat() with auto-fit and auto-fill
  11. Utilizing repeat() with auto-fit/auto-fill, minmax() and min()
  12. Understanding the Distinction between auto-fit and auto-fill
  13. Helpful Issues to Learn about repeat()
  14. Wrapping Up

Don’t repeat() Your self

The grid-template-columns and grid-template-rows properties permit us to explicitly set the variety of rows and columns we wish in a grid, and to specify how they need to be sized. This could turn out to be repetitive if we wish a number of rows and/or columns to be sized the identical approach.

The repeat() perform can save us from having to repeat ourselves. For instance, we’d discover ourselves penning this:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

As a substitute, we will write this:

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

Within the instance above, the repeat() perform lets us specify what number of columns we wish (5), and what dimension they need to all be (1fr — or one fraction of the accessible area).

This makes our code extra environment friendly and simpler to learn. And that is only a easy instance. As we’ll see under, there’s much more we will do with the repeat() perform.

The next Pen reveals a easy demo of the code above. An article containing ten divs is organized into 5 columns.

The demo above makes use of the CSS hole property. To be taught extra about grid structure, try our newbie’s information to CSS Grid.

Choices for the repeat() Operate

We are able to really do rather a lot contained in the parentheses of repeat(). It takes two arguments, separated by a comma. The primary represents the “depend”, and the second represents the “tracks”: repeat(<depend>, <tracks>). (The phrase “observe” is a generic title for a column or a row.)

The depend argument may be certainly one of three issues:

Clearly, a quantity worth units a selected variety of tracks. However auto-fit and auto-fill permit for various numbers of tracks relying on the accessible area. This makes them very useful for responsive layouts with out media queries. We’ll discover them intimately under.

The tracks argument specifies the tracks that can be repeated. These are the choices for this argument:

As you’ll be able to see, there are many attainable choices for this argument, and so they can begin to look a bit complicated, particularly when a number of of them are mixed. We’ll attempt to hold issues pretty easy right here in order that we don’t get misplaced within the weeds. In most circumstances, the tracks argument is pretty easy and intuitive.

Setting Teams of Columns with repeat()

Earlier than we discover the varied arguments that can be utilized with repeat(), it’s value noting that repeat() can be utilized to create patterns of columns.

For instance, think about this “longhand” code for a six-column grid:

article {
  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;

We are able to rewrite this like so, utilizing repeat():

article {
  grid-template-columns: repeat(3, 1fr 2fr);

This tells the browser to repeat a sample thrice — of a column 1fr huge, adopted by a column 2fr huge. The demo under reveals this in motion.

Utilizing Size Values with repeat()

We’ve already seen a size worth of 1fr used with repeat(). The benefit of the fr unit is that it sizes tracks in keeping with the accessible area with out us having to fret about how a lot area is on the market. However we will additionally use different size items the place we’d like them.

For instance, let’s set three column tracks and provides them a width of 120 pixels:

article {
  grid-template-columns: repeat(3, 120px);

The next CodePen demo reveals the outcome.

The columns now have a set width, which received’t change even when the container is simply too slender. Attempt enjoying round with the browser width within the Pen above. Additionally strive swapping pixels for different size items, reminiscent of 5em, 10ch, 15%, and so forth, to see their impact.

Utilizing the min-content Key phrase with repeat()

The min-content key phrase units a observe to be solely as huge or tall as its minimal content material. Within the demo under, we’ve got three columns, every of which is about to min-content, so every column is as huge because the longest phrase it comprises:

article {
  grid-template-columns: repeat(3, min-content);

Utilizing the max-content Key phrase with repeat()

The max-content key phrase principally does the alternative of min-content: it bases the observe dimension on the most important quantity of content material in a grid cell. Within the demo under, the column widths are based mostly on the cell with the most important quantity of content material:

article {
  grid-template-columns: repeat(3, max-content);

Utilizing the auto Key phrase with repeat()

When used with repeat(), the auto key phrase maxes out at max-content and minutes out at min-content.

Think about the next sample of columns:

article {
  grid-template-columns: repeat(3, auto 1fr);

Right here, we’ll have six columns, every odd-numbered one set to a width of auto. Within the CodePen demo under, we will see that, the place there’s sufficient area, the divs with “auto” textual content max out at max-content, and the 1fr divs share the remaining area. Because the browser narrows, the auto columns proceed to get narrower till they attain the min-content threshold.

Within the demo above, the divs solely begin to overflow the container as soon as every column has reached its min-content threshold. (That’s, the textual content can’t wrap any additional.)

Be aware: auto solely appears to behave as described above when blended with different values. By itself — reminiscent of repeat(3, auto) — it behaves identical to we’re setting repeat(3, 1fr).

Utilizing the minmax() Operate with repeat()

The minmax() perform takes two arguments of its personal — a minimal and most worth, separated by a comma. So with minmax(), we will set a variety of attainable sizes for tracks in a versatile setting.

For instance, we might set a column to minmax(40px, 100px), which suggests its minimal attainable width is 40px and its most attainable width is 100px.

Each arguments of minmax() can take size values like fr, px, em, % and ch, in addition to min-content, max-content and auto. Nevertheless, it’s finest to make use of a size worth for a minimum of one argument, because the key phrases aren’t presupposed to work as each arguments (though I discover this typically does work — reminiscent of minmax(min-content, max-content)).

The next code units 5 columns, every with a minimal width of 60px and a most width of 1fr:

article {
  grid-template-columns: repeat(5, minmax(60px, 1fr));

This works properly till the minimal width of 60px is reached. After that time, the content material begins to hang around of its container. We’ll see tips on how to get a greater outcome quickly.

Utilizing the minmax() perform with min() or max()

The minmax() perform may have both the min() or max() perform as an argument. These each take two values. The min() perform applies whichever is the smaller of its two values, and the max() perform applies whichever is the bigger worth. That is helpful in responsive environments.

For instance:

article {
  grid-template-columns: repeat(5, minmax(min(60px, 8vw), 1fr));

The code above units 5 columns. On huge browsers, the 5 columns will all be equally spaced at 1fr. On narrower units, the columns will get narrower and narrower. They’ll cease shrinking as soon as they hit whichever is the decrease of 60px and 8vw. So we nonetheless can discover ourselves with content material hanging out of the container on slender screens; there’s nonetheless additional to go to be absolutely responsive.

If you happen to’re discovering the mix of minmax(), min() and max() a bit underwhelming at this stage, dangle in there, as their actual energy can be seen under once we meet auto-fit and auto-fill.

Utilizing the fit-content() perform with repeat()

The fit-content() perform takes a single argument, which represents the utmost dimension a observe can develop to. So the observe may be versatile as much as that time. fit-content() can take any size worth, reminiscent of fr, px, em, % and ch.

For instance, if we set three columns and fit-content(120px), the column widths can be responsive up till a width of 120px:

article {
  grid-template-columns: repeat(3, fit-content(120px));

Utilizing Named Strains with repeat()

In Grid structure, the vertical and horizontal traces round tracks are numbered by default. When setting grid-template-columns and grid-template-rows, we can provide names to these traces. This makes it simpler to focus on these traces when putting content material on the grid (as we don’t need to go in and depend the grid traces).

Right here’s a easy instance. The named traces are the bits in sq. brackets ([]):

article {
  grid-template-columns: [sidebar] 300px [content-start] 1fr [content-end];

The code above offers us two columns. The left-most vertical grid line (#1) known as “sidebar”, the center grid line (quantity 2) known as “content-start”, and the ultimate grid line (quantity 3) known as “content-end”.

We are able to additionally used named traces inside our repeat() perform:

article {
  grid-template-columns: repeat(5, [yin] 1fr [yang]);

Which means that every of our columns now has a line to the left known as yin and a line to the best known as yang.

The developer tools showing our grid lines around each track and the named column lines

It may appear to make life harder if every line has the identical title, however we will nonetheless goal them individually. For instance:

  • we will goal the primary yin line with grid-column: yin
  • we will goal the second yin line with grid-column: yin 2
  • we will set a column to span three rows from the second yin line: grid-column: yin 2 / span 3
  • we will set a column to span from the second yin to the top with grid-column: yin 2 / yang -1

Naming traces inside repeat() might be most helpful the place repeat() is blended with different values, like so:

article {
  grid-template-columns: [main-start] auto repeat(5, [yin] 1fr [yang]) [sidebar] 300px [main-end];

Named lines set inside and outside of the repeat function

I received’t delve additional into named traces and tips on how to use them right here, because it’s a separate subject, however you’ll be able to learn extra about named grid traces on MDN.

Utilizing repeat() with auto-fit and auto-fill

The auto-fit and auto-fill key phrases are alternate options to setting a set variety of tracks. They inform the browser to suit as many tracks right into a given area as attainable. For instance:

article {
  grid-template-columns: repeat(auto-fit, 150px);

Within the demo above, divs are set to a width of 150px, and people that may’t match on one line drop to the subsequent. If we alter auto-fit to auto-fill, we received’t see a distinction, as a result of beneath these situations, they each do the identical factor. The variations between them solely turn out to be apparent beneath particular circumstances.

At this level, auto-fit to auto-fill are okay, however nothing particularly flash. It’s after they’re mixed with minmax() and min() that the actual magic begins to occur, so let’s take a look at that subsequent.

Utilizing repeat() with auto-fit/auto-fill, minmax() and min()

If you happen to aren’t in love with repeat() but, the mix of repeat() with auto-fit, minmax() and min() will certainly see Cupid’s arrow pierce your cussed coronary heart. Their mixture lets us create really responsive layouts with out the usage of media queries.

Utilizing auto-fit and minmax() with repeat()

Think about the next CSS:

article {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

On this instance, minmax() units a minimal column width of 200px and a most of 1fr. The demo under reveals this in motion.

Every div have to be a minimum of 200px huge. If there’s additional area to the best (much less that 200 pixels), the divs broaden to fill the area. If we widen the browser, one other div is added to the row as soon as one other 200 pixels of area is on the market. The identical occurs in reverse: as we slender the browser, the final div within the row will drop as soon as there isn’t a minimum of 200px of area for it to suit into. And as soon as it has dropped, the remaining divs broaden to replenish the row.

Once more, if we swap auto-fit for auto-fill, we’ll see the identical conduct.

There’s one limitation with this instance, although. If we make the browser window slender sufficient, we’ll find yourself with a single column. As that column will get narrower than 200px, the divs will begin to overflow their container.

Once minmax reaches its lower limit, the blue divs overflow their container, sticking out to the right

We are able to forestall this overflow from taking place by bringing min() into the combination, so let’s take a look at that subsequent.

Utilizing auto-fit, minmax() and min() with repeat()

We are able to management what occurs at small widths by introducing min(). Let’s replace our code to seem like this:

article {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));

Now there are two choices for the minimal column width. The browser will select whichever is smallest. As soon as the column is narrower than 200px, 100% is the smaller worth, so it prevails. And which means that the one remaining column is now set to width: 100%, so it should proceed to suit properly into its container at ever reducing widths. (Squeeze the browser window down so far as you’ll be able to to see this in observe.)

For a extra real-world demo of utilizing repeat() with auto-fit, minmax() and min(), try the next CodePen demo of a responsive picture gallery. This demo additionally makes use of the aspect-ratio property, which we coated in How you can Use CSS aspect-ratio.

Understanding the Distinction between auto-fit and auto-fill

Within the examples we’ve seen thus far, there seems to be no distinction in any way between auto-fit and auto-fill. The distinction solely seems in sure conditions, which we’ll briefly cowl now.

We’ll strip our demo HTML down in order that there are solely 4 divs, and set the next CSS:

article {
  grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));

The picture under reveals what we get with auto-fill.

The browser leaves space for more divs

The browser is calculating what number of divs might match within the container and is leaving area for them. Every of the present divs is 110px huge, as are the areas left to the best.

Let’s change to auto-fit:

article {
  grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));

The picture under reveals what we get with auto-fit.

The browser fills up the remaining space with the existing divs

With auto-fit, the browser additionally calculates area for extra divs, however then collapses that area right down to zero width and lets the present divs broaden to take up all of the area. Within the picture above, you’ll be able to see that the top column line continues to be numbered 8. The 8 is stacked above grid traces 7, 6 and 5.

So what are we to make of all this? Realistically, in most if not all circumstances we’re going to wish to use auto-fit, as a result of we received’t typically need area to stay empty once we may very well be utilizing it for our content material.

You possibly can mess around with auto-fit and auto-fill in this CodePen demo. Attempt altering auto-fit to auto-fill, and widen and contract the browser to see how they each behave.

Helpful Issues to Learn about repeat()

As famous above, the repeat() perform can be utilized as a part of an extended declaration with grid-template-columns and grid-template-rows. Many of the associates we’ve met right here — size items, min-content, max-content, auto, minmax(), fit-content(), and named traces — work alongside repeat() in addition to inside it. (You possibly can see examples of them working with grid-template-columns and grid-template-rows on MDN.)

Some mixtures aren’t allowed for the observe argument. For instance, we will’t use one thing like repeat(auto-fill, 1fr). auto-fit and versatile items can’t play collectively, as a result of we’d like a set measure in there someplace, reminiscent of minmax(100px, 1fr).

As we’ve seen, the minmax() perform can have both a nested min() or max() perform. It may well additionally comprise certainly one of auto, min-content, max-content, however not two. For instance, we might use minmax(50px, max-content), however not minmax(min-content, max-content) (though, to be sincere, I’ve discovered that a few of these mixtures do appear to work anyway).

The repeat() notation can’t be nested. So we will’t have a repeat() inside a repeat(). However we actually can have repeat() capabilities aspect by aspect — reminiscent of repeat(5, 1fr) 100px repeat(2, 50px).

Wrapping Up

The repeat() perform is an extremely useful gizmo for effectively laying out repeating patterns of grid columns and rows. It may be used to create absolutely responsive layouts with out media queries in only a single line of code.

Typically, you received’t have to get too far down within the weeds with repeat(). Its most spectacular function is summed up in a fundamental instance like this:

repeat(auto-fit, minmax(min(50px, 100%), 1fr))

Make sure that to maintain that line of code in your again pocket, as it should are available very useful.

You possibly can be taught extra in regards to the repeat() perform right here:

For a extra basic introduction to CSS Grid structure, see An Introduction to CSS Grid Layouts.


Supply hyperlink


Please enter your comment!
Please enter your name here