后端开发教程 - Java、Spring Boot 实战 - msg200.com
CSS 网格布局模板区域（轻松布局的秘密）
今天让我们开始了解 CSS 网格布局，并通过命名区域轻松处理网格位置，因此让我们构建一个漂亮的小信用卡布局。
阅读全文或在 Youtube 上观看我的代码：
结果
CSS 网格布局入门
如果你查看信用卡或搜索其图片，你会注意到某些信息被放置在特定的位置。因此，布局并非遵循特定的文本流，而是明确/绝对定位。终于，有了 CSS 网格布局，我们可以更轻松地完成这类任务。
还记得那些用表格来设置网页布局的时代吗？如果你幸运的话，你不会记得，因为它一点也不好玩。CSS 网格布局弥补了这一点。它的工作原理类似，它将容器划分成由行和列组成的网格。然后，容器的子元素可以分配给该网格的特定单元格，也可以跨越多个相邻的单元格。
标记
因此，对于基本标记，有一个包装div.credit-card，它将作为网格布局容器。嵌套的子元素包含信用卡号、持卡人、有效期等信息。
<div class="credit-card">
<div class="provider"><i class="fab fa-cc-visa"></i></div>
<div class="number">xxxx xxxx xxxx xx80</div>
<div class="good-through-label">good<br/>through</div>
<div class="good-through-value">09/24</div>
<div class="holder">Jane Doe</div>
<a class="select" href="#">Select</a>
<div class="validity">valid</div>
</div>
基本造型
让我们首先对容器应用一些样式，例如
- 使用与信用卡上浮雕字母相似的字体
- 圆角
- 通过
backdrop-filter属性添加玻璃态（目前仅限基于 Webkit 的浏览器）
.credit-card {
font-family: 'Share Tech Mono', monospace;
color: white;
border: 1px solid rgba(white, 0.2);
border-radius: 0.5rem;
box-shadow: 0px 0px 8px 2px rgba(black, 0.2);
padding: 1rem;
// glassmorphism FTW
backdrop-filter: blur(4px);
background: rgba(white, 0.2);
}
网格布局设置
那么，让我们开始网格布局的基本设置。最重要的是display: grid;启用网格布局本身。
可以通过grid-template-rows|columns定义行和列的数量和比例来定义。在我们的例子中，我们需要 4 个大小相同的列，它们加起来就是整个可用的垂直/水平空间。1fr 1fr 1fr 1fr我们不用写公式，直接使用repeat(count, dimension)函数即可。
通过grid-column|row-gap它可以定义所有行和列之间的间距。这也是fr单位发挥作用的地方。我们也可以25%在调整行和列的大小时使用它。但是，一旦这样做，间隙会使整个容器在25% 的范围内fr增大。所谓的可用空间比例会正确地考虑间隙。因此，扣除间隙后，每行/列都会占用相等的可用空间比例。
.credit-card {
...
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-row-gap: 0.5rem;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 0.35rem;
}
定义命名区域
为了在网格中定位项目，需要将它们分配到单元格中。每个单元格都有行号和列号来标识其在网格中的位置。然而，这可能会变得非常繁琐，并且对布局的变化不太稳健。这很有帮助grid-template-areas。grid-template-areas允许我们为单元格分配区域名称。也可以为多个相邻的单元格分配相同的区域名称。
因此，在网格的第一行中仅provider给出了，其余单元格不属于任何由点表示的命名区域。
在第二行中，number占用了所有四个单元格，这就是为什么该标识符重复多次，每次都用空格分隔。
.credit-card {
...
grid-template-areas: "provider . . ."
"number number number number"
"good-through-label good-through-value . validity"
"holder holder holder select";
}
使用命名区域
现在，每个子项只需分配其区域名称，并自动跨越属于该区域的单元格。就这么简单。
注意：网格区域名称周围没有引号。
.credit-card {
...
> .provider {
grid-area: provider;
}
> .number {
grid-area: number;
}
> .good-through-label {
grid-area: good-through-label;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.65rem;
}
> .good-through-value {
grid-area: good-through-value;
}
> .holder {
grid-area: holder;
}
> .select {
grid-area: select;
}
> .validity {
grid-area: validity;
}
}
让它变得漂亮
现在，让我们给有效性指示器添加一个亮绿色，并使其更加美观，同时添加一个从透明黑色到 20% 白色渐变的轻微光泽。额外的 box-shadow 也使其更加突出。文本水平和垂直方向均使用 flexbox 和justify-content: center;和居中。align-items: center;
.credit-card {
...
> .validity {
color: white;
border: 1px solid #44a333;
font-size: 1rem;
font-weight: 400;
background: #57c443 linear-gradient(45deg, rgba(black, 0) 0%, rgba(white, 0.25) 100%);
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 3px 6px 0px rgba(black, 0.5);
}
选择按钮几乎相同，除了颜色（蓝色）和字体（无衬线）：
.credit-card {
...
> .select {
background: #2ca7d8 linear-gradient(45deg, rgba(black, 0) 0%, rgba(white, 0.25) 100%);
border: 1px solid #1482ce;
color: white;
font-family: 'Lato';
font-size: 1rem;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 2px 3px 6px 0px rgba(black, 0.5);
}
}
让它变得有趣
最后，让我们给选择按钮添加一些有趣的元素，通过使box-shadow和transform属性可过渡。这样，每次用户点击按钮时，框阴影就会降低，按钮会向左和向上各移动 1px，以提供按下的效果：
.credit-card {
...
> .select {
transition: box-shadow 250ms, transform 250ms;
&:active {
box-shadow: 0px 0px 4px 0px rgba(black, 0.2);
transform: translate(-1px, -1px);
}
}