我使用带有两列的CSS网格。我希望.right中的按钮始终水平相邻，只占用必要的空间，即两个按钮的宽度，而.left div占用剩余的空间。当窗口宽度较窄时，.right div会折叠，使按钮垂直位于彼此的顶部，当窗口宽度较宽时，按钮在.right div内有太多空间。如何使用css网格实现这一目标？任何指针都将非常感激。
.line {
display: grid;
grid-gap: 10px;
/* This illustrates the idea in terms of postioning, but, when the window is at a narrower width the .right div collapse so that the buttons are vertically on top of each other and at a wider width gives the buttons withing the .right have too much space */
grid-template-columns: 5fr 1fr;
}
.left {
background-color: lightcoral;
}
.right {
background-color: lightcyan;
}<div class="line">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="right">
<button>Delete</button>
<button>Edit</button>
</div>
</div>
答案 0 :(得分：0)
只需进行一项更改即grid-template-columns: 5fr auto;。