Khi nào tôi nên sử dụng CSS Grid?

Question

Bạn đã bao giờ gặp sự cố khi định vị các mục trên trình duyệt web của mình chưa?

Nếu vậy, hãy tiếp tục theo dõi khi tôi tiết lộ một phương pháp mới để giải quyết các loại vấn đề này mà không gây căng thẳng hoặc tối thiểu

Chào mừng các bạn. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng bố cục lưới CSS

Đầu tiên chúng ta sẽ tìm hiểu CSS Grid là gì và nó có nghĩa là gì. Sau đó, chúng ta sẽ đi qua các tính năng của lưới CSS, lý do tại sao chúng ta nên nghiên cứu nó và những lợi ích mà nó mang lại cho các dự án của chúng ta. Cuối cùng, chúng ta sẽ thảo luận khi nào thì tốt nhất để sử dụng nó

Lưới CSS là gì?

Vậy Lưới CSS là gì?

Lưới CSS là bố cục hai chiều mà bạn có thể sử dụng để tạo các mục đáp ứng trên web. Các mục Lưới được sắp xếp theo cột và bạn có thể dễ dàng định vị các hàng mà không cần phải loay hoay với mã HTML

Đây là một định nghĩa ngắn gọn về bố cục Lưới CSS

CSS Grid là một công cụ mạnh mẽ cho phép tạo bố cục hai chiều cho các cột và hàng trên web. (Nguồn)

Các tính năng của Bố cục lưới CSS

Kích thước theo dõi linh hoạt

Bạn có thể sử dụng đơn vị

grid-template-column: 100px auto 100px;

0 (Đơn vị phân số) để gán bất kỳ giá trị pixel cụ thể nào cho lưới. Điều này sẽ làm cho lưới của bạn có tổ chức và đáp ứng

Vị trí mục

Lưới CSS đã giúp việc định vị các mục trong vùng chứa ở bất kỳ khu vực nào bạn muốn dễ dàng hơn nhiều mà không phải loay hoay với đánh dấu HTML

Điều khiển căn chỉnh

Căn chỉnh phần tử/mục trong vùng chứa dễ dàng hơn bao giờ hết với CSS Grid. Trong vùng chứa, bây giờ bạn có thể sắp xếp các phần tử/mục theo chiều ngang và chiều dọc theo ý muốn

Lợi ích của Lưới CSS

CSS Grid rất linh hoạt và phản hồi nhanh. Nó giúp dễ dàng tạo bố cục hai chiều. CSS Grid cũng dễ sử dụng và được hầu hết các trình duyệt web hỗ trợ

Lưới CSS làm cho đánh dấu của bạn sạch hơn (trong mã HTML của bạn) và giúp bạn linh hoạt hơn rất nhiều. Điều này một phần là do bạn không phải thay đổi đánh dấu (mã HTML) để thay đổi vị trí của một mục bằng cách sử dụng lưới CSS

Nói chung, Bố cục lưới CSS giúp chúng tôi xây dựng bố cục phức tạp hơn bằng cách sử dụng cả cột và hàng

Khi nào bạn nên sử dụng lưới CSS

Mặc dù bạn có thể sử dụng CSS Grid trong thực tế ở bất kỳ khía cạnh nào của quá trình phát triển web, nhưng có một số tình huống nhất định khi nó là lý tưởng.

Ví dụ: khi chúng ta có một bố cục thiết kế phức tạp cần triển khai, thì CSS Grid sẽ tốt hơn thuộc tính float của CSS. Điều này là do Lưới là bố cục hai chiều (có cột và hàng), trong khi thuộc tính float CSS là bố cục một chiều (có cột hoặc hàng)

Lưới cũng là một lựa chọn tốt khi chúng ta cần khoảng cách hoặc khoảng cách giữa các phần tử. Bằng cách sử dụng thuộc tính lưới CSS

grid-template-column: 100px auto 100px;

1, khoảng cách của hai phần tử sẽ dễ dàng hơn nhiều so với việc sử dụng thuộc tính CSS

grid-template-column: 100px auto 100px;

2 và

grid-template-column: 100px auto 100px;

3 có thể khiến mọi thứ trở nên phức tạp

Thuộc tính lưới CSS

Bố cục lưới CSS bao gồm nhiều thuộc tính lưới. Bây giờ chúng ta sẽ xem xét một số trong số chúng để chúng ta có thể học cách sử dụng chúng

Thuộc tính vùng chứa lưới

Đây là thuộc tính lưới CSS chứa các mục/phần tử lưới. Chúng tôi triển khai thuộc tính bộ chứa lưới CSS bằng cách đặt bộ chứa thành thuộc tính

grid-template-column: 100px auto 100px;

4 của

grid-template-column: 100px auto 100px;

5 hoặc

grid-template-column: 100px auto 100px;

6

Ví dụ

display: grid;

hoặc là

________số 8_______

Thuộc tính lưới-mẫu-cột

Đây là một thuộc tính được sử dụng để đặt chiều rộng của mỗi cột. Nó cũng có thể xác định số lượng cột bạn muốn đặt cho dự án của mình

Bạn có thể triển khai thuộc tính cột lưới CSS bằng cách sử dụng

grid-template-column: 100px auto 100px;

7

Ví dụ

grid-template-column: 100px auto 100px;

Đoạn mã trên cho thấy chúng ta có ba cột. Chiều rộng của cột một (cột đầu tiên) và ba (cột thứ ba) được đặt thành

grid-template-column: 100px auto 100px;

8. Chiều rộng của cột hai (cột ở giữa) được đặt thành

grid-template-column: 100px auto 100px;

9

Điều này có nghĩa là khi kích thước màn hình của bạn tăng lên, cột một và ba sẽ chiếm

grid-template-column: 100px auto 100px;

8 chiều rộng màn hình, trong khi cột hai chiếm chiều rộng còn lại của màn hình (là

grid-template-column: 100px auto 100px;

9)

Thuộc tính lưới-mẫu-hàng

Bạn sử dụng thuộc tính hàng CSS để đặt chiều cao của mỗi cột. Bạn cũng có thể sử dụng nó để xác định số hàng bạn muốn đặt trong dự án của mình

Bạn có thể triển khai thuộc tính hàng lưới CSS bằng cách sử dụng

grid-template-row: 50px 50px;

2, như thế này

grid-template-row: 50px 50px;

Đoạn mã trên cho thấy chúng ta có tổng cộng hai hàng và hai hàng đó có chiều cao là

grid-template-row: 50px 50px;

3

Lưu ý rằng chúng ta cũng có thể gán thuộc tính cột và hàng cho mã HTML của mình cùng một lúc bằng cách sử dụng đơn giản là sử dụng

grid-template-row: 50px 50px;

4.

grid-template-row: 50px 50px;

5 là một cách khác để biểu diễn

grid-template-row: 50px 50px;

6 và

grid-template-row: 50px 50px;

2

Ví dụ

 grid-template: 50px 50px / 100px auto 100px;

Đoạn mã trên sẽ cho bạn kết quả tương tự như

grid-template-column: 100px auto 100px;

7 và

grid-template-row: 50px 50px;

2

Để sử dụng thuộc tính

 grid-template: 50px 50px / 100px auto 100px;

0, trước tiên bạn phải gán giá trị cho hàng trước khi gán giá trị cho cột, giống như đoạn mã trên.

 grid-template: 50px 50px / 100px auto 100px;

1 dành cho hàng trong khi

 grid-template: 50px 50px / 100px auto 100px;

2 dành cho cột

Một cách để ghi nhớ điều này là nghĩ về chữ L

mẫu lưới

Hãy thử điều này và xem nó cho chính mình

Một đường viền có cột 100px tự động 100px và hàng 50px 50px

Thuộc tính khoảng cách cột

Đúng như tên gọi, đây là thuộc tính lưới gán khoảng cách giữa hai hoặc nhiều cột trong vùng chứa. Bạn có thể làm điều này bằng cách sử dụng thuộc tính

 grid-template: 50px 50px / 100px auto 100px;

3 và gán cho nó một giá trị. Ví dụ

column-gap: 20px;

Từ đoạn mã trên, bạn có thể thấy rằng một khoảng trống của

 grid-template: 50px 50px / 100px auto 100px;

4 đã được gán cho cột

khoảng cách cột 20px

Thuộc tính khoảng cách hàng

Cũng giống như

 grid-template: 50px 50px / 100px auto 100px;

3,

 grid-template: 50px 50px / 100px auto 100px;

6 là thuộc tính CSS gán khoảng cách giữa hai hoặc nhiều hàng trong vùng chứa. Ví dụ

______33_______

khoảng cách hàng. 50px;

Lưu ý rằng chúng ta cũng có thể gán khoảng cách cho cả cột và hàng của vùng chứa bằng cách sử dụng thuộc tính

grid-template-column: 100px auto 100px;

1. Để điều này hoạt động, chúng tôi chỉ gán một giá trị cho cả cột và hàng của vùng chứa, giống như chúng tôi đã làm trong đoạn mã trên

Đây là một ví dụ

gap: 20px;

khoảng cách. 20px

Từ sơ đồ trên, chúng ta có thể thấy rằng một

grid-template-column: 100px auto 100px;

1 của

 grid-template: 50px 50px / 100px auto 100px;

4 đã được đặt cho cả cột và hàng của vùng chứa khiến chúng cách đều nhau

Thuộc tính Justify-content

Đây là thuộc tính lưới mà bạn sử dụng để định vị các mục (cột và hàng) theo chiều ngang trong vùng chứa. Nó hiển thị cách trình duyệt web định vị các khoảng trống xung quanh các mục (cột và hàng)

Thuộc tính justify-content có sáu giá trị có thể

```
column-gap: 20px;
```
0
```
column-gap: 20px;
```
1
```
column-gap: 20px;
```
2
```
column-gap: 20px;
```
3
```
column-gap: 20px;
```
4
```
column-gap: 20px;
```
5

Bắt đầu

Điều này đặt các mục ở phía bên trái của trình duyệt và có thể được thực thi bằng đoạn mã sau

______44_______

justify-content. bắt đầu;

Kết thúc

Điều này đặt các mục ở phía bên phải của trình duyệt và có thể được thực thi bằng đoạn mã sau

justify-content: end;

justify-content. kết thúc;

Trung tâm

Điều này đặt các mục ở trung tâm của trình duyệt và có thể được thực thi bằng đoạn mã sau

display: in-line grid;

0

justify-content. trung tâm;

không gian xung quanh

Thuộc tính này phân phối đồng đều các mục trong vùng chứa, trong đó mỗi mục trong vùng chứa có một khoảng không gian bằng nhau từ vùng chứa tiếp theo

Mã này có thể được thực thi như thế này

display: in-line grid;

1

justify-content. không gian xung quanh

Khoảng cách giữa

Cũng giống như tài sản

column-gap: 20px;

3,

column-gap: 20px;

4 phân bổ đều các mặt hàng trong thùng chứa, trong đó mỗi mặt hàng trong thùng chứa có một khoảng không gian bằng nhau so với mặt hàng tiếp theo trong thùng chứa. Nó chiếm toàn bộ chiều rộng của container

Mã này có thể được thực thi như thế này

display: in-line grid;

2

justify-content. khoảng cách giữa

Không gian đồng đều

Đúng như tên gọi, thuộc tính này phân phối đồng đều các mục trong vùng chứa, trong đó mỗi mục trong vùng chứa có một khoảng không gian bằng nhau so với mục tiếp theo trong vùng chứa

Mã này có thể được thực thi như thế này

display: in-line grid;

3

justify-content. không gian-đồng đều;

Lưu ý rằng tất cả các thuộc tính

column-gap: 20px;

8 định vị các mục/phần tử của chúng theo chiều ngang. Thử tự làm để hiểu hơn

Căn chỉnh thuộc tính nội dung

column-gap: 20px;

9 ngược lại với

column-gap: 20px;

8. Bạn sử dụng thuộc tính

row-gap: 50px;

1 để định vị các mục theo chiều dọc trong vùng chứa

Cũng giống như

column-gap: 20px;

8, thuộc tính

row-gap: 50px;

1 có sáu giá trị có thể

```
column-gap: 20px;
```
0
```
column-gap: 20px;
```
1
```
column-gap: 20px;
```
2
```
column-gap: 20px;
```
3
```
column-gap: 20px;
```
4
```
column-gap: 20px;
```
5

Bắt đầu

Điều này đặt các mục ở trên cùng của trình duyệt và có thể được thực thi bằng đoạn mã sau

display: in-line grid;

4

căn chỉnh nội dung. bắt đầu;

Kết thúc

Điều này định vị các mục ở dưới cùng của trình duyệt và có thể được thực thi bằng đoạn mã sau

display: in-line grid;

5

căn chỉnh nội dung. kết thúc

Trung tâm

Điều này đặt các mục ở trung tâm của trình duyệt và có thể được thực thi bằng đoạn mã sau

display: in-line grid;

6

căn chỉnh nội dung. trung tâm;

không gian xung quanh

Thuộc tính này phân phối đều các mục dọc theo cạnh của vùng chứa, trong đó mỗi mục trong vùng chứa có một khoảng không gian bằng nhau so với mục tiếp theo theo chiều dọc

Mã này có thể được thực thi như thế này

display: in-line grid;

7

căn chỉnh nội dung. không gian xung quanh

Khoảng cách giữa

Cũng giống như thuộc tính

column-gap: 20px;

3,

gap: 20px;

1 phân bổ đều các mặt hàng trong thùng chứa, trong đó mỗi mặt hàng trong thùng chứa có một khoảng không gian bằng nhau so với mặt hàng tiếp theo trong thùng chứa và chiếm toàn bộ chiều rộng của thùng chứa theo hướng thẳng đứng

Mã này có thể được thực thi như thế này

display: in-line grid;

8

căn chỉnh nội dung. khoảng cách giữa

Không gian đồng đều

Đúng như tên gọi, thuộc tính này phân phối đồng đều các mục trong vùng chứa, trong đó mỗi mục trong vùng chứa có một khoảng cách bằng nhau so với mục tiếp theo theo chiều dọc

Mã này có thể được thực thi như thế này

display: in-line grid;

9

căn chỉnh nội dung. không gian đều

Phần kết luận

Trong bài viết hôm nay, chúng ta đã cùng nhau tìm hiểu CSS Grid Layout là gì, tại sao nên tìm hiểu nó và các thuộc tính của CSS grid.

Cảm ơn bạn đã đọc

Chúc các bạn code vui vẻ

QUẢNG CÁO

Okoro Emmanuel Nzube

Xin chào, tôi lấy bí danh là "Derek". Tôi thành thạo nhiều kỹ năng kỹ thuật mà tôi đã đạt được và tiếp tục trau dồi thông qua quá trình tự học

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm với tư cách là nhà phát triển. Bắt đầu

Tôi có nên sử dụng lưới trong CSS không?

Bố cục lưới CSS vượt trội trong việc chia trang thành các vùng chính hoặc xác định mối quan hệ về kích thước, vị trí và lớp, giữa các phần của điều khiển được tạo từ nguyên mẫu HTML. Like tables, grid layout enables an author to align elements into columns and rows.

Khi nào tôi nên sử dụng lưới so với Flexbox?

Lưới và flexbox. Sự khác biệt cơ bản giữa Bố cục Lưới CSS và Bố cục CSS Flexbox là flexbox được thiết kế để bố trí theo một chiều - một hàng hoặc một cột. Lưới được thiết kế cho bố cục hai chiều - hàng và cột cùng một lúc .

Lưới CSS có lỗi thời không?

Hầu hết là Không . Lưới mới hơn nhiều so với Flexbox và hỗ trợ trình duyệt ít hơn một chút. Đó là lý do tại sao sẽ hoàn toàn hợp lý nếu mọi người đang tự hỏi liệu lưới CSS có ở đây để thay thế Flexbox hay không.

Khi nào nhà phát triển có thể chọn sử dụng CSS Grid thay vì Flexbox để tạo bố cục?

Căn chỉnh. Việc căn chỉnh các phần tử trên trang web có thể được thực hiện theo nhiều cách khác nhau, nhưng CSS Grid và CSS Flexbox là hai trong số các phương pháp phổ biến nhất. Khi so sánh cả hai, sự khác biệt chính là Lưới CSS phù hợp hơn để tạo bố cục hai chiều , trong khi CSS Flexbox phù hợp hơn cho thiết kế một chiều.

programming css