Bố cục lưới CSS: Ký hiệu lặp lại

Lặp lại () là một ký hiệu mà bạn có thể sử dụng với các thuộc tính grid-template-columns và grid-template-rows để làm cho luật của bạn ngắn gọn hơn và dễ hiểu hơn khi tạo một lượng lớn cột hoặc hàng.

Ví dụ: giả sử ta có định nghĩa này cho containers lưới:

.container {
  display: grid;
  grid-gap: 10px 15px;

  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
  grid-template-rows: 100px auto 20% 100px auto 20px;
}

Thay vào đó, ta có thể sử dụng ký hiệu repeat () như thế này để đơn giản hóa:

.container {
  display: grid;
  grid-gap: 10px 15px;

  grid-template-columns: repeat(3, 1fr 2fr);
  grid-template-rows: repeat(2, 100px auto 20%);
}

Giá trị đầu tiên được chuyển để lặp lại () là số lần lặp lại và giá trị thứ hai là các đường lưới cần lặp lại.

Lặp lại () với các dòng được đặt tên

Bạn cũng có thể sử dụng lặp lại với các dòng được đặt tên:

.container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns: repeat(4, [col] 1fr);
  grid-template-rows: repeat(5, [row] 150px);
}

Tương đương với định nghĩa dạng dài sau đây:

.container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns:
    [col] 1fr
    [col] 1fr
    [col] 1fr
    [col] 1fr;
  grid-template-rows:
    [row] 150px
    [row] 150px
    [row] 150px
    [row] 150px
    [row] 150px;
}

Các đường lưới được đặt tên ở cuối các ký hiệu lặp lại sẽ chia sẻ cùng một dòng với dòng tên bắt đầu tiếp theo. Ví dụ, với điều này:

.container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
  grid-template-rows: repeat(5, [row-start] 150px [row-end]);
}

Ta nhận được định nghĩa dạng dài tương đương này:

.container {
  display: grid;
  grid-auto-flow: column dense;

  grid-template-columns:
    [col-start] 1fr
    [col-end col-start] 1fr
    [col-end col-start] 1fr
    [col-end col-start] 1fr [col-end];

  grid-template-rows:
    [row-start] 150px
    [row-end row-start] 150px
    [row-end row-start] 150px
    [row-end row-start] 150px
    [row-end row-start] 150px [row-end];
}

Xem thêm

Tags:

Các tin liên quan

Bố cục lưới CSS: Từ khóa Span
2016-12-21
Bố cục lưới CSS: Giới thiệu
2016-12-15
Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
Các giá trị kế thừa, ban đầu và không đặt cho các thuộc tính CSS
2016-12-10
Tham chiếu bộ chọn CSS
2016-08-18
The: not Pseudo-Class trong CSS
2016-07-06
Hàm CSS attr ()
2016-06-20
Radial Gradients trong CSS
2016-06-13
Ngữ pháp tuyến tính trong CSS
2016-06-12
CSS: so khớp () Pseudo-Class
2016-06-02