主页 / 问题 / 1585370
Accepted
Майя
Asked:2024-06-27 11:57:07 +0000 UTC2024-06-27 11:57:07 +0000 UTC

如何制作这样的网格？ [关闭]

  • 772

如何制作一个网格，以便当添加更多内容时，后续内容也会出现？ 在此输入图像描述

javascript

1 个回答

  1. Best Answer

    #x{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 20vh;
  grid-gap: 10px;
  background: gray;
}

#x > *{
  background: brown;
  border: 2px solid skyblue;
  width: 100%; height: 100%;
  display: list-item;
  list-style: decimal inside;
}

#x > *:nth-child(7n),
#x > *:nth-child(7n-1),
#x > *:nth-child(7n-2),
#x > *:nth-child(7n-3)
{
  color: violet;
  grid-column: span 3;
}

#x > *:nth-child(7n-4),
#x > *:nth-child(7n-5),
#x > *:nth-child(7n-6)
{
  color: antiquewhite;
  grid-column: span 4;
}
    <div id='x' data-comment='то самое чувство, когда увидел интересную задачку и от счастья
наложил кирпичей :3'>
  <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
  <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
  <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
</div>

    • 4

相关问题