grid-column-end
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
Thuộc tính grid-column-end CSS chỉ định vị trí kết thúc của một phần tử lưới bên trong cột lưới bằng cách đóng góp một đường, một khoảng mở rộng (span), hoặc không có gì (tự động) vào vị trí lưới của nó, từ đó xác định cạnh kết thúc theo chiều khối của vùng lưới tương ứng.
Try it
grid-column-end: auto;
grid-column-end: 3;
grid-column-end: -1;
grid-column-end: span 3;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">One</div>
<div>Two</div>
<div>Three</div>
</div>
</section>
.example-container {
border: 1px solid #c5c5c5;
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: repeat(3, minmax(40px, auto));
grid-gap: 10px;
width: 200px;
}
.example-container > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
}
#example-element {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
}
Cú pháp
/* Giá trị từ khóa */
grid-column-end: auto;
/* Giá trị <custom-ident> */
grid-column-end: some-grid-area;
/* Giá trị <integer> + <custom-ident> */
grid-column-end: 2;
grid-column-end: some-grid-area 4;
/* Giá trị span + <integer> + <custom-ident> */
grid-column-end: span 3;
grid-column-end: span some-grid-area;
grid-column-end: 5 some-grid-area span;
/* Giá trị toàn cục */
grid-column-end: inherit;
grid-column-end: initial;
grid-column-end: revert;
grid-column-end: revert-layer;
grid-column-end: unset;
Giá trị
auto-
Không đóng góp gì vào vị trí của phần tử lưới, cho biết tự động đặt vị trí, khoảng mở rộng tự động, hoặc khoảng mở rộng mặc định là
1. Đây là giá trị mặc định. <custom-ident>-
Đóng góp đường đầu tiên vào vị trí của phần tử lưới nếu có một đường được đặt tên với tên
<custom-ident>-end.Note: Các vùng lưới được đặt tên tự động tạo ra các đường được đặt tên ẩn theo dạng này, vì vậy việc chỉ định
grid-column-end: foo;sẽ chọn cạnh kết thúc của vùng lưới được đặt tên đó (trừ khi một đường khác có tênfoo-endđược chỉ định rõ ràng trước đó).Ngược lại, điều này được xử lý như thể số nguyên
1đã được chỉ định cùng với<custom-ident>. <integer> && <custom-ident>?-
Đóng góp đường lưới thứ n vào vị trí của phần tử lưới. Nếu một số nguyên âm được cho, nó sẽ đếm ngược, bắt đầu từ cạnh kết thúc của lưới tường minh.
Nếu một tên được cho dưới dạng <custom-ident>, chỉ các đường có tên đó mới được tính. Nếu không đủ đường có tên đó tồn tại, tất cả các đường lưới ẩn được giả định có tên đó để tìm vị trí này.
Giá trị
<integer>là0không hợp lệ. span && [ <integer> || <custom-ident> ]-
Đóng góp một khoảng mở rộng lưới vào vị trí của phần tử lưới sao cho cạnh kết thúc theo cột của vùng lưới của phần tử đó cách n đường so với cạnh bắt đầu.
Nếu một tên được cho dưới dạng <custom-ident>, chỉ các đường có tên đó mới được tính. Nếu không đủ đường có tên đó tồn tại, tất cả các đường lưới ẩn ở phía của lưới tường minh tương ứng với hướng tìm kiếm được giả định có tên đó để đếm khoảng mở rộng này.
Nếu <integer> bị bỏ qua, nó mặc định là
1. Số nguyên âm hoặc 0 không hợp lệ.<custom-ident>không thể nhận các giá trịspanvàauto.
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | grid items and absolutely-positioned boxes whose containing block is a grid container |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
grid-column-end =
<grid-line>
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
<integer> =
<number-token>
Ví dụ
Đặt vị trí kết thúc cột cho phần tử lưới
HTML
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
</div>
CSS
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Grid Layout Module Level 2 # line-placement |