CSS vùng lưới

Thuộc tính diện tích 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 các thuộc tính sau

Thuộc tính grid-area cũng chỉ định tên cho một grid item. Sau đó, các mục lưới được đặt tê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 cả năm cột

Các ví dụ sau bao gồm hình ảnh về cách ví dụ sẽ trông như thế nào trong trình duyệt hỗ trợ, mỗi ví dụ liên kết đế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, các ví dụ này hoạt động trong bất kỳ trình duyệt nào hỗ trợ Thông số kỹ thuật lưới cập nhật. Chúng sẽ không hoạt động trong IE10 hoặc 11

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

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

Bản tin email

Mẹo hàng tuần về giao diện người 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 dùng SmashingConf 2023

• Thử ngay bây giờ

• 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

.test {
  grid-area: one;
}

Khi sử dụng Bố cục lưới CSS, bạn luôn có thể đặt các 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 bài viết này, chúng ta sẽ tìm hiểu cách sử dụng thuộc tính

.test {
  grid-area: one;
}

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

• Phần 1. Tạo một vùng chứa lưới
• Phần 2. đường lưới
• Phầ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;
}

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

Thuộc tính và giá trị sau đây mô tả một lưới có bốn vùng — mỗi vùng bao gồm 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 cách lặp lại tên trong tất cả các ô mà bạn muốn nó bao phủ

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

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

  
    Title of the document
    
  
  
    
Grid-area property example
    
You can use the grid-area property to name grid items.
    

      
Header
      
Left
      
Main




      
Right
      
Footer
    

.test {
  grid-area: one;
}

Bạn có thể thấy điều này đang hoạt động trong ví dụ CodePen hiển thị bên dưới. Tôi có bốn mục (với các 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

Nếu bạn sử dụng Trình kiểm tra lưới của Firefox, thì bạ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ị dựa trên dòng nào trên chính mục đó

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ỡ các 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 chỉnh, 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 các ô) dưới dạng khoảng trống, bạn thực hiện việc này bằng cách 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
    

  

  
    Title of the document
    
  
  
    
Grid-area property example
    
You can use the grid-area property to name grid items.
    

      
Header
      
Left
      
Main
      
Right
      
Footer
    

  

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

.test {
  grid-area: one;
}

  
    Title of the document
    
  
  
    
Grid-area property example
    
You can use the grid-area property to name grid items.
    

      
Header
      
Left
      
Main
      
Right
      
Footer
    

  

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

Bạn chỉ 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
    

  

.test {
  grid-area: one;
}

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;
}

Định dạng chuỗi

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

.test {
  grid-area: one;
}

Để giải quyết vấn đề này, bạn nên thêm các ký tự khoảng trắng bổ sung 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
    

  

Trong giá trị bên dưới, tôi đã sử dụng nhiều ký tự khoảng trắng giữa các từ nhỏ hơn và cũng 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
    

  

.test {
  grid-area: one;
}

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

.test {
  grid-area: one;
}

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

Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học 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 các 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

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

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

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

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

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

.test {
  grid-area: one;
}

Điều này có nghĩa là chúng ta cũng có thể tạo bố cục của mình với thứ tự các 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;
}

Thuộc tính

.test {
  grid-area: one;
}

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;
}

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

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

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

Nếu bạn sử dụng một số 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;
}

Tuy nhiên, điều xảy ra khi bạn bỏ lỡ một số 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ó các dòng được đặt tên và sử dụng

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

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

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

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

.test {
  grid-area: one;
}

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

.test {
  grid-area: one;
}

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

Sau đó, điều này giải thích tại sao

.test {
  grid-area: one;
}

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;
}

  
    Title of the document
    
  
  
    
Grid-area property example
    
You can use the grid-area property to name grid items.
    

      
Header
      
Left




      
Main
      
Right
      
Footer
    

.test {
  grid-area: one;
}

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

.test {
  grid-area: one;
}

  
    Title of the document
    
  
  
    
Grid-area property example
    
You can use the grid-area property to name grid items.
    

      
Header
      
Left
      
Main
      
Right
      
Footer
    

  

.test {
  grid-area: one;
}

  
    Title of the document
    
  
  
    
Grid-area property example
    
You can use the grid-area property to name grid items.
    

      
Header
      
Left
      
Main
      
Right
      
Footer
    

  

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

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

Cách đặt tên hoạt động trong Bố cục lưới rất thông minh và cho phép một số điều thú vị mà tôi đã viết trong các 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ế biên tập với lưới CSS và các cột được đặt tên”

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

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

.test {
  grid-area: one;
}

Trong ví dụ CodePen dưới đây, tôi đã thêm một mục bổ sung và định vị nó bằng cách sử dụng định vị dựa trên dòng trên các 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

Bạn cũng 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 mình. Thậm chí tốt hơn, bạn sẽ có một số tên đường được tạo bởi sự hình thành của các khu vực. Chúng tôi đã thấy cách bạn có thể lấy bốn tên dòng với tên của khu vực. Bạn cũng có một dòng ở cạnh đầu của mỗi khu vực với

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

Do đó, khu vực có 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
    

  

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

Sau đó, bạn có thể sử dụng các tên dòng ẩn này để đặt một mục trên lưới. Điều này có thể hữu ích nếu bạn đang xác định lại lưới tại các điểm dừng 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 có tên dòng ngầm của Rachel Andrew (@rachelandrew) trên CodePen

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

Tôi thường làm việc với việc xây dựng các 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;
}

.test {
  grid-area: one;
}

Trong CSS bên dưới, tôi đã xác định bố cục một cột cho thành phần của mình. 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;
}

.test {
  grid-area: one;
}

khả 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 chuyển mọi thứ xung quanh và gây ra sự cố ngắt kết nối màn hình 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 trong khi đọc nội dung sẽ sử dụng thứ tự sắp xếp các nội dung trong nguồn. Bằng cách di chuyển màn hình từ thứ tự đó, bạn có thể tạo ra trải nghiệm rất khó hiểu, bị ngắt kết nối. Không sử dụng phương pháp này để di chuyển mọi thứ xung quanh mà không đảm bảo rằng nguồn theo thứ tự hợp lý và phù hợp với trải nghiệm hình ảnh

Bản tóm tắt

Đó là điểm yếu khi sử dụng thuộc tính

.test {
  grid-area: one;
}

.test {
  grid-area: one;
}

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

CSS được thiết kế để giữ cho nội dung của bạn có thể đọc được. Hãy cùng khám phá những tình huống mà bạn có thể gặp phải tình trạng tràn bộ nhớ trong các thiết kế web của mình 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 bài viết liên quan →

Vù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?