我正在尝试使用Grid布局在CSS中设计搜索表单。我的目标是使表单看起来类似于：
.
我的方法是有4行：
和10个分数列：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #fff;
}
form {
margin: 10% 2%;
border-radius: 10px;
background-color: #f2f2f2;
padding: 30px;
display: grid;
/*row for search field, row for checkbox, empty row, search button row
checkbox is 1 column, label is 4 columns, search button is 7 columns*/
grid-template-rows: 60px 45px 45px 60px;
grid-template-columns: repeat(10, 1fr);
}
label {
grid-row: 1;
grid-column: 1 / 11;
}
input[type=text] {
grid-row: 2;
grid-column: 2 / 11;
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div class="form">
<form action="{% url 'search_results' %}" method="post">
<label for="search_field">Search for:</label>
<!--<br>-->
<input required id="search_field" type="text" name="search_term" placeholder="Search for...">
<br>
<input id="is_date" type="checkbox" name="is_date" value="date">
<label for="is_date">I'm searching for a date (e.g. 02/10)</label>
<br><br>
<!--<input type="submit" value="Search">-->
<button>Search</button>
</form>
</div>
</body>
</html>但不知何故，我收到下面的输出。
我是以错误的方式接近这个吗？输入/文本字段不应该在第二行而不是第一行带有标签等。？
您的CSS似乎不完整。没有样式应用于多个元素。目前尚不清楚为什么你的布局不起作用。
但是，有几种方法可以使布局工作。你选择了基于行的放置方法，所以我会在答案中坚持这一点。
form {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: 60px 45px 45px 60px;
grid-gap: 5px;
padding: 30px;
border: 2px solid green;
border-radius: 10px;
margin: 10px;
}
label[for="search_field"] {
grid-row: 1;
grid-column: 1 / 4;
}
input#search_field {
grid-row: 2;
grid-column: 1 / 11;
}
input#is_date {
grid-row: 3;
grid-column: 1 / 2;
}
label[for="is_date"] {
grid-row: 3;
grid-column: 2 / 5;
}
button {
grid-row: 4;
grid-column: 3 / 9;
background-color: royalblue;
border: none;
color: white;
font-weight: bold;
}
/* for demo styles only */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #fff;
}
form > * {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid green;
}
button {
background-color: royalblue;
border: none;
color: white;
font: 1.2em verdana;
}<form method="post">
<label for="search_field">Label</label>
<input id="search_field" type="text" placeholder="Search for...">
<input id="is_date" type="checkbox" value="date">
<label for="is_date">Label for Checkbox</label>
<button>Search</button>
</form>