Как заставить колонку занимать все свободное пространство справа? - PullRequest
Новая
       77

Как заставить колонку занимать все свободное пространство справа?

0 голосов
/ 27 февраля 2020

Я использую сетку для размещения элементов на моей странице. У меня 4 строки, а во втором 3 столбца. Я хотел бы заставить вторую и третью области второго ряда использовать только необходимое пространство (например, используя width: fit-content;) и заполнить все оставшееся свободное пространство, регулируя ширину первой области. Как я могу это сделать? 

<!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;
}

Ответы [ 2 ]

0 голосов
/ 29 февраля 2020

Итак, решение довольно простое. Просто используйте 

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

после сетки-шаблона-областей.

0 голосов
/ 27 февраля 2020

Если вы укажете ширину в #ricerca и #utente, она заполнит оставшееся пространство.

...