Bố cục trang dựa trên Lưới giao diện người dùng ngữ nghĩa: không thể xóa các máng xối

Question

Tôi đang tạo ứng dụng web bằng cách sử dụng semantic-ui. Tôi đang cố tạo bố cục có thanh bên và vùng nội dung chính. Lúc đầu, tôi nghĩ rằng sử dụng lưới sẽ là con đường để đi, ngoại trừ việc họ gây ra một vài vấn đề:

1. Các cột và các hàng sẽ có thêm khoảng cách/máng xối giữa chúng
2. Cách duy nhất để "loại bỏ" các máng xối là để thiết lập một màu cột với một cái gì đó giống như <div class="four wide black column">, nhưng điều này gây ra các cột để trùng với nội dung khác

vì vậy, có vẻ như lưới mà không phải là công cụ tốt nhất cho việc tạo bố cục trang, mặc dù họ làm cung cấp chức năng mà làm cho chúng hữu ích cho bố cục trang (như xác định kích thước phần; four wide column, ten wide column, v.v.)

Cách được đề xuất để bố trí các ứng dụng web bằng cách sử dụng giao diện người dùng ngữ nghĩa, chẳng hạn như cột bên và cột nội dung chính đơn giản?

Answer 1

Tại sao bạn không ghi đè mặc định lề và padding áp dụng cho "lưới" và "cột" như thế này,

.your-custom-class.grid { 
    margin: 0; 
} 
.your-custom-class.grid .column { 
    padding: 0; 
} 

Như vậy bạn sẽ có được một mạng lưới với không gian ở giữa các cột.