前言
CSS Grid 布局是一种非常灵活的布局方式，在前端开发中得到广泛的应用。本文将为大家展示如何使用 CSS Grid 布局来制作一个酷炫的登录界面，并且会详细讲解每一步的实现过程，帮助读者更好地掌握 CSS Grid 布局的使用方法。
HTML 结构
在开始之前，我们先来看一下本文所使用的 HTML 结构：
---- ---- -- ---
---- ------------------
---- ------------------------
---- -------------
------ ---------------------------
------ ----------- ------------- ----------------
------ --------------------------
------ --------------- ------------- ----------------
------- -----------------------------
------
------CSS 样式
接下来，我们通过 CSS 样式来对这个登录界面进行美化，并使用 CSS Grid 布局来实现灵活的排版。
布局
CSS Grid 布局的核心是使用容器（container）和项目（item）来进行排版。我们首先给容器设置相关样式：
-- ---- -- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --- ---- ---- ----- -
其中，我们使用 display: grid; 将容器设置为 Grid 布局，使用 grid-template-columns: repeat(2, 1fr); 和 grid-template-rows: 1fr 2fr; 分别设置容器的列（2 列，每列占 1 份）和行（第 1 行占 1 份，第 2 行占 2 份）。
另外，我们在容器和项目之间使用了 gap: 20px; 属性来设置它们之间的间隙。
接下来，我们对项目进行样式设置：
-- ---- -- ------ - ------------------ -- ---------------- -- ----------- ------- - ----- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- - ----- - -------- ------ -------------- ----- - ------ ------ - -------- ----- ------- ----- -------------- ---- -------------- ----- - ------ - ----------------- -------- ------ ----- ------- -------- -
我们可以看到，在这段 CSS 样式中，我们将 title 项目设置为跨越 2 列，即 grid-column-start: 1; 和 grid-column-end: 3;。这样可以使得标题在容器的中间位置。
接下来，我们使用了 display: flex; 将 form 项目设置为弹性布局，并且使用了 flex-direction: column;、justify-content: center; 和 align-items: center; 来使得表单在容器中垂直居中并且水平居中。
另外，我们使用了 display: block; 来使得 label 元素成为块级元素，并且使用 margin-bottom: 10px; 为它们之间添加了 10px 的外边距。
最后，我们使用了 padding: 10px;、border: none;、border-radius: 5px; 和 margin-bottom: 10px; 来为 input 和 button 元素添加样式，使用 background-color: #3498db; 和 color: #fff; 来让 button 元素具有更加醒目的视觉效果。
效果
最终效果如下图所示：
总结
本文使用了 CSS Grid 布局来制作了一个酷炫的登录界面，并且通过详细的代码讲解，希望能够帮助读者更好地掌握 CSS Grid 布局的使用方法，了解到如何使用容器和项目进行灵活的排版布局。同时，这个登录界面也可以作为学习 CSS Grid 布局的一个实例，供读者参考。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/664eb45ed3423812e4f31ef2