Đặt, giãn cách và mật độ trong CSS Grid
Điều phổ biến nhất bạn học được trong CSS Grid thường liên quan đến containers lưới và hơn là các mục lưới. Định nghĩa lưới chung được áp dụng cho containers lưới là đủ cho cấu trúc bố cục cơ bản. Tuy nhiên, khi bạn cần kiểm soát nhiều hơn nội dung của lưới, containers lưới sẽ bị hạn chế sử dụng.Ví dụ: bạn có thể cần có lưới 4 x 2 nhưng mục lưới đầu tiên phải chiếm cột 1 và 2 cũng như hàng 1 và 2. Hoặc có thể bạn muốn một mục kéo dài cho đến theo dõi cột lưới cuối cùng khi bạn không biết tổng số thời gian chạy của rãnh cột lưới là bao nhiêu.
Kích thước của mỗi mục lưới được định nghĩa và bạn cần tìm cách định kích thước chúng tương đối với các mục khác trong containers lưới.
Trong hướng dẫn này, bạn sẽ khám phá cách đặt, mở rộng và mật độ trong CSS Grid.
Đặt các mục lưới: Bắt đầu ở đây, Kết thúc ở đó
Mọi thứ trong trình duyệt đều có kiểu mặc định, ví dụ: 0 hoặc auto . Cũng có thể có các giá trị mặc định khác mà bạn cần biết trước khi điều chỉnh các giá trị tùy chỉnh. Khi bạn có lưới, các mục lưới có giá trị vị trí được xác định bởi grid-[x]-start và grid-[x]-end (trong đó x có thể là column hoặc row ). Giá trị là tự động.
Khi bạn nhìn thấy một bố cục lưới, bạn có thể nhớ rằng mỗi mục trong lưới đó có một giá trị vị trí dù stream trông đối xứng như thế nào:
.container { display: grid; grid-gap: 10px; grid-template-columns: repeat(5, 1fr) } .item { grid-column-start: auto; /_ default _/ grid-column-end: auto; /_ default _/ grid-row-start: auto; /_ default _/ grid-row-end: auto; /_ default _/ } Đặt cột
Hãy điều chỉnh các giá trị mặc định này bắt đầu bằng các cột:
.item:nth-child(1) { grid-column-start: 1; grid-column-end: 5; } - Ta muốn mục đầu tiên trong lưới
.item:nth-child(1) - Để bắt đầu ở dòng một, hãy nhập
grid-column-start: 1; - Và kết thúc ở dòng 5,
grid-column-end: 5;
Xem toàn bộ mã tại đây .
Đặt hàng
Các luật tương tự áp dụng cho việc đặt hàng:
.item:nth-child(22) { grid-row-start: 1; grid-row-end: 4; } Tuy nhiên, grid-row-[x] sẽ đặt lại vị trí mặc định của mục lưới để bắt đầu ở cột dòng 1 và dòng 1, sau đó sẽ xảy ra mở rộng vị trí.
Bạn sẽ thấy trong đoạn mã này, dòng 22 rời khỏi vị trí của nó và chuyển lên dòng 1 trước khi kéo dài.
Nếu bạn muốn nó ở nguyên theo dõi cột ban đầu, thì bạn phải nói rõ rằng:
.item:nth-child(20) { grid-column-start: 3; grid-row-start: 5; grid-row-end: 10; } Bạn chỉ có thể cung cấp start hoặc end — bạn không cần phải cung cấp các thuộc tính đặt theo cặp. Bạn chỉ có thể cung cấp một và phần còn lại sẽ ở dạng auto (mặc định). Điều khó khăn cần lưu ý là nếu bạn chỉ thay đổi giá trị của grid-[x]-start , mục lưới sẽ bắt đầu ở dòng , không phải theo dõi:
.item:nth-child(1) { grid-column-start: 5; } Mặt khác, nếu bạn chỉ định end , nó sẽ bắt đầu từ giá trị kết thúc được chỉ định và ngược lại mở rộng lưới. Ví dụ: nếu bạn yêu cầu mục 10 kết thúc ở 3 , nó sẽ bắt đầu từ dòng 2 tiếp theo gần nhất và kéo đến dòng 3 :
.item:nth-child(10) { grid-column-end: 3; } Bạn có thể xem tất cả các mã ở đây .
Ngoài ra còn có cú pháp viết tắt cho grid-[x]-start và grid-[x]-end cho phép bạn loại bỏ các -start và -end mã:
.item { grid-column: [start] / [end]; grid-row: [start] / [end]; } Dưới đây là một số ví dụ có thể thay thế các mẫu mã mà ta đã viết cho đến nay:
.item { grid-column: 1 / 5; /__ Line 1 to 5 / grid-row: 1 / 4; /*_ Line 1 to 4 __/ grid-column: 5 / auto; / Line 5 to 6 *_/ grid-column: auto / 3; /_ Line 2 to 3 _/ } Spanning: Bắt đầu / Kết thúc Tại đây, Lấy n
Ta đã sử dụng từ “khoảng cách” để mô tả số lượng bản nhạc mà một vị trí sẽ chiếm. Khi ta nói dòng 1 đến 5 , ta đang nói rằng mục lưới phải trải dài từ 1 đến 5 . Tôi thường gọi đây là sự kéo dài ngầm.
Có một từ khóa span đóng role như một giá trị. Khi điều này được sử dụng, bạn có thể gọi nó là bao trùm rõ ràng. Việc đặt và mở rộng đủ linh hoạt để bạn có thể sử dụng cả mở rộng ngầm định và mở rộng rõ ràng làm giá trị cho một thuộc tính.
Cột kéo dài
Hãy bắt đầu với việc xem xét cách ta có thể mở rộng một mục trên một đường dẫn cột:
.item:nth-child(1) { grid-column: span 5; } Đây là một thay thế cho ví dụ đầu tiên ta đã viết:
.item:nth-child(1) { grid-column: 1 / 5; } Nhưng ta có thể bao gồm chi tiết bổ sung:
.item:nth-child(1) { grid-column: span 2 / 5; } Ở đây ta kết thúc ở 5 và nhịp 2 theo dõi lùi lại.
Một vi dụ khac:
.item:nth-child(1) { grid-column: 2 / span 2; } Ở đây ta bắt đầu ở cột dòng 2 và kết thúc ở cột dòng 4 (sau 2 lần nhảy).
Kéo dài hàng
Mọi thứ bạn đã học cho đến nay trong hướng dẫn này về hàng đều được áp dụng mà không có ngoại lệ:
.item:nth-child(1) { grid-column: 2 / span 2; /_ highlight line_/ grid-row: span 5 } Ta vẫn đang mở rộng lần đầu tiên, nhưng sau đó ta đang mở rộng trên trục hàng. Trình duyệt sẽ kéo hộp xuống để chiếm năm bản nhạc .
Vị trí và khoảng cách thừa
Nhớ lại rằng ta đã xác định rõ ràng lưới của ta có 5 cột. Ta có thể mở rộng hoặc đặt một mục từ cột 6 trở lên như sau:
.item:nth-child(1) { grid-column: span 10; /_ 1 _/ grid-column: 1 / 10; /_ 2 _/ grid-column: 7 / 10; /_ 3 _/ grid-column: 1 / span 10; /_ 4 _/ } Các bản nhạc ngầm sẽ được tạo ra để phù hợp với chúng.
Số nguyên phủ định làm giá trị
Số nguyên âm cũng hữu ích như số dương — chúng nghịch đảo vị trí hoặc khoảng mở rộng. Do đó, thay vì bắt đầu từ cột hoặc hàng đầu tiên, vị trí hoặc khoảng cách sẽ bắt đầu từ cột hoặc hàng cuối cùng.
Các đoạn mã này đối lập trực tiếp:
.item:nth-child(1) { grid-column: 1 / 5 } .item:nth-child(1) { grid-column: -1 / -5 } Vì ta đang bắt đầu ở phần cuối để rút lui như tôi đã đề cập ở trên, sẽ có chỗ cho mục 2 trong cột 1 nên nó bị đẩy xuống. Ta sẽ xem xét việc sử dụng mật độ để lấp đầy những khoảng trống này được tạo ra trong những trường hợp như vậy (nếu nội dung không đối xứng).
Có một cách mà bạn có thể kéo dài đến cuối cột hoặc hàng mà không cần biết có bao nhiêu cột được xác định bởi containers lưới. Điều này hữu ích khi bạn đang sử dụng tính năng tự động điền hoặc tự động điều chỉnh để xác định lưới động:
.item:nth-child(1) { grid-column: 1 / -1 } Chỉ định -1 cho cuối hàng hoặc cuối cột sẽ làm cho mục lưới kéo dài cho đến cuối lưới bắt đầu từ điểm bắt đầu mà bạn đã cung cấp (trong trường hợp này là dòng 1).
Tuy nhiên, điều này không hoạt động trên các lưới ngầm định. Do đó, vì ta chỉ xác định cột và hàng trong containers lưới, điều này sẽ không thực hiện bất kỳ điều gì:
.item:nth-child(1) { grid-row: 1 / -1; } Để nó hoạt động, bạn sẽ phải đưa ra một định nghĩa hàng rõ ràng cho containers lưới. Ví dụ:
.container { grid-template-rows: repeat(10, 30px); } Tỉ trọng
Trong các ví dụ trước, bạn sẽ thấy một số vị trí hoặc khoảng cách gây ra các khoảng trống nằm rải rác ở giữa lưới.
Bạn có thể đóng các khoảng trắng này bằng cách sử dụng thuộc tính grid-auto-flow trên containers lưới để đóng các khoảng trắng đó:
.container { grid-auto-flow: dense; } Một điều bạn cần lưu ý là nếu bạn có nội dung đối xứng cần tuân theo một trật tự, làm cho dòng chảy dày đặc sẽ làm sai lệch trật tự đó. Đây là một sự đánh đổi bạn phải thực hiện nếu bạn muốn có một thiết kế nhỏ gọn trong khi vẫn đặt các mục lưới không đều.
Chú ý sau khi đặt mục 1 ở cuối, lưới quay trở lại để tiếp tục đặt mục 2 ở đầu rail .
Kết luận
Trong hướng dẫn này, ta đã khám phá CSS Grid: đặt, mở rộng và mật độ.
Các tin liên quan
Cách hiển thị CSS trên server ứng dụng React2019-12-12
Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid
2019-12-12
Cách tạo node tải xuống với các tương tác nhỏ với CSS, anime.js và segment.js
2019-12-12
Cách giải quyết tắc nghẽn CSS quy mô lớn với ITCSS và BEM
2019-12-12
Hiểu tính cụ thể trong CSS
2019-09-03
CSS sẽ thay đổi Thuộc tính: Khi nào và Không sử dụng Nó
2019-08-26
Trình xử lý nhấp chuột chỉ dành cho CSS sử dụng: target Pseudo-Class (Không có JavaScript)
2019-08-22
Giới thiệu về Tailwind CSS
2019-08-13
Hiểu CSS Float
2019-06-07
Giới thiệu về Bulma CSS với React
2018-10-12
