css创建一个表单在页面上_如何使用CSS Grid创建简单表单

css创建一个表单在页面上

You learned to create a simple form with Flexbox in the previous article. Today, you’ll understand how to create the same thing with CSS Grid.

在上一篇文章中，您学习了使用Flexbox创建简单表单的方法。 今天，您将了解如何使用CSS Grid创建相同的东西。

Here’s what we’re building:

这是我们正在构建的：

使用CSS Grid构建表单 (Building the form with CSS Grid)

From the picture above, we know the form contains two elements:

从上面的图片中，我们知道表单包含两个元素：

1. An email field
   电子邮件字段
2. A submit button
   提交按钮

Here’s the HTML:

这是HTML：

<form>   <input type="email" name="email">   <button type="submit">Send</button> </form>

To build the form with CSS Grid, you need to set the parent’s display property to grid.

要使用CSS Grid构建表单，您需要将父级的display属性设置为grid 。

form {   display: grid; }

Here’s what you get:

这是您得到的：

Why did we get two rows?

为什么我们得到两行？

We get two rows because we did not specify the number of columns for the grid. Browsers will always default to one column.

我们得到两行，因为我们没有指定网格的列数。 浏览器将始终默认为一列。

For this form, we need to set two columns.

对于此表单，我们需要设置两列。

1. The first column should expand to fill up any available space
   第一列应展开以填充所有可用空间
2. The second column should be sized according to its contents
   第二列的大小应根据其内容而定

For the first column, we can use the fr unit. For the second column, we can use auto.

对于第一列，我们可以使用fr单位。 对于第二列，我们可以使用auto 。

form {   display: grid;   grid-template-columns: 1fr auto; }

With this, you have completed form’s layout. Here’s a Codepen for you to play around with:

这样，您就完成了表单的布局。 这是一个Codepen，供您试用：

Simple form with CSS Grid by Zell Liew (@zellwk) on CodePen.

Zell Liew( @zellwk )在CodePen上使用CSS Grid 编写的 简单表格 。

当元素的高度不相等时 (When elements are of unequal height)

We will simulate elements of unequal height by substituting the button’s text with an SVG. This is the same as what we’ve done in the previous article.

我们将通过用SVG替换button的文本来模拟高度不等的元素。 这与我们在上一篇文章中所做的相同 。

<form action="#">   <input type="email" placeholder="Enter your email">   <button type="button"><svg> <!-- a smiley icon --> </svg></button> </form>

Notice the input’s height increases to fit the large SVG icon too! Once again, we don’t have to write any extra code. This happens because grid items are stretched vertically to fill up any available space.

请注意， input的高度也会增加以适合较大的SVG图标！ 再一次，我们不必编写任何额外的代码。 发生这种情况是因为网格项目在垂直方向上被拉伸以填充任何可用空间。

If you want to change this behavior, you can change the align-items property to either start, end, or center.

如果要更改此行为，可以将align-items属性更改为start ， end或center 。

Here’s a Codepen for you to play around with:

这是一个Codepen，供您试用：

Simple form with CSS Grid (with SVG Button) by Zell Liew (@zellwk) on CodePen.

Zell Liew( @zellwk )在CodePen上使用CSS Grid(带有SVG按钮)的简单表单 。

结语 (Wrapping up)

CSS Grid makes it easy to create layouts. It doesn’t have to be used for macro layouts. It can also be used for micro layouts like the form example you’ve seen here.

CSS Grid使创建布局变得容易。 它不必用于宏布局。 它也可以用于微型布局，例如您在此处看到的表单示例。

Have fun with CSS Grid!

玩CSS网格吧！

Thanks for reading. Did this article help you in any way? If you did, I hope you consider sharing it. You might help someone out. Thank you!

谢谢阅读。 本文对您有任何帮助吗？ 如果这样做， 希望您考虑共享它 。 您可能会帮助某人。 谢谢！

This article was originally posted on my blog.Sign up for my newsletter if you want more articles to help you become a better front-end developer.

本文最初发布在我的博客上 。 如果您想要更多文章来帮助您成为更好的前端开发人员，请注册我的新闻通讯 。

翻译自: https://www.freecodecamp.org/news/creating-a-simple-form-with-css-grid-a99a2706bb0f/

css创建一个表单在页面上