CSS Grid Items

Tiếp nối trong series bài viết tìm hiểu về CSS grid, ở bài thứ 3 này chúng ta sẽ tìm hiểu về các phần tử con của grid Container – grid Items.

Nội dung series bài viết CSS Grid:

• Tổng quan về CSS Grid
• CSS Grid: Container
• CSS Grid: Items
• CSS Grid: một số hàm và ví dụ thực tế

Trước khi tìm hiểu chi tiết về grid item, chúng ta sẽ nhắc lại một chút về định nghĩa của grid item.

Grid item là gì?

Phần tử này là phần tử con nằm trong container. Trong ví dụ bên dưới, phần tử lớp item chính là grid item, còn sub-item thì không phải nhé.

<div class="container">
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Thuộc tính của grid items

grid-column-start / grid-column-end / grid-row-start / grid-row-end

Các thuộc tính này sẽ xác định tọa độ của một grid item dựa trên vị trí các cột và hàng grid line.

Giá trị:

• <line>: số thứ tự hoặc tên của grid line.
• span <number>: số lượng grid track mà item này chứa.
• span <name>: item chứa các grid track đến tiếp giáp với grid line <name>.
• auto: Tự động sắp xếp.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

Ví dụ bên dưới, item-a sẽ bắt đầu từ cột thứ 2, kéo dài đến cột tên “five”. Bắt đầu từ hàng tên “row1-start”, kết thúc tại hàng số 3.

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

Tiếp tục với ví dụ sau, item-b sẽ bắt đầu từ cột đầu tiên, kéo dài đến khi gặp cột tên “col4-start“; kéo dài từ hàng thứ 2 đến thêm 2 hàng nữa.

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

Lưu ý: nếu các bạn không khai báo thuộc tính grid-column-end vàgrid-row-end thì độ dài của mỗi cell mặc định là 1 grid track.

grid-column / grid-row

Đây là thuộc tính rút gọn của grid-column-start / grid-column-end và grid-row-start / grid-row-end.

Giá trị:

• <start-line> / <end-line>: cú pháp tương đương với grid-(column/row)-(start/end). Sử dụng / phân chia start và end.

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

Ví dụ , item-c sẽ bắt đầu ở cột thứ 3, chiếm 2 ô grid track; bắt đầu ở hàng “third-line”, kết thúc ở hàng thứ 4:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

Tương tự, nếu các bạn không khai báo giá trị kết thúc, item mặc định sẽ có độ dài 1 grid track.

grid-area

Dùng để định 1 iteam theo tên đã khai báo ở thuộc tính grid-template-areas. Ngoài ra, nếu không dùng tên thì chúng ta cũng có thể khai báo vị trí tại thuộc tính này.

Giá trị:

• <name>: Tên mà bạn đã dùng.
• <row-start> / <column-start> / <row-end> / <column-end>: Giá trị vị trí tương ứng.

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

Trong ví dụ bên dưới, item-e sử dụng area đã đặt tên “header“, item-d khai báo vị trí từ hàng số 1, cột “col4-start” đến hàng “last-line” và cột số 6.

.item-e {
  grid-area: header;
}
.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

justify-self

Tương tự với thuộc tính justify-items của containter, phạm vi áp dụng tại item.

.item {
  justify-self: start | end | center | stretch;
}

Ví dụ minh họa bên dưới:

.item {
  justify-self: start | end | center | stretch;
}

align-self

Thuộc tính này tương tự justify-self nhưng áp dụng theo chiều dọc. Các bạn tham khảo thêm tại thuộc tính containter: align-items.

place-self

Kết hợp thuộc tính justify-self và align-self. Tương tự thuộc tính place-content nhưng phạm vi áp dụng cho item.

Sau khi kết thúc phần này, chúng ta cơ bản đã có đầy đủ kiến thức về CSS Grid. Các bạn xem một số hàm và ví dụ thực tế khi thiết kế ở phần tiếp theo nhé.