我使用网格布局将元素定位到页面中。我有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;
}
如果在#ricerca和#utente上去掉宽度，它将填充剩余的空间。
因此，解决方案非常简单。只需使用
grid-template-rows: fit-content(10%) fit-content(10%) auto fit-content(10%);
网格模板区域之后。