Trong một loạt bài mới, Rachel Andrew chia nhỏ đặc tả Bố cục Lưới CSS. Lần này, chúng ta sẽ xem xét cách sử dụng các vùng-mẫu lưới để đặt các mục.

Bạn đang xem : vùng mẫu lưới css

Hiểu CSS Grid: Các khu vực mẫu lưới

  • 11 phút đọc

Tóm tắt nhanh ↬

Trong một loạt bài mới, Rachel Andrew chia nhỏ đặc tả Bố cục Lưới CSS. Lần này, chúng ta sẽ xem xét cách sử dụng grid-template-area để đặt các mục.

Trong một loạt bài mới, Rachel Andrew chia nhỏ đặc tả Bố cục Lưới CSS. Lần này, chúng ta sẽ xem xét cách sử dụng để đặt các mục.

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 khác mang tính trực quan. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng thuộc tính grid-template-domains để xác định vị trí trên lưới và tìm hiểu cách thuộc tính này thực sự hoạt động.

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 chúng tại đây:

  • Phần 1: Tạo vùng chứa lưới
  • Phần 2: Đường lưới
  • Phần 3: Vùng mẫu lưới

Mô tả bố cục với lưới-mẫu-khu vực

Thuộc tính lưới-mẫu-khu vực chấp nhận 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 trong lưới của bạn. Bạn có thể sử dụng thuộc tính trên lưới mà bạn đã xác định bằng cách sử dụng lưới-mẫu-hàng lưới-mẫu-cột hoặc bạn có thể tạo bố cục của mình trong đó tất cả các hàng sẽ được đặt 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 trải dài hai rãnh cột và hai rãnh hàng. Một vùng được tạo ra để kéo dài nhiều bản nhạc bằng cách lặp lại tên trong tất cả các ô mà bạn muốn vùng đó bao gồm:

  grid-template-area: "one một hai hai "
                     "một một hai hai"
                     "ba ba bốn bốn"
                     "ba ba bốn bốn";
 

Các mục được đặt vào bố cục bằng cách được đặt tên với danh tính bằng thuộc tính grid-area . Do đó, nếu tôi muốn đặt một phần tử có lớp test vào vùng lưới có tên one , tôi sử dụng CSS sau:

 . test {
  vùng lưới: một;
}
 

Bạn có thể thấy điều này hoạt động trong ví dụ CodePen được 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); chúng được gán cho vùng lưới có liên quan bằng cách sử dụng thuộc tính grid-area và do đó hiển thị trên lưới trong các ô chính xác.

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

Lưới bao gồm bốn mục với Trình kiểm tra lưới của Firefox đánh dấu các dòng Mỗi mục trải dài hai hàng và hai cột

Quy tắc Sử dụng grid-template-area

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. Quy tắc đầu tiên là bạn phải mô tả một lưới hoàn chỉnh , tức là mọi ô trên lưới của bạn phải được lấp đầy.

Nếu bạn muốn để trống một ô (hoặc các ô) khoảng trắng, bạn thực hiện việc này bằng cách chèn một . hoặc chuỗi chẳng hạn như ... mà không có khoảng cách giữa chúng.

Do đó, nếu tôi thay đổi giá trị trong tổng số grid-template-area như sau:

  grid-template-area: "one one, two two"
                     "một một hai hai"
                     "... bốn bốn"
                     "ba ba bốn bốn";
 

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

Một mục giờ chỉ kéo dài một hàng với Trình kiểm tra lưới của Firefox đánh dấu các dòng Hiện có khoảng trắng trong lưới

​​ Bạn chỉ có thể xác định từng khu vực một lần , có nghĩa là bạn không thể sử dụng thuộc tính này để sao chép nội dung thành 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 đã sao chép vùng ba :

  grid-template -areas: "một một ba ba"
                     "một một hai hai"
                     "ba ba bốn bốn"
                     "ba ba bốn bốn";
 

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

  grid-template-area: "một một hai hai"
                     "một, một, một"
                     "ba ba bốn bốn"
                     "ba ba bốn bốn";
 

Định dạng chuỗi

Tôi muốn hiển thị giá trị của lưới-mẫu-vùng dưới dạng Tôi có ở trên (với mỗi chuỗi đại diện cho một hàng bên dưới hàng trước đó). Điều này cho tôi hình dung trực quan về bố cục sẽ như thế nào.

Để trợ giúp điều này, bạn nên thêm các ký tự khoảng trắng bổ sung giữa mỗi ô và sử dụng nhiều . ký tự biểu thị các ô trống.

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ự . để các ô trống xếp thành dòng:

  grid-template-area: "một một hai hai"
                     "một một hai hai"
                     "..... ..... bốn bốn"
                     "ba ba bốn bốn";
 

Đ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 ta có thể viết ví dụ của mình như sau:

  grid-template-area:" một một hai hai "" một một hai hai "" ba ba bốn bốn "" ba ba bốn bốn ";
 

Giải thích lưới-mẫu-khu vực grid-area

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à 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 dòng. Nếu chúng ta tiếp tục với 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 đây. 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 viết tay grid-column-start , grid-column-end , grid-row-start Thuộc tính grid-row-end .

Lưu ý : 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 grid-area như một cách viết tắt để khai báo tất cả bốn dòng cùng một lúc.

Điều này có nghĩa là chúng tôi cũng có thể tạo bố cục của chúng tôi với thứ tự các dòng sau:

  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end
 < code class = "language-css">. one {
  diện tích lưới: 1/1/3;
}

.hai {
  diện tích lưới: 1/3/3/5;
}

.số ba {
  diện tích lưới: 3/1/5/3;
}

.four {
  diện tích lưới: 3/3/5;
}
 

Thuộc tính grid-area rất thú vị vì 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 thức hoạt động khác nhau của nó khi ở mỗi chế độ.

Sử dụng grid-area With Số dòng

Nếu bạn sử dụng thuộc tính grid-area với số dòng, thì các dòng sẽ được gán theo thứ tự được mô tả ở trên.

Nếu bạn bỏ sót 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 auto có nghĩa là khu vực sẽ trải dài 1 bản nhạc (đó là giá trị mặc định). Vì vậy, CSS sau sẽ đặt một mục grid-row-start: 3 với tất cả các giá trị khác được đặt thành tự động, do đó, mục sẽ được tự động đặt trong rãnh cột có sẵn đầu tiên và kéo dài một hàng theo dõi và theo dõi một cột.

  grid-area: 3;
 

Sử dụng grid-area With Idents

Nếu bạn sử dụng một danh tính ( là những gì một vùng đã đặt tên được gọi trong Bố cục Lưới), thì thuộc tính grid-area cũng có bốn dòng. Nếu bạn đã đặt tên các dòng trên lưới của mình như được mô tả trong “ Hiểu CSS Grid: Tạo vùng chứa lưới ”, thì bạn có thể sử dụng các dòng được đặt tên này giống như các dòng được đánh số.

Tuy nhiên, điều gì xảy ra khi bạn bỏ sót một số dòng sẽ khác với khi bạn sử dụng id chứ không phải số. < / p>

Dưới đây, tôi đã tạo một lưới với các dòng được đặt tên và sử dụng grid-area để đặt một mục (thiếu giá trị cuối cùng):

 . grid {
  hiển thị: lưới;
  lưới-mẫu-cột:
      [một đầu ba lần bắt đầu] 1fr 1fr
      [một đầu ba đầu hai đầu bốn đầu] 1fr 1fr [hai đầu bốn đầu];
  lưới-mẫu-hàng:
    [một đầu hai lần bắt đầu] 100px 100px
    [một đầu hai đầu ba đầu bốn đầu] 100px 100px [ba đầu bốn đầu] ;;
}

.hai {
  vùng lưới: hai đầu / hai đầu / hai đầu;
}
 

Điều này có nghĩa là chúng tôi thiếu tên dòng cho grid-column-end . Thông số cho biết trong trường hợp này, grid-column-end nên sử dụng bản sao của grid-column-start . Nếu grid-column-end grid-column-start giống hệt nhau, thì dòng kết thúc sẽ bị loại bỏ và về cơ bản giá trị được đặt thành tự động để chúng tôi mở rộng một đường như trong phiên bản được đánh số.

Điều tương tự cũng xảy ra nếu chúng ta bỏ sót giá trị thứ ba grid-row-end ; nó giống như grid-row-start và do đó trở thành auto .

Hãy xem ví dụ CodePen tiếp theo về cách mỗi grid-area được sử dụng và cách điều này sau đó thay đổi bố cục của mục:

Điều này sau đó giải thích tại sao grid-area hoạt động với một giá trị nhận dạng duy nhất đại diện cho một khu vực tên.

Khi chúng tôi tạo một khu vực được đặt tên với thuộc tính grid-template-area , cạnh của mỗi khu vực có thể được tham chiếu bởi một tên dòng giống với khu vực tên bạn đã sử dụng. Trong trường hợp của chúng tôi, chúng tôi có thể lấy khu vực của mình có tên one và đặt mục của chúng tôi bằng các dòng được đặt tên như sau:

 . One {
  lưới-hàng-bắt đầu: một;
  lưới-hàng-kết thúc: một;
  lưới-cột-bắt đầu: một;
  lưới-hàng-kết thúc: một;
}
 

Nếu dòng là một dòng -start thì một sẽ phân giải thành phần cuối của cột hoặc hàng. Nếu đó là dòng -end thì một sẽ phân giải thành dòng cuối của cột hoặc hàng.

Điều này có nghĩa là khi chúng ta nói grid-area: one , chúng tôi đã bỏ qua ba giá trị cuối cùng cho cách viết tắt của grid-area ; tất cả chúng đều là bản sao của giá trị đầu tiên - trong trường hợp của chúng ta, tất cả đều trở thành một và mục được đặt giống như cách sử dụng lâu đời của chúng ta.

Cách đặt tên hoạt động trong Grid Bố cục rất thông minh và mang lại một số điều thú vị mà tôi đã viết trong các bài viết trước của mình “ Đặt tên mọi thứ trong bố cục lưới CSS ” và “ Mẫu thiết kế biên tập với CSS lưới và cột được đặt tên ”.

Phân lớp Các Mục khi Sử dụng grid-template-area

Chỉ một tên có thể chiếm mỗi ô khi sử dụng lưới-mẫu-khu vực , tuy nhiên, bạn vẫn có thể thêm các mục bổ sung vào lưới sau khi thực hiện bố cục chính của mình theo cách này. Bạn có thể sử dụng số dòng như bình thường.

Trong ví dụ CodePen bên dưới, 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ị:

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 bạn. Tốt hơn nữa, bạn sẽ có một số tên dòng được tạo ra bởi sự hình thành của các khu vực. Chúng tôi đã biết 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 nhận được một dòng trên cạnh bắt đầu của mỗi khu vực với -start được thêm vào tên của khu vực và một dòng ở cạnh cuối của mỗi khu vực có -end được nối thêm.

Do đó, vùng có tên one có các dòng cạnh bắt đầu có tên là một-đầu và các dòng cạnh cuối có tên một-cuối .

Sau đó, bạn có thể sử dụng các tên dòng ngầm 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 ở các điểm ngắt khác nhau, miễn là bạn luôn muốn mục đã đặt đứng sau một tên dòng nhất định.

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 lưới-mẫu-khu vực có thể hữu ích trong điều kiện có thể thấy chính xác một thành phần sẽ trông như thế nào từ CSS. Cũng rất dễ dàng để xác định lại thành phần ở các điểm ngắt khác nhau bằng cách xác định lại giá trị của lưới-mẫu-khu vực đôi khi ngoài việc thay đổi số lượng rãnh cột có sẵn.

Trong CSS bên dưới, tôi đã xác định một bố cục cột duy nhất cho thành phần của mình. Tiếp theo, ở độ rộng tối thiểu 600px, tôi xác định lại số lượng cột và cả giá trị của lưới-mẫu-vùng để tạo bố cục có hai cột. Điều thú vị về cách tiếp cận này là bất kỳ ai nhìn vào CSS này đều có thể thấy cách bố cục hoạt động!

. wrapper {
  màu nền: #fff;
  đệm lót: 1em;
  hiển thị: lưới;
  khoảng cách: 20px;
  lưới-mẫu-khu vực:
    "hd"
    "bd"
    "sd"
    "ft";

}

@media (min-width: 600px) {
  .vỏ bánh {
    lưới-mẫu-cột: 3fr 1fr;
    lưới-mẫu-khu vực:
      "hd hd"
      "bd sd"
      "ft ft";
  }
}

tiêu đề {grid-area: hd; }
article {grid-area: bd; }
sang một bên {grid-area: sd; }
footer {grid-area: ft; }
 

Khả năng truy cập

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ứ 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 theo dõi trang web, hoặc đang xem màn hình trong khi đọc nội dung, sẽ sử dụng thứ tự các thứ có trong nguồn. Bằng cách di chuyển màn hình khỏi thứ tự đó, bạn có thể tạo ra một trải nghiệm rất khó hiểu, 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.

Tóm tắt

Đó là điểm yếu bằng cách sử dụng các thuộc tính grid-template-area grid-area để tạo bố cục. Nếu bạn chưa 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 với bố cục và thường sử dụng nó khi tạo mẫu bố cục - ngay cả khi vì lý do này hay lý do khác, cuối cùng 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 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á các tình huống mà bạn có thể gặp phải tình trạng tràn trong 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 →

Smashing Editorial

(il)

Khám phá thêm về


Xem thêm những thông tin liên quan đến chủ đề các khu vực mẫu lưới css

Hệ thống lưới (Grid system)

alt

  • Tác giả: F8 Official
  • Ngày đăng: 2020-02-23
  • Đánh giá: 4 ⭐ ( 6301 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Là một Front-end developer, chúng ta cần biết tới khái niệm cũng như tư tưởng thiết kế của Grid system. Tuy không chuyên sâu như dân thiết kế - design, nhưng chúng ta cần hiểu được ưu điểm cũng như ứng dụng của Grid system trong việc thiết kế layout website.

    Video này và thêm 1 video nữa (10 phút) chỉ nói về lý thuyết. Sau đó chúng ta sẽ cùng nhau thực hành tự tạo ra 1 thư viện CSS ứng dụng Grid system để phục vụ việc responsive cho website sau này.

    🔥 Hãy chia sẻ các khóa học, vì ngoài kia có rất nhiều người đang cần nó ❤️
    🔥 Truy cập http://fullstack.edu.vn (miễn phí) để quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
    🔥 Tham gia nhóm Học lập trình tại F8 trên Facebook: https://www.facebook.com/groups/f8official/

    hoclaptrinh mienphi frontend backend devops
    ---------------------------------------
    HỌC LẬP TRÌNH MIỄN PHÍ
    1. Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
    2. Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css
    3. Khóa Responsive web design: https://fullstack.edu.vn/courses/responsive-web-design
    ---------------------------------------
    LIÊN KẾT HỮU ÍCH
    1. Học lập trình: http://fullstack.edu.vn
    2. Viết CV xin việc: http://mycv.vn
    -----------------------------------------------------------
    LIÊN HỆ
    1. Facebook: https://fb.com/sondnmc
    2. Email: sondnf8@gmail.com

    Yêu các bạn ❤️

Tạo lưới đáp ứng hoàn hảo với CSS

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 5 ⭐ ( 7368 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tổng hợp các mẫu hàng rào lưới B40 đẹp nhất hiện nay

  • Tác giả: suncogroupvn.com
  • Đánh giá: 5 ⭐ ( 6791 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu và tổng hợp các mẫu hàng rào lưới b40 đẹp hiệu quả, kết cấu tốt. Các mẫu hàng rào B40 chắc chắn hiệu quả cho các công trình thi công

Cấu hình danh sách - Power Apps

  • Tác giả: docs.microsoft.com
  • Đánh giá: 5 ⭐ ( 8407 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu cách định cấu hình danh sách trên cổng thông tin.

Bố cục lưới CSS: Giới thiệu

  • Tác giả: galaxyz.net
  • Đánh giá: 4 ⭐ ( 6681 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách tạo bố cục lưới cho mô-đun Divi bằng CSS

  • Tác giả: codewatchers.com
  • Đánh giá: 3 ⭐ ( 9122 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có quen với việc tạo các trang web tuyệt đẹp bằng Divi không? Bạn có thể nên biết rằng bố cục lưới là một tính năng cốt lõi của Divi Builder. Thông thường, bạn bắt đầu bằng cách tạo một hàng và...

[HTML & CSS] Làm thế nào để xây dựng layout cho một Website

  • Tác giả: vncoder.vn
  • Đánh giá: 3 ⭐ ( 2171 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Layouts là cách dàn trang, sắp xếp các yếu tố sẽ được hiển thị trên website. Trong bài viết này vncoder.vn sẽ hướng dẫn các bạn cách tạo một layout cho Website.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  $ (tài liệu) .ready () - trên tài liệu đã sẵn sàng javascript

By ads_php