Tôi muốn tạo bố cục trang web với cột linh hoạt có thể được gắn với một số chiều rộng tối đa nhất định. Ví dụ: trình đơn thanh bên chiếm 30% không gian ngang có sẵn nhưng không được lớn hơn 200px.Làm cách nào để giới hạn độ rộng của cột lưới CSS3 được chia tỷ lệ?
Với CSS flexbox, tôi sẽ đi với một giải pháp như thế này:
.flexbox-layout {
display: flex;
}
.flexbox-sidebar {
flex: 1 1 30%;
max-width: 200px;
background-color: lightblue;
}
.flexbox-content {
flex: 1 1 70%;
background-color: lightgreen;
}<p>Layout based on CSS flexbox:</p>
<div class="flexbox-layout">
<div class="flexbox-sidebar">
<ol>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ol>
</div>
<div class="flexbox-content">
<p>Content</p>
</div>
</div>Điều này rõ ràng là một ví dụ rất nhỏ - các bố trí thực sẽ phức tạp hơn nhiều và tôi muốn để tận dụng lợi thế của các tính năng lưới CSS như cột/hàng spanning và cột tự động, kết hợp với các truy vấn phương tiện truyền thông để đáp ứng. Cho đến bây giờ, tôi đã không quản lý để đạt được tác dụng tương tự của mẫu flexbox trên với CSS lưới:
.grid-layout {
display: grid;
grid-template-columns: 30% 70%; /* Max. width for 1st column? */
grid-template-rows: auto;
}
.grid-sidebar {
background-color: lightblue;
}
.grid-content {
background-color: lightgreen;
}<p>Layout based on CSS grid:</p>
<div class="grid-layout">
<div class="grid-sidebar">
<ol>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ol>
</div>
<div class="grid-content">
<p>Content</p>
</div>
</div>Các tiêu đề của những câu hỏi sau đây không có vẻ đầy hứa hẹn, nhưng trong địa chỉ cuối những vấn đề khác:
Can't use max-width to limit content width in css grid column
How to set the maximum width of a column in CSS Grid Layout?
Chức năng minmax(...) của lưới CSS không giúp ích bởi vì nó không tính toán độ rộng cột tương đối - ít nhất là như tôi đã thử.
Có cách nào để thực hiện điều này với lưới CSS không?
Bạn có thể cần phải đặt vùng chứa thành 'lưới-mẫu-khu vực: 30% 70%'. Sau đó đặt 'max-width: 200px' trên chính mục lưới. Thật không may, Grid không xuất hiện để cung cấp một phương pháp sạch hơn.Hàm 'minmax()' là vô dụng trong trường hợp này bởi vì * max * bị bỏ qua khi nó nhỏ hơn * min *, tính đến * min * trong những trường hợp như vậy. –
Tôi đã thử điều này, quá không may, điều này không hoàn toàn hoạt động vì chính cột lưới vẫn tiếp tục phát triển và đẩy cột sau và nội dung của nó (vùng màu xanh lá cây trong đoạn trích của tôi) sang bên phải. – Gyro
Ah, vâng. Điều đó có ý nghĩa. Sau đó, những gì về việc thiết lập cột đầu tiên để 'tự động' trong container, và xác định cả chiều dài min và tối đa trên mục? (Và, btw, tôi nghĩ cột thứ 2 chỉ có thể là '1fr' trên thùng chứa.) –