Hướng dẫn này chỉ cho bạn cách khám phá các lưới CSS trên một trang, kiểm tra chúng và gỡ lỗi các vấn đề về bố cục trong bảng điều khiển Phần tử của Công cụ cho nhà phát triển của Chrome.
Ví dụ minh hoạ trong ảnh chụp màn hình trong bài viết này lấy từ 2 trang web sau: Hộp trái cây và Hộp ăn nhẹ.
Khám phá các lưới CSS
Khi một phần tử HTML trên trang của bạn được áp dụng display: grid hoặc display: inline-grid, bạn có thể thấy một huy hiệu grid bên cạnh phần tử đó trong bảng điều khiển Phần tử.
Nhấp vào huy hiệu để bật/tắt chế độ hiển thị lớp phủ lưới trên trang. Lớp phủ xuất hiện trên phần tử, được bố trí như một lưới để cho thấy vị trí của các đường và đường trong lưới:
Mở ngăn Layout (Bố cục). Khi các lưới được đưa vào một trang, ngăn Bố cục sẽ bao gồm một phần Lưới chứa một số lựa chọn để xem các lưới đó.
Căn chỉnh các mục trong lưới và nội dung của chúng bằng Trình chỉnh sửa lưới
Bạn có thể căn chỉnh các mục trong lưới và nội dung của chúng bằng một lần nhấp vào một nút thay vì nhập các quy tắc CSS.
Cách căn chỉnh các mục trong lưới và nội dung của các mục đó:
Trong ngăn Phần tử > Kiểu, hãy nhấp vào nút Trình chỉnh sửa lưới
bên cạnh display: grid.
Trong Grid Editor (Trình chỉnh sửa lưới), hãy nhấp vào các nút tương ứng để đặt thuộc tính CSS
align-*vàjustify-*cho các mục trong lưới và nội dung của các mục đó.
Quan sát các mục và nội dung trong lưới đã được điều chỉnh trong khung nhìn.
Tùy chọn xem lưới
Phần Grid (Lưới) trong ngăn Layout (Bố cục) chứa 2 phần phụ:
- Cài đặt hiển thị lớp phủ
- Lớp phủ lưới
Hãy cùng tìm hiểu chi tiết từng phần phụ.
Cài đặt hiển thị lớp phủ
Chế độ cài đặt hiển thị lớp phủ bao gồm hai phần:
a. Trình đơn thả xuống có các lựa chọn sau:
- Ẩn nhãn đường: Ẩn nhãn đường cho từng lớp phủ lưới.
- Hiển thị số dòng: Hiển thị số dòng cho từng lớp phủ lưới (được chọn theo mặc định).
- Hiện tên dòng: Hiện tên dòng cho từng lớp phủ lưới trong trường hợp lưới có tên đường.
b. Hộp đánh dấu có các tuỳ chọn bên trong:
- Hiển thị kích thước bản nhạc: Chuyển đổi để hiển thị hoặc ẩn kích thước bản nhạc.
- Hiện tên khu vực: Bật/tắt để hiện hoặc ẩn tên khu vực, trong trường hợp lưới có các khu vực lưới được đặt tên.
- Mở rộng đường lưới: Theo mặc định, các đường lưới chỉ hiển thị bên trong phần tử có
display: gridhoặcdisplay: inline-gridđược đặt trên đó. Khi bật tuỳ chọn này, các đường lưới sẽ mở rộng đến cạnh của khung nhìn dọc theo mỗi trục.
Hãy cùng kiểm tra chi tiết hơn về các chế độ cài đặt này.
Hiện số dòng
Theo mặc định, số dòng dương và số âm sẽ hiển thị trên lớp phủ lưới.
Ẩn nhãn dòng
Chọn Ẩn nhãn đường để ẩn số đường.
Hiện tên dòng
Bạn có thể chọn Hiện tên đường để xem tên đường thay vì số. Trong ví dụ này, chúng ta có 4 dòng có tên là left (Trái), between1 (giữa) 1, 9 ở giữa 2 và bên phải.
Trong bản minh hoạ này, phần tử cam trải dài từ trái sang phải cùng CSS grid-column: left / right.
Việc hiển thị tên dòng giúp bạn dễ dàng hình dung vị trí bắt đầu và vị trí kết thúc của phần tử.
Hiển thị kích thước bản nhạc
Đánh dấu vào hộp Hiển thị kích thước kênh phát hành để xem các kích thước kênh phát hành của lưới.
Công cụ cho nhà phát triển sẽ hiển thị [authored size] - [computed size] trong từng nhãn dòng: Kích thước Authored (Đã tạo): Kích thước được xác định trong biểu định kiểu (bị bỏ qua nếu không được xác định). Kích thước tính toán: Kích thước thực tế trên màn hình.
Trong bản minh hoạ này, kích thước cột snack-box được xác định trong CSS grid-template-columns:1fr 2fr;.
Do đó, các nhãn dòng cột cho biết cả kích thước đã tạo và kích thước đã tính toán: 1fr – 96,66px và 2fr – 193,32px.
Các nhãn dòng hàng chỉ hiển thị các kích thước đã tính toán: 80px và 80px vì không có kích thước hàng nào được xác định trong biểu định kiểu.
Hiển thị tên khu vực
Để xem tên khu vực, hãy chọn hộp kiểm Hiển thị tên khu vực. Trong ví dụ này, có 3 khu vực trong lưới – top, bottom1 và bottom2.
Mở rộng đường lưới
Bật hộp đánh dấu Mở rộng đường lưới để mở rộng các đường lưới đến cạnh của khung nhìn dọc theo mỗi trục.
Lớp phủ lưới
Phần Lớp phủ lưới chứa danh sách các lưới hiện có trên trang, mỗi lưới có một hộp đánh dấu, cùng với nhiều lựa chọn.
Bật chế độ xem lớp phủ của nhiều lưới
Bạn có thể bật chế độ xem lớp phủ của nhiều lưới. Trong ví dụ này, có hai lớp phủ lưới được bật – main và div.snack-box, mỗi lớp được thể hiện bằng một màu khác nhau.
Tuỳ chỉnh màu lớp phủ lưới
Bạn có thể tuỳ chỉnh từng màu cho lớp phủ lưới bằng cách nhấp vào công cụ chọn màu.
Đánh dấu lưới
Nhấp vào biểu tượng đánh dấu để làm nổi bật phần tử HTML ngay lập tức, cuộn đến phần tử đó trong trang và chọn trong bảng điều khiển Phần tử.
