# CSS Grid căn bản - Phần 2
## CSS Grid căn bản - Phần 2
*Hình minh họa đẹp xuất sắc từ* [*Vườn Illustration*](https://www.behance.net/gallery/42386173/Tran-Dang-Khoa-Picture-Book) *(có chỉnh sửa)*
Ở [bài viết trước](https://ehkoo.com/bai-viet/can-ban-css-grid-phan-1/), Ehkoo đã giới thiệu với bạn cách sử dụng grid căn bản. Chúng ta đã biết cách tạo một grid, quy định số dòng/cột trong grid, thiết lập khoảng cách giữa các dòng/cột, và sắp xếp các phần tử trong grid theo ý muốn.
Trong bài này, Ehkoo sẽ hướng dẫn bạn một số thuộc tính khác CSS Grid. Bắt đầu nào!
#### Đơn vị kích thước mới trong CSS: `fr`
Chúng ta đã biết cách khai báo một grid bằng cách sử dụng `grid-template-columns` và `grid-template-rows`, như ví dụ sau:
```
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px;
}
```
Bên cạnh việc sử dụng các đơn vị quen thuộc như `px`, `%`, `em`, `rem`...bạn có thể dùng đến `fr`. `fr`, viết tắt của "fraction" (phân số), là một đơn vị kích thước mới được thiết kế dành riêng cho grid. `1fr` tương ứng với một phần trong **không gian trống** của grid container. Chẳng hạn, bạn có thể khai báo một grid có 3 cột như sau:
```
.wrapper {
width: 300px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
```
Tùy vào kích thước của wrapper, `1fr` có thể sẽ có những giá trị khác. Trong trường hợp trên, `1fr` sẽ bằng `300 / 3`(px). Bạn đã thấy tại sao đơn vị này lại có tên là "phân số" chưa?.
> **Ủa vậy nó có gì khác so với %?**
Điểm khác biệt ở đây đã được in đậm ở trên, `fr` dựa vào **không gian trống** của grid container. Hãy xem ví dụ sau:
```
.wrapper {
width: 500px;
display: grid;
grid-template-columns: 1fr 50px 1fr;
grid-template-rows: 100px 100px;
}
```
Vì chúng ta đã quy định chiều rộng của cột thứ hai là `50px`, nên chiều rộng của phần không gian trống là `500 - 50 = 450px`. Vậy `1fr` sẽ có giá trị là `450 / 2`(px).
#### Kí hiệu `repeat()`
Nếu grid của bạn có nhiều hàng/cột có chiều dài giống nhau, bạn có thể dùng kí hiệu `repeat()` để khai báo nhanh hơn. Chẳng hạn như:
```
.wrapper {
display: grid;
grid-gap: 1rem 1rem;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(2, 50px);
}
```
Ở trên chúng ta khai báo một grid có 10 cột, mỗi cột có kích thước `1fr`, và 2 dòng có kích thước `50px`. Và kết quả là:
Bạn cũng có thể dùng lẫn lộn `repeat()` như thế này.
```
.wrapper {
display: grid;
grid-gap: 1rem 1rem;
grid-template-columns: 100px repeat(10, 1fr) 100px;
grid-template-rows: repeat(2, 50px);
}
```
Kết quả là chúng ta sẽ có một grid 12 cột, với cột đầu tiên và cuối cùng có chiều rộng `100px`, các cột giữa thì có kích thước `1fr`.
#### Canh chỉnh các phần tử của grid
Để canh chỉnh *nội dung* của các phần tử trong grid, chúng ta sử dụng 2 thuộc tính liên quan đến `items`: `align-items` và `justify-items`.
```
.wrapper {
align-items: start | end | center | stretch (mặc định);
justify-items: start | end | center | stretch (mặc định);
}
```
`align-items` giúp bạn chỉnh nội dung bên trong grid theo trục tung (trục y), trong khi `justify-items` sẽ chỉnh nội dung theo trục hoành (trục x). Để hiểu thêm về các giá trị của hai thuộc tính này, bạn có thể thử qua demo dưới đây.
Bạn có thể dùng thuộc tính `place-items` để viết nhanh `align-items` và `justify-items` làm một.
```
.wrapper {
place-items: ;
}
```
Một trường hợp khác, giả sử bạn có một grid như sau:
```
.wrapper {
width: 600px;
height: 200px;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
```
Trong trường hợp này, các phần tử của grid chỉ chiếm `300px` chiều rộng và `100px` chiều cao, không lấp đầy container. Chúng ta có thể canh chỉnh cách phân phối của các phần tử bằng 2 thuộc tính: `align-content` và `justify-content`.
```
.wrapper {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
```
Cũng tương tự như trên, `align-content` sẽ phân phối phần tử theo trục tung, trong khi `justify-content` sẽ phân phối theo trục hoành. Trăm nghe không bằng một demo:
Bạn cũng có thể dùng `place-content` như là cách viết ngắn gọn của `align-content` và `justify-content`.
```
.wrapper {
place-items: ;
}
```
Cuối cùng, để tác động đến một phần tử đơn lẻ, bạn có thể dùng:
```
.item {
align-self: start | end | center | stretch;
justify-self: start | end | center | stretch;
}
```
#### Kết
Chúng ta đã đi qua những thuộc tính quan trọng nhất khi làm việc với CSS Grid. Vẫn còn những thuộc tính như `grid-template-areas`, `grid-auto-flow`, `grid-auto-columns` hay `grid-auto-rows` nhưng Ehkoo sẽ để bạn tự khám phá. Bài viết tới chúng ta sẽ xem một vài ứng dụng nâng cao của CSS Grid nhé.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://learncss.gitbook.io/cssadvand/css-grid-can-ban-phan-2.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.