Di chuyển các mục trong Bố cục lưới CSS [Hướng dẫn]
Sử dụng Mô-đun bố trí lưới CSS trong thiết kế web ngày càng khả thi hơn khi nhiều trình duyệt bắt đầu ủng hộ điều này. Tuy nhiên, trong khi tạo bố cục điền vào các ô lưới, có thể đến một lúc, khi bạn muốn đạt được những điều phức tạp hơn.
Chẳng hạn, bạn có thể muốn hơi di chuyển xung quanh một số mục lưới bị mắc kẹt trong khu vực lưới của họ. Bạn cũng có thể muốn di chuyển chúng ra khỏi thùng chứa lưới (tràn), hoặc hơn nhau (chồng chéo), hoặc chỉ vào một số khoảng trống xung quanh.
Vì vậy, trong bài đăng này, tôi sẽ chỉ cho bạn cách bạn có thể di chuyển, đặt hàng, tràn, chồng chéo và kích thước các mục lưới khi bạn sử dụng Mô-đun Bố cục Lưới CSS.
Tạo lưới CSS
Trước tiên, hãy tạo một lưới CSS đơn giản với một hàng và ba cột.
Trong HTML, chúng tôi tạo ra một loạt các div nơi chứa lưới chứa ba mục lưới.
Trong CSS, bộ chứa lưới có hiển thị: lưới; bất động sản và các mục lưới có khu vực lưới xác định tên của các khu vực mục lưới.
Chúng tôi cũng thêm khu vực lưới-mẫu bất động sản đến thùng chứa lưới, trong đó tên khu vực lưới được sử dụng để gán các vùng lưới cho các ô lưới mà chúng đại diện.
Tất cả các cột lấy kích thước của một phần (fr) về chiều rộng của container, đảm bảo ngăn chặn các mục lưới.
.lưới-container hiển thị: lưới; lưới-mẫu-khu vực: 'trung tâm bên trái'; lưới-mẫu-cột: lặp lại (3, 1fr); lưới-mẫu-hàng: 80px; khoảng cách lưới: 5px; chiều rộng: 360px; màu nền: đỏ tươi; .grid-left lưới-khu vực: trái; .grid-centre lưới-khu vực: trung tâm; .grid-right lưới-khu vực: phải; .grid-container div màu nền: màu nhạt;
Các mục lưới tràn
Bạn có thể tạo một mục lưới tràn container lưới của nó nếu nó cần thiết cho một bố cục. Để đạt được hiệu ứng tràn, bạn chỉ cần sử dụng kích thước cột khác:
.lưới-container hiển thị: lưới; lưới-mẫu-khu vực: 'trung tâm bên trái'; lưới-mẫu-cột: lặp lại (3, 150px); khoảng cách lưới: 5px;
Các tổng của cột và kích thước khoảng cách lớn hơn chiều rộng của container, Điều này làm cho các mục lưới tràn vào container của họ.
Chồng chéo các mục lưới
Một mục lưới có thể chồng lên nhau (bao gồm toàn bộ hoặc một phần) một mục lưới khác trong các trường hợp sau:
- Nó được đặt để trải dài (và hơn) các ô của một mục lưới khác.
- Kích thước của nó đã được tăng lên, làm cho nó trùng lặp với mục lưới gần đó.
- Nó được chuyển lên trên một mục lưới khác.
Chúng ta sẽ thảo luận về trường hợp thứ hai và thứ ba sau, trong “Định cỡ” và “Di chuyển” phần.
Trước tiên, hãy xem trường hợp đầu tiên khi một mục lưới kéo dài qua một cái khác.
Các mục lưới tại trung tâm có kéo dài qua bên trái, vì vậy chỉ có hai mục được hiển thị trên màn hình.
.lưới-tâm lưới-diện tích: trung tâm; cột lưới: 1/3;
Các cột lưới và hàng lưới tính chất gán đường lưới giữa mà một cột hoặc hàng cần phải phù hợp.
Trên sơ đồ dưới đây, bạn có thể thấy cột lưới: 1/3 Quy tắc CSS hoạt động: cột trung tâm kéo dài giữa các đường lưới 1 và 3. Kết quả là, cột trung tâm chồng lên bên trái.
Di chuyển các mục lưới
Ý tôi là di chuyển các mục một chút. Nếu bạn hoàn toàn muốn di chuyển một mục vào một ô / vùng lưới khác, tôi khuyên bạn nên cập nhật mã tạo lưới.
Di chuyển xung quanh các mục lưới là đơn giản. Chỉ sử dụng lề, các biến đổi, hoặc là vị trí: tương đối; tính chất. Xem bên dưới cách các mục được di chuyển bằng cách sử dụng các thuộc tính đó.
Các mục lưới trung tâm và bên phải có thể được di chuyển (như được hiển thị ở trên) theo các cách sau:
1. Sử dụng lề
Lợi nhuận âm làm tăng kích thước của các mục lưới, trong khi tỷ lệ lợi nhuận dương cắt chúng. Bằng cách sử dụng kết hợp cả hai, bạn có thể di chuyển các mục lưới xung quanh.
.lưới-tâm lưới-diện tích: trung tâm; lề trái: -10px; lề phải: 10px; lề trên: -10px; lề dưới: 10px; .grid-right lưới-khu vực: phải; lề trái: 10px; lề phải: -10px; lề trên: -10px; lề dưới: 10px;
2. Sử dụng biến đổi
Các dịch() Chức năng CSS di chuyển một phần tử dọc theo trục x và y. Sử dụng nó cùng với biến đổi thuộc tính cho phép bạn thay đổi vị trí của một mục lưới.
.lưới-tâm lưới-diện tích: trung tâm; biến đổi: dịch (-10px, -10px); .grid-right lưới-khu vực: phải; biến đổi: dịch (10px, -10px);
3. Sử dụng Chức vụ
Sử dụng vị trí: tương đối; quy tắc với quy định hàng đầu, dưới cùng, trái, và đúng thuộc tính cũng có thể được sử dụng để di chuyển xung quanh các mục lưới.
.lưới-tâm lưới-diện tích: trung tâm; vị trí: tương đối; dưới cùng: 10px; phải: 10px; .grid-right lưới-khu vực: phải; vị trí: tương đối; dưới cùng: 10px; trái: 10px;
Đặt hàng các mặt hàng lưới
Các mục lưới được hiển thị trên màn hình theo thứ tự chúng xuất hiện trong mã nguồn HTML.
Trong phần trước, khi mục trung tâm được di chuyển sang trái, nó sẽ được trình duyệt đặt lên trên cùng của mục bên trái. Điều này xảy ra vì trong HTML, Tuy nhiên, chúng ta có thể thay đổi các mục lưới đặt hàng sử dụng Sử dụng Như trong mô-đun Bố cục Lưới CSS, thay đổi thứ tự phần tử trong HTML không ảnh hưởng đến bố trí lưới, bạn cũng có thể đặt Nếu bạn sử dụng các hàng hoặc cột có kích thước tự động cho một mục lưới (sử dụng Hãy nhớ rằng, trong lưới mẫu của chúng tôi, cả ba cột đều lấy một phần ( Ở đây, chúng tôi thay đổi kích thước của mục bên trái sử dụng Ở đây, chúng tôi thay đổi kích thước của mục bên trái sử dụng chỉ số z hoặc là gọi món Thuộc tính CSS.
chỉ số z: 1; quy tắc, mục lưới bên trái có bối cảnh xếp chồng cao hơn.. lưới-trái lưới-diện tích: trái; chỉ số z: 1;
Các mục lưới kích thước
Tự động, fr, gr đơn vị), nó sẽ co lại để tạo không gian cho vật phẩm lân cận đã tăng kích thước chỉ nếu mục nói không có kích thước bởi biến đổi hoặc một biên độ âm.fr) của container lưới. Hãy xem tất cả ba mục trông như thế nào sau khi bên trái được thay đổi kích thước theo hai cách khác nhau.1. Kích thước với
chiều rộng và Chiều caochiều rộng và Chiều cao tính chất. Kết quả là, nó vẫn ở trong thùng chứa lưới.
.lưới-trái lưới-diện tích: trái; chiều rộng: 200px; chiều cao: 90px;
2. Kích thước với
biến đổibiến đổi bất động sản. Kết quả là, nó tràn ra khỏi container và khoảng cách lưới cũng biến mất.
.lưới-trái lưới-diện tích: trái; biến đổi: tỉ lệ (1,8);
