使用grid-template-area在全视口高度创建一个基于侧边栏的3 x 3平铺CSS网格可以通过以下步骤实现:
<div class="container">
<div class="sidebar">侧边栏</div>
<div class="grid">
<div class="item item1">项目1</div>
<div class="item item2">项目2</div>
<div class="item item3">项目3</div>
<div class="item item4">项目4</div>
<div class="item item5">项目5</div>
<div class="item item6">项目6</div>
<div class="item item7">项目7</div>
<div class="item item8">项目8</div>
<div class="item item9">项目9</div>
</div>
</div>
.container {
display: grid;
height: 100vh; /* 设置容器高度为全视口高度 */
grid-template-columns: 1fr 3fr; /* 将容器分为侧边栏和网格两列 */
grid-template-rows: 1fr; /* 设置容器为单行布局 */
grid-template-areas:
"sidebar grid"; /* 使用grid-template-areas定义区域布局 */
}
.sidebar {
grid-area: sidebar; /* 将侧边栏放置在sidebar区域 */
}
.grid {
grid-area: grid; /* 将网格放置在grid区域 */
display: grid;
grid-template-columns: repeat(3, 1fr); /* 创建3列等宽的网格 */
grid-template-rows: repeat(3, 1fr); /* 创建3行等高的网格 */
gap: 10px; /* 设置网格之间的间隔 */
}
.item {
background-color: #ddd; /* 设置项目背景颜色 */
padding: 10px; /* 设置项目内边距 */
}
.item1 { grid-area: 1 / 1 / span 1 / span 1; }
.item2 { grid-area: 1 / 2 / span 1 / span 1; }
.item3 { grid-area: 1 / 3 / span 1 / span 1; }
.item4 { grid-area: 2 / 1 / span 1 / span 1; }
.item5 { grid-area: 2 / 2 / span 1 / span 1; }
.item6 { grid-area: 2 / 3 / span 1 / span 1; }
.item7 { grid-area: 3 / 1 / span 1 / span 1; }
.item8 { grid-area: 3 / 2 / span 1 / span 1; }
.item9 { grid-area: 3 / 3 / span 1 / span 1; }
grid-template-areas
属性来定义区域布局,通过为每个项目指定grid-area
属性的值,将项目放置到指定的区域中。grid-template-columns
和grid-template-rows
属性来创建网格的列和行,通过repeat
函数设置3列和3行,并且每列和每行的宽度和高度都相等,使用1fr
表示平均分配剩余空间。grid-area
属性来设置每个项目在网格中所占的区域,通过指定起始行、起始列、跨越行数和跨越列数来确定区域位置。请注意,以上推荐的腾讯云产品仅为示例,实际选择产品应根据具体需求和情况进行。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云