12 跨网格

简介: 12 跨网格


image.gif


可以使用 repeat() 函数在 CSS 中快速编写网格。对网格模板列使用 repeat(12, 1fr); 将为每个 1fr 提供 12 列。

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
  grid-column: 1 / 13;
}点击复制复制失败已复制



现在有一个 12 列的轨道网格,我们可以将子项放在网格上。一种方法是使用网格线放置它们。例如, grid-column: 1 / 13 将跨越从第一到最后一行(第 13 行)并跨越 12 列。grid-column: 1 / 5; 将跨越前四个列。

效果2.gif


另一种方法是使用 span 关键字。使用 span ,您可以设置起始线,然后设置从该起点跨越的列数。在这种情况下,grid-column: 1 / span 12 将等效于 grid-column: 1 / 13 ,而 grid-column: 2 / span 6 将等效于 grid-column: 2 / 8

.child-span-12 {
  grid-column: 1 / span 12;
}
目录
相关文章
|
3月前
|
SQL 容灾 关系型数据库
让X不断延伸, 从跨AZ到跨Region再到跨Cloud
本文从“空间”这一维度,聊一聊PolarDB-X在跨空间部署能力上的不断发展和延伸,以及在不同空间范围下的高可用和容灾能力,并着重介绍一下最新的产品能力——GDN(Global Database Network)。
|
18天前
|
存储 缓存 监控
SLB-Backend跨区域/跨数据中心部署
【10月更文挑战第21天】
33 9
|
1月前
|
JavaScript 前端开发 API
10 个纤细的数据网格:为您的项目选择合适的数据网格
10 个纤细的数据网格:为您的项目选择合适的数据网格
29 0
|
3月前
|
存储 容灾 Serverless
函数计算产品使用问题之如何实现跨区域协同工作的需求
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
3月前
|
Perl
如何利用服务网格ASM使用集群外服务做集群内服务的灾备
本文档指导您如何配置阿里云服务网格(ASM)以实现在多集群环境下,服务间的优先访问及故障转移策略。
115 2
|
6月前
|
运维 负载均衡 监控
如何构建Sidecarless模式的高性能服务网格
以上步骤可以帮助你构建一个Sidecarless模式的高性能服务网格。但是,请记住,每个应用都有其特定的需求和约束,你可能需要根据你的具体情况进行调整。
67 1
|
6月前
|
存储 机器学习/深度学习 负载均衡
模型服务网格:云原生下的模型服务管理
模型服务网格:云原生下的模型服务管理
78528 11
模型服务网格:云原生下的模型服务管理
|
网络协议 Linux Perl
如何构建 Sidecarless 模式的高性能服务网格
如何构建 Sidecarless 模式的高性能服务网格
|
存储 Kubernetes 负载均衡
【服务网格】最佳实践在哪里-2:多集群流量管理
各位,多集群这个场景在服务网格这一块也算是越来越热了。早在1.4版本,istio社区就已经提出了多集群环境下istio的部署模型,提供统一的控制面管理多集群中服务的能力。而最近随着服务网格的配套可观测项目kiali推出v1.69版本,我们更是可以在一个kiali实例中就纵览多集群中的流量规则、流量拓扑与服务详情,多集群的使用体验逐渐完善,利用这个场景玩法的用户也是越来越多了。不过,任何新事物的引入
|
存储 监控 架构师
【数据网格架构】什么是数据网格——以及如何不将其网格化
【数据网格架构】什么是数据网格——以及如何不将其网格化
【数据网格架构】什么是数据网格——以及如何不将其网格化