Trong bài này, bạn sẽ tìm hiểu các thuộc tính viết tắt của CSS Grid. Hiện tại, CSS có 5 thuộc tính viết tắt:

  • place-content
  • place-items
  • place-self
  • grid-template
  • gap/grid-gap

Trước khi tìm hiểu về các thuộc tính đặc biệt này của CSS Grid, bạn hãy chắc chắn đã hiểu rõ cách hoạt động của CSS Grid nhé. Bạn có thể tìm hiểu thêm tại các bài học sau:

place-content

place-content là thuộc tính gộp của align-content và justify-content.

Cách dùng:

align-content: center;
justiry-content: start;

/* Tương đương */
place-content: center / start;

place-items

place-items là thuộc tính gộp của align-itemsvà justify-items.

Cách dùng:

align-items: center;
justiry-items: start;

/* Tương đương */
place-items: center / start;

place-self

place-self là thuộc tính gộp của align-self và justify-self.

Cách dùng:

align-self: center;
justiry-self: start;

/* Tương đương */
place-self: center / start;

grid-template

grid-template là thuộc tính gộp của grid-template-rows và grid-template-columns.

Cách dùng:

grid-template-rows: 100px 200px;
grid-template-columns: 150px 250px;

/* Tương đương */
grid-template: 100px 200px / 150px 250px;

gap / grid-gap

gap là thuộc tính gộp của gap-row và gap-column. grid-gap là cách viết khác của gap và có tác dụng hoàn toàn tương tự.

Cách dùng (lưu ý không có dấu /):

row-gap : 20px ; 
column-gap : 30px ;

/* Tương đương */
gap : 20px  30px;

Tạm kết

Chúc mừng bạn, bạn đã hoàn thành tất cả bài học về CSS Grid. Quay lại với dự án của mình và áp dụng CSS Grid vào thực hành ngay thôi.