Mục đích của việc có máng xối bên ngoài trên lưới phản ứng là gì?

Phác thảo có tùy chọn để thêm máng xối bên ngoài vào lưới. Những cái này để làm gì và cái gì sẽ là một ví dụ về tình huống trong đó có ích?

Nếu bạn chỉ có máng xối bên trong, nội dung có thể bị chật chội trong viền của trang tính hoặc màn hình. Khi bạn thêm máng xối bên ngoài, bạn tạo một số phòng thở giữa các cạnh nội dung và các cạnh vật lý, làm cho nó trông giống như mọi thứ phù hợp thoải mái hơn.

Trên phương tiện không biên giới (giấy, biển báo), nó cũng tạo ra một số không gian đệm giữa nền và nội dung, giảm hiện tượng quang học và giúp dễ lấy nét hơn.

Máng xối bên ngoài tạo ra một lề bên ngoài lưới bố cục, để các thành phần hình ảnh và văn bản sẽ không dính trực tiếp vào các cạnh của màn hình nhỏ hơn Tổng chiều rộng . Tôi đoán Margins sẽ là một thuật ngữ tốt hơn Gutter ở bên ngoài .

Các câu trả lời khác là đúng, nhưng tôi nghĩ rằng chúng có thể thiếu câu hỏi chính của bạn:

Tại sao Sketch cần thêm máng xối để xử lý màn hình nhỏ?

Nó không. Bạn có thể đặt lưới của mình nhỏ hơn một chút so với khung nhìn (hoặc artboard trong trường hợp này). Ví dụ: tính toán Total widthđể bắt chước một cột 90%, sau đó để centernút xử lý các lề bên.

Lý do tôi thích máng xối bên ngoài trong Phác thảo là vì nó cho phép tôi nghĩ về kích thước khung nhìn (ví dụ 1024) như một số nguyên. Tôi nhập kích thước khung nhìn đầy đủ và thông số lưới mong muốn của tôi (với máng xối bên ngoài) và Phác thảo thực hiện phép toán để duy trì phần đệm tôi theo sau.

Kịch bản không có máng xối bên ngoài

Tôi đang phát triển bố cục máy tính bảng rộng 1024, vì vậy tôi lùi lại và cố gắng tìm ra một cột chính sẽ để lại cho tôi một khoảng trống thêm cho lề phụ. Tôi sẽ sử dụng lưới 12 cột thời trang tốt, máng xối rộng 32px, sử dụng tương tự ở bên ngoài và tôi nhận được các cột xấp xỉ 51px với tổng chiều rộng là 960 ( (960-(32*11))/12). Điều đó thậm chí còn hữu ích hơn nếu tôi đã có một điểm dừng khó khăn trong tâm trí.

Kịch bản với máng xối bên ngoài

Đối với cùng một khung nhìn 1024, tôi có thể không có một điểm dừng cứng trong tâm trí. Mục tiêu của tôi chỉ là tối đa hóa thiết bị mục tiêu. Vì vậy, tôi tập trung vào phần đệm lưới mà tôi muốn và để cho nó uốn cong để phù hợp với khung nhìn / bản vẽ. Phác thảo làm toán cho tôi, vì tôi chỉ là kiểu nhà thiết kế ngốc nghếch. Và bạn có thể thấy trong ví dụ bên dưới, tôi đã đạt được 2px mỗi cột vì Phác thảo tính toán các máng xối bên ngoài như Bootstrap: 50% máng xối bên trong. Hãy tưởng tượng thế giới sẽ tốt hơn thế nào với thiết kế của tôi hơn 24 pixel!

Giống nhau nhưng khác nhau

Trong cả hai trường hợp, bạn có thể nhận được kết quả tương tự. Nó chỉ đi xuống cách bạn muốn nghĩ về không gian. Và nếu bạn không thích phần máng xối ngoài đệm, hãy bỏ chọn ô đó và tự cuộn. (Trong tương lai, tôi dự đoán sẽ có nhiều quyền kiểm soát hơn đối với các lề ngoài đó.)

IIRC, quy ước này đến từ Bootstrap (hoặc có thể là lưới 960). Tôi tin rằng Bootstrap vẫn có máng xối bên ngoài, mặc dù tôi đã không viết một tờ kiểu BS trong một thời gian.