使用 css 网格和 nthchild 交替行

发布于09月17日

I am working on a product grid with an alternating row pattern like this.
The color containers represent what I think the rows should look like.

基本上第一排有两个产品，第二排有一个产品，无限重复.我一直在try 用css网格+第n个子元素来做，但我似乎做不对.以下是我目前掌握的情况:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column-gap: 0;
  width: 70vw;
  margin: 0 auto;
}

.item:nth-child(3n+3) {
  grid-column: auto / span 2;
  background-color: #e2a7de;
}

/*just for debugging*/
.container{grid-gap:5px;}
.item{background-color: #ffa900;padding: 10px;text-align:center;}

<div class="container">
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
  <div class="item">
    X
  </div>
</div>

我的大脑无法将网格和第n个子元素组合在一起来创建这个布局.如果有人有其他建议，我也愿意用一种更好的方式来创建这种2-1-2模式.谢谢!

.container { display: grid; grid-auto-columns: 1fr; /* all columns equal */ width: 70vw; margin: 0 auto; } .item:nth-child(3n) { grid-column: span 2; /* span and create two columns*/ background-color: #e2a7de; } /*just for debugging*/ .container{grid-gap:5px;} .item{background-color: #ffa900;padding: 10px;text-align:center;}

<div class="container"> <div class="item"> X </div> <div class="item"> X </div> <div class="item"> X </div> <div class="item"> X </div> <div class="item"> X </div> </div>

使用 css 网格和 nthchild 交替行

推荐答案

Css相关问答推荐

Angular中嵌套数组的网格

如何防止背景重复图像被截断

如何在页面顶部创建固定横幅，并在其下方设置滚动条？

Astro网站在使用Astro Build构建后无法正常工作

CSS关键帧中使用transform-origin存在问题的解决方案

如何使用 Tailwind CSS 稳定 React 中的浮动标签？

如何将 CSS 样式应用于 Quarto 输出

tailwind 类的别名？

如何为柔和的配色方案提供易于使用的高对比度替代方案？

您如何设置 Google Places Autocomplete API 的下拉菜单样式？

flex-start 和基线有什么区别？

你如何调试可打印的 CSS？

如何在 CSS 中控制列表样式类型光盘的大小？

如何在 html/css 中的图像旁边垂直居中文本？

如何隐藏 Chrome 中 HTML5
元素上默认显示的箭头？

将文本放在 div 的底部

CSSzoom 高度以匹配宽度 - 可能与外形尺寸

bootstrap 程序中有 7 个相等的列

在 CSS3 中重新启动动画：比删除元素更好的方法吗？

如何使 window.scrollTo() 效果平滑