一个合理的开始，一个用网格延伸的div [英] One justify-start, one stretched div with grid

问题描述

使用CSS Grid，我希望能够彼此相邻的两个div，其中第一个的宽度非常合适，如图所示使用justify-self：start，右边的那个应该有宽度填充父div的剩余空间。



父div有

Hi,

Using CSS Grid, I want to be able to have two divs next to each other, where the first has its width perfectly fitted, as seen with justify-self: start, and the one to the right should have its width filling the remaining space of the parent div.

The parent div has

grid-template-areas: 'content remainder'

| content | ----- remainder ----- |



如何在不明确指定宽度的情况下实现这一目标？我看到的问题是，父div在默认情况下将其宽度的50％分配给内容和余数，因此当内容对齐开头时，剩余部分不向左延伸以填充剩余的间隙。如果我将父div设置为justify-content：start，则剩余部分向左移动，但不会向右延伸以填补该间隙。



什么我试过了：



-------------------------- -------------------------------------------------- ----

|content|----- remainder -----|

How can I achieve this without explicitly specifying widths? The problem I'm seeing is that the parent div, by default assigns 50% of its width to content and remainder, so when content is justified to the start, the remainder doesn't stretch left to fill the remaining gap. If I set the parent div to justify-content: start, the remainder moves left, but doesn't stretch right to fill that gap either.

What I have tried:

--------------------------------------------------------------------------------

推荐答案

grid-template-columns: max-content auto;

演示 [ ^ ]

grid-template-columns - CSS | MDN [ ^ ]

网格完整指南| CSS-Tricks [ ^ ]

Demo[^]
grid-template-columns - CSS | MDN[^]
A Complete Guide to Grid | CSS-Tricks[^]

这篇关于一个合理的开始，一个用网格延伸的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！