Hướng dẫn này cho bạn biết cách khám phá 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 Thành phần của Công cụ của Chrome cho nhà phát triển.
Ảnh chụp màn hình cho thấy ví dụ minh hoạ trong 2 trang web sau: Hộp trái cây và Hộp ăn nhanh.
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 Thành phần.
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ủ này xuất hiện trên phần tử, được bố trí như một lưới để hiển thị vị trí của các đường lưới và đường đi:
Mở ngăn Layout (Bố cục). Khi một trang có lưới, ngăn Bố cục sẽ bao gồm phần Lưới (Grid) chứa một số tuỳ chọn để xem các lưới đó.
Căn chỉnh các mục trong lưới và nội dung của các mục đó 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 các mục đó bằng cách nhấp vào một nút thay vì nhập 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 Elements (Phần tử) > Styles (Kiểu), hãy nhấp vào nút
Grid Editor (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 lưới và nội dung được điều chỉnh trong khung nhìn.
Tùy chọn xem lưới
Phần 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 về từng phần phụ này.
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 tuỳ chọn sau:
- Ẩn nhãn đường kẻ: Ẩn nhãn dò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).
- Show line name (Hiện tên dòng): Hiện tên dòng cho mỗi lớp phủ lưới trong trường hợp lưới có tên dòng.
b. Hộp đánh dấu có các tuỳ chọn trong:
- Hiện kích thước bản nhạc: Bật/tắt để hiện hoặc ẩn kích thước của 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 vùng 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ử khi đã đặt
display: gridhoặcdisplay: inline-gridtrên phần tử đó. Khi bật/tắ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 tìm hiểu kỹ 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 dòng để ẩn số dòng.
Hiện tên dòng
Bạn có thể chọn Hiển thị tên dòng để xem tên dòng thay vì số. Trong ví dụ này, chúng tôi có 4 dòng có tên: left, lượt1, nơi giữa 2 và những dòng 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, với 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à kết thúc của phần tử.
Hiển thị kích thước bản nhạc
Bật hộp đánh dấu Hiển thị kích thước bản nhạc để xem kích thước bản nhạc của lưới.
Công cụ cho nhà phát triển sẽ hiển thị [authored size] - [computed size] trong mỗi nhãn dòng: Kích thước đã tạo: Kích thướ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 được tạo và tính toán: 1fr – 96,66px và 2fr – 193,32px.
Các nhãn của dòng hàng chỉ hiển thị kích thước đã tính: 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 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 vùng trong lưới – trên cùng, dưới cùng1 và dưới cùng2.
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 tới 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 một danh sách các lưới có trên trang, mỗi lưới có một hộp đánh dấu cùng với nhiều tuỳ 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ó 2 lớp phủ lưới được bật – main và div.snack-box, mỗi lớp được biểu thị bằng các màu khác nhau.
Tuỳ chỉnh màu của lớp phủ lưới
Bạn có thể tuỳ chỉnh từng màu của 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 để đánh dấu ngay phần tử HTML, di chuyển đến phần tử đó trên trang rồi chọn phần tử đó trong bảng điều khiển Phần tử.
