css 网格布局_如何使用CSS网格构建Web表单布局

css 网格布局

在本教程中，我们将探讨如何使用CSS Grid构建几个不同的Web表单。 对于每个示例，我们将首先使用浮点数，然后查看如何使用CSS Grid进行相同的布局。

如果您以前对CSS网格没有任何了解，请阅读我们的初学者系列文章了解CSS网格布局模块 。 让我们开始！

1.基本注册表格

在此布局中，我们将表单分为两列，以便我们可以在左侧显示标签，在右侧显示输入字段。

使用“传统” CSS

这种布局的传统方法可能是使用浮点数为我们提供列。 注意，我们没有form元素的包装器。 我们将直接设置标签和输入的样式。

<form>
    <label for="firstName" class="first-name">First Name</label>
    <input id="firstName" type="text">

    <label for="lastName" class="last-name">Last Name</label>
    <input id="lastName" type="text">

    <!-- more inputs -->
</form>

form {
    overflow: hidden;
}

label {
    float: left;
    width: 200px;
    padding-right: 24px;
}

input {
    float: left;
    width: calc(100% - 200px