CSS vùng lưới ✅ Đã Test

Thủ Thuật về CSS vùng lưới Mới Nhất

Cao Nguyễn Bảo Phúc đang tìm kiếm từ khóa CSS vùng lưới được Update vào lúc : 2022-12-16 07:25:08 . Với phương châm chia sẻ Mẹo về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi tham khảo tài liệu vẫn ko hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Admin lý giải và hướng dẫn lại nha.

Thuộc tính diện tích s quy hoạnh lưới được sử dụng để chỉ định kích thước và vị trí của mục lưới trong hàng lưới. Nó là một thuộc tính tốc ký cho những thuộc tính sau

Nội dung chính Show

Grid-area property exampleMô tả bố cục với .test grid-area: one; 2Grid-area property exampleQuy tắc sử dụng .test grid-area: one; 2Grid-area property exampleGrid-area property exampleGrid-area property exampleGrid-area property exampleĐịnh dạng chuỗiGrid-area property exampleGrid-area property exampleGiải thích .test grid-area: one; 2 và .test grid-area: one; 8Sử dụng .test grid-area: one; 8 với số dòngSử dụng .test grid-area: one; 8 với IdentsGrid-area property exampleGrid-area property exampleGrid-area property examplePhân lớp những mục khi sử dụng .test grid-area: one; 2Grid-area property exampleSử dụng những khu vực mẫu lưới trong thiết kế đáp ứngkhả năng tiếp cậnBản tóm tắtVùng lưới trong CSS là gì?Làm cách nào để sử dụng khu vực mẫu lưới trong CSS?Diện tích lưới nghĩa là gì?Khu vực mẫu lưới có tốt không?

Thuộc tính grid-area cũng chỉ định tên cho một grid item. Sau đó, những mục lưới được đặt tên hoàn toàn có thể được tham chiếu đến bởi thuộc tính grid-template-areas của vùng chứa lưới

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end / itemname | initial | inherit;

Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

Trong ví dụ sau, chúng tôi áp dụng giá trị "itemname" cho hộp1 chiếm vị trí của tất cả năm cột

Các ví dụ sau gồm có hình ảnh về cách ví dụ sẽ trông ra làm sao trong trình duyệt tương hỗ, mỗi ví dụ link đến một trang có thêm thông tin về kỹ thuật được hiển thị, mã và CodePen của ví dụ. Trừ khi có ghi chú khác, những ví dụ này hoạt động và sinh hoạt giải trí trong bất kỳ trình duyệt nào tương hỗ Thông số kỹ thuật lưới update. Chúng sẽ không hoạt động và sinh hoạt giải trí trong IE10 hoặc 11

Đối với những ví dụ về bố cục trang, hãy xem bộ sưu tập những bố cục trang tại đây

Rachel Andrew là nhà phát triển web, nhà văn và diễn thuyết. Cô ấy là tác giả của một số trong những cuốn sách, gồm có Bố cục CSS mới. Cô ấy là một trong những người dân đứng sau … tin tức thêm về Rachel ↬

Bản tin email

E-Mail (đập vỡ) của bạn

Mẹo hàng tuần về giao diện người tiêu dùng & UX.
Được hơn 200.000 người tin cậy.

Hệ thống thiết kế thành công

Giao diện người tiêu dùng SmashingConf 2023Thử ngay giờ đây

Bắt đầu miễn phí

Lớp học tổng thể về nguyên tắc phổ quát của kiểu chữ với Elliot Jay Stocks

Trong một loạt bài mới, Rachel Andrew chia nhỏ đặc điểm kỹ thuật Bố cục lưới CSS. Lần này, tất cả chúng ta hãy xem cách sử dụng .test grid-area: one; 2 để đặt những mục

Khi sử dụng Bố cục lưới CSS, bạn luôn hoàn toàn có thể đặt những mục từ đường lưới này sang đường lưới khác. Tuy nhiên, có một cách khác để mô tả bố cục của bạn, một cách trực quan về bản chất. Trong nội dung bài viết này, tất cả chúng ta sẽ tìm hiểu cách sử dụng thuộc tính

.test grid-area: one; 2 để xác định vị trí trên lưới và tìm hiểu xem thuộc tính này thực sự hoạt động và sinh hoạt giải trí ra làm sao

Trong trường hợp bạn bỏ lỡ những nội dung bài viết trước trong loạt bài này, bạn hoàn toàn có thể tìm thấy chúng ở đây

Phần 1. Tạo một vùng chứa lướiPhần 2. đường lướiPhần 3. Khu vực mẫu lưới

Mô tả bố cục với .test grid-area: one; 2

Thuộc tính

.test grid-area: one; 2 đồng ý một hoặc nhiều chuỗi làm giá trị. Mỗi chuỗi (được đặt trong dấu ngoặc kép) đại diện cho một hàng của lưới của bạn. Bạn hoàn toàn có thể sử dụng thuộc tính trên lưới mà bạn đã xác định bằng phương pháp sử dụng .test grid-area: one; 6 và .test grid-area: one; 7 hoặc bạn hoàn toàn có thể tạo bố cục của tớ trong trường hợp đó, tất cả những hàng sẽ có kích thước tự động

Thuộc tính và giá trị sau đây mô tả một lưới có bốn vùng — mỗi vùng gồm có hai rãnh cột và hai rãnh hàng. Một khu vực được tạo ra để mở rộng nhiều rãnh bằng phương pháp lặp lại tên trong tất cả những ô mà bạn muốn nó bao trùm

________số 8

Các mục được đặt vào bố cục bằng phương pháp đặt tên có nhận dạng bằng phương pháp sử dụng thuộc tính

.test grid-area: one; 8. Do đó, nếu tôi muốn đặt một phần tử có lớp là .test grid-area: one; 9 vào khu vực của lưới mang tên là Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

10, tôi sử dụng CSS sau.test grid-area: one;

Bạn hoàn toàn có thể thấy điều này đang hoạt động và sinh hoạt giải trí trong ví dụ CodePen hiển thị phía dưới. Tôi có bốn mục (với những lớp từ một đến bốn);

Xem ví dụ về khu vực mẫu lưới mẫu bút đơn giản của Rachel Andrew (@rachelandrew) trên CodePen

Xem ví dụ về khu vực mẫu lưới mẫu bút đơn giản của Rachel Andrew (@rachelandrew) trên CodePen

Nếu bạn sử dụng Trình kiểm tra lưới của Firefox, thì bạn hoàn toàn có thể thấy tên khu vực và đường lưới thể hiện rằng mỗi mục thực sự trải rộng trên hai hàng và hai rãnh cột — tất cả mà không cần thực hiện bất kỳ định vị nhờ vào dòng nào trên chính mục đó

Mỗi mục kéo dãn hai hàng và hai cột

Quy tắc sử dụng .test grid-area: one; 2

Có một vài quy tắc khi tạo bố cục theo cách này. Việc phá vỡ những quy tắc sẽ làm cho giá trị không hợp lệ và do đó bố cục của bạn sẽ không xảy ra. Nguyên tắc đầu tiên là bạn phải mô tả một lưới hoàn hảo nhất, tôi. e. mọi ô trên lưới của bạn phải được lấp đầy

Nếu bạn muốn để lại một ô (hoặc những ô) dưới dạng khoảng chừng trống, bạn thực hiện việc này bằng phương pháp chèn một

Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

13 hoặc một chuỗi ví dụ như Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

14 mà không còn tầm khoảng chừng cách giữa chúng

Do đó, nếu tôi thay đổi giá trị của

.test grid-area: one; 2 như sau Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

1

Bây giờ tôi có hai ô không còn nội dung trong đó. Mục ba chỉ hiển thị ở hàng ở đầu cuối của lưới

Hiện tại có tầm khoảng chừng trắng trong lưới

Bạn chỉ hoàn toàn có thể xác định từng khu vực một lần, nghĩa là bạn không thể sử dụng thuộc tính này để sao chép nội dung vào hai vị trí trên lưới. Vì vậy, giá trị sau sẽ không hợp lệ và khiến toàn bộ thuộc tính bị bỏ qua vì chúng tôi đã nhân đôi khu vực

Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

16.test grid-area: one; 0

Bạn không thể tạo vùng không phải hình chữ nhật, vì vậy thuộc tính không thể được sử dụng để tạo vùng hình chữ 'L' hoặc 'T' — làm cho giá trị sau đây cũng không hợp lệ

.test grid-area: one; 1

Định dạng chuỗi

Tôi muốn hiển thị giá trị của

.test grid-area: one; 2 như tôi có ở trên (với mỗi chuỗi đại diện cho một hàng phía dưới hàng trước đó). Điều này mang lại cho tôi một đại diện trực quan về bố cục sẽ ra làm sao

Để xử lý và xử lý vấn đề này, bạn nên thêm những ký tự khoảng chừng trắng tương hỗ update giữa mỗi ô và cũng sử dụng nhiều ký tự

Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

13 biểu thị những ô trống

Trong giá trị phía dưới, tôi đã sử dụng nhiều ký tự khoảng chừng trắng Một trong những từ nhỏ hơn và cũng luôn có thể có nhiều ký tự

Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

13 để những ô trống thẳng hàng.test grid-area: one; 5

Điều đó nói rằng, việc có tất cả những chuỗi trên một dòng cũng hoàn toàn hợp lệ, vì vậy chúng tôi hoàn toàn có thể viết ví dụ của tớ như sau

.test grid-area: one; 6

Thêm sau khi nhảy. Tiếp tục đọc phía dưới ↓

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người tiêu dùng & giao diện người tiêu dùng, với những bài học kinh nghiệm tay nghề thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên những khối mạng lưới hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác

Chuyển đến hội thảo chiến lược ↬

Giải thích .test grid-area: one; 2 và .test grid-area: one; 8

Lý do mà mỗi khu vực nên phải là một hình chữ nhật hoàn hảo nhất là vì nó nên phải có cùng hình dạng mà bạn hoàn toàn có thể tạo bằng phương pháp sử dụng vị trí nhờ vào đường. Nếu tất cả chúng ta tuân theo ví dụ ở trên, tất cả chúng ta hoàn toàn có thể tạo bố cục này với những đường lưới như trong CodePen tiếp theo. Ở đây tôi đã tạo lưới của tớ như trước. Tuy nhiên, lần này, tôi đã sử dụng những đường lưới để tạo vị trí bằng phương pháp sử dụng những thuộc tính

.test grid-area: one; 02, .test grid-area: one; 03, .test grid-area: one; 04 và .test grid-area: one; 05.

Xem vị trí Pen Grid Line của Rachel Andrew (@rachelandrew) trên CodePen

Xem vị trí Pen Grid Line của Rachel Andrew (@rachelandrew) trên CodePen

Ghi chú. Nếu bạn đã đọc nội dung bài viết trước của tôi “Hiểu CSS Grid. Grid Lines”, bạn sẽ biết rằng hoàn toàn có thể sử dụng

.test grid-area: one; 8 như một cách viết tắt để khai báo cả bốn dòng cùng một lúc

Điều này nghĩa là tất cả chúng ta cũng hoàn toàn có thể tạo bố cục của tớ với thứ tự những dòng sau

.test grid-area: one; 04.test grid-area: one; 02.test grid-area: one; 05.test grid-area: one; 03

.test grid-area: one; 8

Thuộc tính

.test grid-area: one; 8 rất thú vị vì nó hoàn toàn có thể lấy số dòng và tên dòng. Điều quan trọng là phải hiểu cách hoạt động và sinh hoạt giải trí rất khác nhau của nó khi ở mỗi chính sách

Sử dụng .test grid-area: one; 8 với số dòng

Nếu bạn sử dụng thuộc tính

.test grid-area: one; 8 với số dòng, thì những dòng được chỉ định theo thứ tự được mô tả ở trên

Nếu bạn bỏ lỡ bất kỳ giá trị nào — do đó đáp ứng 1, 2 hoặc 3 số dòng — những giá trị bị thiếu được đặt thành

.test grid-area: one; 14, điều đó nghĩa là khu vực sẽ trải rộng trên 1 rãnh (đó là giá trị mặc định). Vì vậy, CSS sau đây sẽ đặt một mục .test grid-area: one; 15 với tất cả những giá trị khác được đặt thành tự động, do đó, mục này sẽ được đặt tự động trong phần theo dõi cột có sẵn đầu tiên và kéo dãn một phần theo dõi hàng và một phần theo dõi cột.test grid-area: one; 4

Sử dụng .test grid-area: one; 8 với Idents

Nếu bạn sử dụng một số trong những nhận dạng (là khu vực được đặt tên được gọi trong Bố cục lưới), thì thuộc tính

.test grid-area: one; 8 cũng luôn có thể có bốn dòng. Nếu bạn đã đặt tên cho những dòng trên lưới của tớ như được mô tả trong phần “Tìm hiểu về lưới CSS. Tạo một Grid Container”, thì bạn hoàn toàn có thể sử dụng những dòng được đặt tên này in như những dòng được đánh số

Tuy nhiên, điều xảy ra khi bạn bỏ lỡ một số trong những dòng sẽ khác với khi bạn sử dụng id chứ không phải số

Dưới đây, tôi đã tạo một lưới có những dòng được đặt tên và sử dụng

.test grid-area: one; 8 để đặt một mục (thiếu giá trị ở đầu cuối)

.test grid-area: one; 8

Điều này nghĩa là chúng tôi đang thiếu tên dòng cho

.test grid-area: one; 03. Thông số kỹ thuật nói rằng trong tình huống này, .test grid-area: one; 03 nên sử dụng bản sao của .test grid-area: one; 02. Nếu .test grid-area: one; 03 và .test grid-area: one; 02 giống hệt nhau, thì dòng kết thúc sẽ bị vô hiệu và về cơ bản, giá trị được đặt thành tự động để chúng tôi mở rộng một rãnh như trong phiên bản được đánh số

Điều tương tự cũng xảy ra nếu tất cả chúng ta bỏ lỡ giá trị thứ ba

.test grid-area: one; 05;

Hãy xem ví dụ CodePen tiếp theo về cách sử dụng từng

.test grid-area: one; 8 và cách điều này sau đó thay đổi bố cục của mục

Xem Pen Missing idents in grid-area của Rachel Andrew (@rachelandrew) trên CodePen

Xem Pen Missing idents in grid-area của Rachel Andrew (@rachelandrew) trên CodePen

Sau đó, điều này lý giải tại sao

.test grid-area: one; 8 hoạt động và sinh hoạt giải trí với một giá trị nhận dạng duy nhất đại diện cho tên khu vực

Khi chúng tôi tạo một khu vực được đặt tên với thuộc tính

.test grid-area: one; 2, cạnh của mỗi khu vực hoàn toàn có thể được tham chiếu bằng tên đường giống với tên khu vực bạn đã sử dụng. Trong trường hợp của chúng tôi, chúng tôi hoàn toàn có thể lấy khu vực của tớ mang tên là Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

10 và đặt mục của chúng tôi bằng phương pháp sử dụng những dòng được đặt tên như sau.test grid-area: one; 0

Nếu dòng là một dòng

.test grid-area: one; 61, thì Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

10 sẽ phân giải thành đầu cuối của cột hoặc hàng. Nếu đó là loại .test grid-area: one; 63, thì Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

10 sẽ phân giải thành dòng ở đầu cuối của cột hoặc hàng

Điều này nghĩa là lúc chúng tôi nói

.test grid-area: one; 65, chúng tôi đã bỏ qua ba giá trị ở đầu cuối cho tốc ký .test grid-area: one; 8;

Cách đặt tên hoạt động và sinh hoạt giải trí trong Bố cục lưới rất thông minh và được cho phép một số trong những điều thú vị mà tôi đã viết trong những nội dung bài viết trước “Đặt tên cho mọi thứ trong Bố cục lưới CSS” và “Mẫu thiết kế sửa đổi và biên tập với lưới CSS và những cột được đặt tên”

Phân lớp những mục khi sử dụng .test grid-area: one; 2

Chỉ một tên hoàn toàn có thể chiếm mỗi ô khi sử dụng

.test grid-area: one; 2, tuy nhiên, bạn vẫn hoàn toàn có thể thêm những mục tương hỗ update vào lưới sau khi thực hiện bố cục chính của tớ theo cách này. Bạn hoàn toàn có thể sử dụng số dòng như thông thường

Trong ví dụ CodePen dưới đây, tôi đã thêm một mục tương hỗ update và định vị nó bằng phương pháp sử dụng định vị nhờ vào dòng trên những mục đã được định vị

Xem Bút Đặt một mục có số dòng của Rachel Andrew (@rachelandrew) trên CodePen

Xem Bút Đặt một mục có số dòng của Rachel Andrew (@rachelandrew) trên CodePen

Bạn cũng hoàn toàn có thể sử dụng tên dòng được xác định khi tạo cột hoặc hàng thông thường của tớ. Thậm chí tốt hơn, bạn sẽ có một số trong những tên đường được tạo bởi sự hình thành của những khu vực. Chúng tôi đã thấy cách bạn hoàn toàn có thể lấy bốn tên dòng với tên của khu vực. Bạn cũng luôn có thể có một dòng ở cạnh đầu của mỗi khu vực với

.test grid-area: one; 61 được nối với tên của khu vực và một dòng ở cạnh cuối của mỗi khu vực có .test grid-area: one; 63 được nối thêm

Do đó, khu vực mang tên là

Title of the document

Grid-area property example

You can use the grid-area property to name grid items.

Header

Left

Main

Right

Footer

10 có những đường cạnh khởi đầu mang tên là .test grid-area: one; 83 và những đường cạnh cuối mang tên là .test grid-area: one; 84

Sau đó, bạn hoàn toàn có thể sử dụng những tên dòng ẩn này để đặt một mục trên lưới. Điều này hoàn toàn có thể hữu ích nếu bạn đang xác định lại lưới tại những điểm dừng rất khác nhau miễn là bạn luôn muốn mục được đặt xuất hiện sau một tên dòng nhất định

Xem Bút Đặt một mục mang tên dòng ngầm của Rachel Andrew (@rachelandrew) trên CodePen

Xem Bút Đặt một mục mang tên dòng ngầm của Rachel Andrew (@rachelandrew) trên CodePen

Sử dụng những khu vực mẫu lưới trong thiết kế đáp ứng

Tôi thường thao tác với việc xây dựng những thành phần trong thư viện thành phần và tôi thấy rằng việc sử dụng

.test grid-area: one; 2 hoàn toàn có thể hữu ích về mặt hoàn toàn có thể thấy đúng chuẩn thành phần sẽ trông ra làm sao từ CSS. Việc xác định lại thành phần tại những điểm dừng rất khác nhau cũng rất đơn giản bằng phương pháp xác định lại giá trị của .test grid-area: one; 2 đôi khi ngoài việc thay đổi số lượng rãnh cột có sẵn

Trong CSS phía dưới, tôi đã xác định bố cục một cột cho thành phần của tớ. Tiếp theo, ở chiều rộng tối thiểu là 600px, tôi xác định lại số lượng cột và cả giá trị của

.test grid-area: one; 2 để tạo bố cục có hai cột. Điểm hay của cách tiếp cận này là bất kỳ ai nhìn vào CSS này đều hoàn toàn có thể thấy bố cục hoạt động và sinh hoạt giải trí ra làm sao.test grid-area: one; 1

kĩ năng tiếp cận

Bạn cần lưu ý khi sử dụng phương pháp này rằng rất dễ di tán mọi thứ xung quanh và gây ra sự cố ngắt link màn hình hiển thị trực quan khỏi thứ tự nguồn cơ bản. Bất kỳ ai đang lướt trên trang web hoặc đang xem màn hình hiển thị trong khi đọc nội dung sẽ sử dụng thứ tự sắp xếp những nội dung trong nguồn. Bằng cách di tán màn hình hiển thị từ thứ tự đó, bạn hoàn toàn có thể tạo ra trải nghiệm rất khó hiểu, bị ngắt link. Không sử dụng phương pháp này để di tán mọi thứ xung quanh mà không đảm nói rằng nguồn theo thứ tự hợp lý và phù phù phù hợp với trải nghiệm hình ảnh

Bản tóm tắt

Đó là vấn đề yếu khi sử dụng thuộc tính

.test grid-area: one; 88 và .test grid-area: one; 8 để tạo bố cục. Nếu bạn trước đó chưa từng sử dụng phương pháp bố cục này trước đây, hãy thử. Tôi thấy rằng đó là một cách thú vị để thử nghiệm bố cục và thường sử dụng nó khi tạo mẫu bố cục — trong cả những lúc vì nguyên do này hay nguyên do khác, ở đầu cuối chúng tôi sẽ sử dụng một phương pháp khác cho phiên bản sản xuất

Tràn và mất tài liệu trong CSS

CSS được thiết kế để giữ cho nội dung của bạn hoàn toàn có thể đọc được. Hãy cùng mày mò những tình huống mà bạn hoàn toàn có thể gặp phải tình trạng tràn bộ nhớ trong những thiết kế web của tớ và cách CSS đã phát triển để tạo ra những cách tốt hơn để quản lý và thiết kế xung quanh lượng nội dung không xác định. Đọc đọc thêm →

Vùng lưới trong CSS là gì?

Thuộc tính tốc ký CSS vùng lưới chỉ định kích thước và vị trí của mục lưới trong lưới bằng phương pháp đóng góp một dòng, một khoảng chừng hoặc không còn gì (tự động) vào vị trí lưới của nó, do đó . .

Làm cách nào để sử dụng khu vực mẫu lưới trong CSS?

Thuộc tính grid-template-areas chỉ định những khu vực trong bố cục lưới. Bạn hoàn toàn có thể đặt tên cho những mục lưới bằng phương pháp sử dụng thuộc tính grid-area, sau đó tham chiếu đến tên trong thuộc tính grid-template-areas . Mỗi khu vực được xác định bởi dấu nháy đơn. Sử dụng dấu chấm để chỉ một mục lưới không mang tên.

Diện tích lưới nghĩa là gì?

Vùng lưới là một hoặc nhiều ô lưới tạo thành một vùng hình chữ nhật trên lưới . Các khu vực lưới được tạo khi bạn đặt một mục bằng phương pháp sử dụng vị trí nhờ vào dòng hoặc khi xác định những khu vực bằng những khu vực lưới được đặt tên. Các khu vực lưới phải có hình chữ nhật trong tự nhiên; .

Khu vực mẫu lưới có tốt không?

Khu vực mẫu lưới CSS tạo màn biểu diễn trực quan của lưới bằng cả cột và hàng. Điều này giúp quá trình thiết kế nhanh hơn so với khi sử dụng vị trí nhờ vào dòng hoặc giá trị cột lưới và hàng lưới . Tải thêm tài liệu liên quan đến nội dung bài viết CSS vùng lưới programming css

Video CSS vùng lưới ?

Bạn vừa Read tài liệu Với Một số hướng dẫn một cách rõ ràng hơn về Video CSS vùng lưới tiên tiến nhất

Chia Sẻ Link Cập nhật CSS vùng lưới miễn phí

Hero đang tìm một số trong những Share Link Cập nhật CSS vùng lưới miễn phí.

Thảo Luận thắc mắc về CSS vùng lưới

Nếu sau khi đọc nội dung bài viết CSS vùng lưới vẫn chưa hiểu thì hoàn toàn có thể lại phản hồi ở cuối bài để Mình lý giải và hướng dẫn lại nha #CSS #vùng #lưới - 2022-12-16 07:25:08