Hàm repeat() trong CSS

Định nghĩa và cách sử dụng

CSS repeat() Hàm được sử dụng để lặp lại một nhóm cột hoặc hàng trong lưới.

Nếu lưới của bạn có rất nhiều hàng hoặc cột, hàm này rất hữu ích. Bằng cách này, bạn có thể tạo ra một "mô hình lặp lại" để sử dụng.

Hàm này tương ứng với grid-template-columns Thuộc tính và grid-template-rows Sử dụng cùng với các thuộc tính.

Mô hình

Ví dụ 1

Sử dụng repeat() Lặp lại một nhóm cột trong lưới:

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Thử trực tiếp

Ví dụ 2

Sử dụng repeat() Lặp lại một nhóm cột trong lưới:

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Thử trực tiếp

Ngữ pháp CSS

repeat(repeat-count, tracks)
Giá trị Mô tả
repeat-counts

Bắt buộc. Định nghĩa số lần lặp lại của cột hoặc hàng.

Có thể là số nguyên lớn hơn 1 hoặc từ khóa auto-fill hoặc auto-fit (họ sẽ lặp lại cột/hàng theo nhu cầu để lấp đầy khung chứa).
tracks

Bắt buộc. Định nghĩa các cột hoặc hàng cần lặp lại. Có thể sử dụng các giá trị sau:

  • Giá trị độ dài (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Tên đường

Chi tiết kỹ thuật

Phiên bản: Module CSS Grid Layout Level 2

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ hàm này.

Chrome Edge Firefox Safari Opera
57 16 76 10.1 44

Trang liên quan

Tham khảo:Thuộc tính CSS grid-template-columns

Tham khảo:Thuộc tính CSS grid-template-rows