Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use css repeat() function, Xiaobian think it is very practical, so share it with you as a reference, I hope you can gain something after reading this article.

repeat()

The repeat function is used to batch process meshes and takes two parameters, the first representing the number of executions and the second representing the length. See the following example

test1 3 test2 23 test3 444 .repeat-wrapper { margin-top: 100px; display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 10px; }

effect

grid-template-columns: repeat(3, 100px) is equivalent to grid-template-columns: 100 px 100px;

auto-fill,auto-fit

In addition to the first parameter indicating the specific number of times, repeat also receives these parameters auto-fill,auto-fit. Let's talk about the concept of these two parameters.

auto-fill

Auto-fill means that the browser automatically fills in the number of times based on the item. When the container is wide, the width of the remaining cells is automatically set aside. If the mesh container has a definite size or maximum size on the relevant axis, the number of repetitions is the largest possible positive integer that does not cause the mesh to overflow its mesh container.

test1 3 test2 23 test3 444 test3 4444 test3 444 test3 444 grid-template-columns: repeat(auto-fill, minmax(100px,1fr));

effect

auto-fit

Auto-fit is also calculated automatically, but unlike auto-fill, auto-fit does not retain the remaining spaces, but redistributes the remaining spaces of auto-fill to each cell. See the following example

test1 3 test2 23 test3 444 test3 4444 test3 444 test3 444 grid-template-columns: repeat(auto-fit, minmax(100px,1fr));

effect

compatibility

The latest versions of mainstream browsers are basically able to support, still do not support ie.

About "how to use css repeat() function" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.