css grid 布局如何实现第一排3个第二排3个的效果?

作者站长头像
站长
· 阅读数 17

效果如图:css grid 布局如何实现第一排3个第二排3个的效果?我是用两个 gird 写的,有没有办法用一个 grid 实现,主要是第一行是三等分,导致第二行grid area不好写。

回复
1个回答
avatar
test
2024-06-23

分成6份(3*2)就可以了,下面是一个示例:

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 定义6列 */

  /* 如果希望有行间隔,可以添加下面这行代码,并根据需要调整间隔值 */
  /* grid-row-gap: 10px; */
}

.item {
  padding: 10px;
  text-align: center;
}

/* 第一排的子元素 */
.item:nth-child(-n+3) {
  grid-column: span 2; /* abc 各占据2/6 */
}

/* 第二排的子元素 */
.item:nth-child(n+4) {
  grid-column: span 3; /* de 各占据3/6 */
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容