如何强制某列占满右边所有空闲的space？

Question

我正在使用网格布局将元素定位到我的页面中。我有 4 行，第二行有 3 列。我想强制第二行的第二个和第三个区域只使用必要的space（例如使用宽度：fit-content;）并填充所有剩余的空闲space调整第一个区域的宽度。我该怎么做？

<!DOCTYPE html>  
<html>
<head>
    <title>Login - ErasmusAdvisor</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="template/stile.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <header>
        <h1>Login</h1>
    </header>
    <nav id="menu-principale">
        <p>Menu</p>
    </nav>
    <div id="ricerca">
        <form action="../index.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
    <div id="utente">
        <p>Utente</p>
    </div>
    <main>
        <fieldset>
            <legend>Accedi al tuo account</legend>
            <form method="POST" action="../index.php">
                <label for="email">Indirizzo email</label><br>
                <input type="email" name="email" placeholder="Indirizzo email" autocomplete="" required><br>
                <label for="password">Password</label><br>
                <input type="password" name="password" placeholder="Password" autocomplete="" required><br>
                <input type="submit" name="login" value="Accedi">
            </form>
        </fieldset>
    </main>
    <footer>
        <address>Progetto: Erasmus Advisor</address>
        <address>Scuola: IIS Vittorio Veneto</address>
    </footer>
</body>
</html>

这是我正在使用的所有 css：

:root{
    --default-color: #333;
    --default-background-color: #faf9f2;
    --default-elements-background-color: #fccf03;
    --default-border: 1px solid #333;
    --default-border-radius: 3px;
    --default-margin: 5px;
    --default-padding: 5px;
    --default-font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

body{
    color: var(--default-color);
    font-family: var(--default-font-family);
    background: var(--default-background-color);
    margin: 0px;
    height: 100vh;
    display: grid;
    grid-template-areas:
        'header header header header header header header'
        'menu menu menu menu menu ricerca utente'
        'main main main main main main main'
        'footer footer footer footer footer footer footer';
}

header{
    grid-area: header;
    background: var(--default-elements-background-color);
    border: var(--default-border);
    padding: var(--default-padding);
    margin: 0px;
}

nav{
    grid-area: menu;
    border-left: var(--default-border);
    padding: var(--default-padding);
    background: grey;
}

#ricerca{
    grid-area: ricerca;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-left: var(--default-border);
    padding: var(--default-padding);
    background: red;
    width: fit-content;
}

#ricerca input[type="text"]{
    padding: var(--default-padding);
    font-size: large;
}

#ricerca button[type="submit"]{
    background-color: var(--default-elements-background-color);
    padding: var(--default-padding);
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#utente{
    grid-area: utente;
    border-left: var(--default-border);
    border-right: var(--default-border);
    padding: var(--default-padding);
    background: yellow;
    width: fit-content;
    margin-right: 0px;
}

main{
    display: grid;
    grid-area: main;
    min-height: 500px;
    border: var(--default-border);
    border-bottom: none;
    align-items: center;
    justify-items: center;
}

fieldset{
    margin: var(--default-margin);
    font-size: larger;
    height: 300px;
    width: 300px;
    border: var(--default-border);
    border-radius: var(--default-border-radius);
}

fieldset legend {
    text-align: center;
    text-decoration: underline;
}

form{
    width: fit-content;
    height: fit-content;
    margin: auto;
    vertical-align: central;
}

form input{
    border: var(--default-border);
    font-size: large;
    background: #FFF;
    padding: var(--default-padding);
    margin-bottom: 5px;
    border-radius: var(--default-border-radius);
}

form input[type="submit"]{
    float: right;
    margin: var(--default-margin);
    margin-right: 0px;
    background: var(--default-elements-background-color);
    cursor: pointer;
}

footer{
    grid-area: footer;
    border: var(--default-border);
    background: var(--default-elements-background-color);
    padding: 5px;
}

footer address{
    display: inline;
    margin-right: 10px;
}

Answer 1

如果您在#ricerca 和#utente 上省略宽度，它将填满剩余的 space。

Answer 2

所以，解决方法很简单。只需使用

grid-template-rows: fit-content(10%) fit-content(10%) auto fit-content(10%);

在网格模板区域之后。

如何强制某列占满右边所有空闲的space？

How to force a column to occupy all the free space on the right?

html

css

column-width

css-grid