Trung tâm cá nhân
sách gpt4 ai đã đi

Lưới CSS

In lại Tác giả: Technical Little Cat Thời gian cập nhật: 2023-10-29 11:31:03 30 4
mua khóa gpt4 Nike

Có thể tạo lưới CSS mà không cần sử dụng truy vấn phương tiện không?

Trong trường hợp của tôi, tôi có một số lượng phần tử không xác định mà tôi muốn đặt vào lưới và tôi muốn lưới đó bao quanh. Khi sử dụng Flexbox, tôi không thể sắp xếp mọi thứ một cách hợp lý. Tôi cũng muốn tránh một số câu hỏi của giới truyền thông.

Đây là một số mã mẫu :

.lưới {
  Hiển thị: lưới;
  khoảng cách lưới: 10px;
  grid-auto-flow: cột;
  lưới-mẫu-cột: 186px 186px 186px 186px;
}

.lưới > * {
  màu nền: xanh lá cây;
  chiều cao: 200px;
}

  
1

  
2

  
3

  
4

Dưới đây là hình ảnh GIF:

Hình ảnh GIF về những gì tôi đang nhìn thấy

Như một lưu ý bên lề, nếu ai đó có thể cho tôi biết cách tránh chỉ định chiều rộng của tất cả các phần tử như tôi sẽ sử dụng lưới-mẫu-cột Điều đó thật tuyệt. Tôi muốn trẻ tự xác định chiều rộng của mình.

1 Câu trả lời

sử dụng tự động điền hoặc tự động phù hợp BẰNG lặp lại() Biểu tượng đối số đầu tiên.

lặp lại() Các ký hiệu biến thể:

lặp lại( [tự động điền | tự động điều chỉnh], [ ? ]+ ? )

tự động điền

Khi tự động điền được đưa ra như là số lặp lại, nếu gridcontainer có chắc chắn kích thước hoặc kích thước tối đa trên trục có liên quan, thì số lần lặp lại là số nguyên dương lớn nhất có thể mà không khiến lưới tràn khỏi vùng chứa lưới của nó.

https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill

.lưới {
  Hiển thị: lưới;
  khoảng cách lưới: 10px;
  grid-template-columns: lặp lại(tự động điền, 186px);
}

.lưới>* {
  màu nền: xanh lá cây;
  chiều cao: 200px;
}

  
1

  
2

  
3

  
4

Lưới sẽ lặp lại nhiều bản nhạc nhất có thể mà không làm tràn vùng chứa.

Sử dụng tự động điền làm số lần lặp lại của ký hiệu repeat()

Trong trường hợp này, đưa ra ví dụ trên(Xem hình ảnh), chỉ có 5 bản nhạc có thể vừa với ô lưới chứa mà không bị tràn. Chúng ta chỉ có 4 phần tử trong lưới, vì vậy phần tử thứ năm được tạo thành một đường dẫn trống trong không gian còn lại.

Phần không gian còn lại, rãnh số 6, kết thúc lưới rõ ràng. Điều này có nghĩa là không có đủ chỗ cho một bản nhạc khác.

tự động phù hợp

Các tự động phù hợp từ khóa hoạt động giống như tự động điền, ngoại trừ sau đó vị trí mục lưới Bất kỳ bản nhạc nào bị lặp lại và trống sẽ bị thu gọn.

https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fit

.lưới {
  Hiển thị: lưới;
  khoảng cách lưới: 10px;
  grid-template-columns: lặp lại(tự động điều chỉnh, 186px);
}

.lưới>* {
  màu nền: xanh lá cây;
  chiều cao: 200px;
}

  
1

  
2

  
3

  
4

Lưới vẫn sẽ lặp lại nhiều bản nhạc nhất có thể mà không làm tràn vùng chứa của nó, nhưng các bản nhạc trống sẽ được thu gọn lại thành 0 .

Các quỹ đạo gấp được coi là có chức năng kích thước quỹ đạo cố định 0px .

Sử dụng auto-fit làm số lần lặp lại của ký hiệu repeat()

Khác với tự động điềnVí dụ hình ảnh, rãnh thứ năm trống bị thu gọn, kết thúc lưới rõ ràng sau phần tử thứ 4.

tự động điềnsự tương phảntự động phù hợp

khi minmax() , sự khác biệt giữa hai điều này là rõ ràng. Sử dụng các hàm.

sử dụng minmax(186px, 1fr)Thay đổi phạm vi phần tử từ 186pxđến phần không gian còn lại trong lưới chứa .

sử dụng tự động điền , các phần tử sẽ phát triển ngay khi không còn chỗ cho một đường dẫn trống.

.lưới {
  Hiển thị: lưới;
  khoảng cách lưới: 10px;
  grid-template-columns: lặp lại(tự động điền, minmax(186px, 1fr));
}

.lưới>* {
  màu nền: xanh lá cây;
  chiều cao: 200px;
}

  
1

  
2

  
3

  
4

sử dụng tự động phù hợp , phần tử sẽ phát triển để lấp đầy khoảng trống còn lại, vì tất cả các rãnh trống sẽ được thu gọn lại 0px .

.lưới {
  Hiển thị: lưới;
  khoảng cách lưới: 10px;
  grid-template-columns: lặp lại(tự động điều chỉnh, minmax(186px, 1fr));
}

.lưới>* {
  màu nền: xanh lá cây;
  chiều cao: 200px;
}

  
1

  
2

  
3

  
4

Sân chơi:

Mã Bút

Kiểm tra Tự động điền theo dõi

tự động điền

Kiểm tra Tự động điều chỉnh theo dõi

tự động phù hợp

Liên quan đến HTML - CSS Grid Wrap, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/43129360/

30 4 0
Bài viết được đề xuất: Tại sao tôi không thể ghi vào đầu vào chuẩn của thiết bị đầu cuối của tôi từ một thiết bị đầu cuối khác?
Bài viết được đề xuất: Giới hạn lặp lại nền CSS (Nhiều hình nền)
Bài viết được đề xuất: JAVA_HOME phải trỏ đến JDK chứ không phải JRE, ngay cả khi nó trỏ đến JDK
Bài viết được đề xuất: Hai phần tử khối nội tuyến - không có luồng khi thay đổi kích thước
Công nghệ mèo con
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com