具有动态列数的CSS网格容器

Question

我有一个具有这些设置的网格容器-

  display: grid;
  grid-template-columns: 1fr 1fr 2fr repeat(4, 1fr) 2rem;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 100%;
  width: 100%;

我最初将容器设置为8列。问题是在某些情况下将是9列。额外的列将被添加到第3列而不是末尾，因此在插入额外的列之后，网格应为-

grid-template-columns: 1fr 1fr 1fr 2fr repeat(4, 1fr) 2rem;

这里是代码

function addColumn(){
  var g = document.querySelector(".my_grid");
  var div = document.createElement("div");
  div.setAttribute("id", "coloumn9");
  g.appendChild(div);
}

body{
  margin:0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.my_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr repeat(4, 1fr) 2rem;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 100%;
  width: 100%;
}

.my_grid div{
  box-sizing: border-box;
  transition: .5s linear all;
}

#coloumn1{background: #0000}
#coloumn2{background: #0001}
#coloumn3{background: #0002}
#coloumn4{background: #0003}
#coloumn5{background: #0004}
#coloumn6{background: #0005}
#coloumn7{background: #0006}
#coloumn8{background: #0007}
#coloumn9{background: #0008; border:1px solid red;}

button {
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  width: 100px;
}

<div class="my_grid">
  <div id="coloumn1"></div>
  <div id="coloumn2"></div>
  <div id="coloumn3"></div>
  <div id="coloumn4"></div>
  <div id="coloumn5"></div>
  <div id="coloumn6"></div>
  <div id="coloumn7"></div>
  <div id="coloumn8">
    2rem
  </div>
</div>
<button onclick="addColumn()">Add Column</button>

所以问题是如何处理这种情况？我尝试通过自动填充功能对其进行动态设置，但它不起作用。

Answer 1

如果我做对了，您想添加一个动态div或在末尾添加一个div。这是使它排在第三位的方法。

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.my_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr repeat(4, 1fr) 2rem;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 100%;
  width: 100%;
}

.my_grid div {
  box-sizing: border-box;
  transition: 0.5s linear all;
}

#coloumn1 {
  background: #0000;
}

#coloumn2 {
  background: #0001;
}

#coloumn3 {
  background: #0002;
}

#coloumn4 {
  background: #0003;
}

#coloumn5 {
  background: #0004;
}

#coloumn6 {
  background: #0005;
}

#coloumn7 {
  background: #0006;
}

#coloumn8 {
  background: #0007;
}

#coloumn9 {
  background: red;
  border: 1px solid red;
  grid-column: 3 / 4;
}

<div class="my_grid">
  <div id="coloumn1"></div>
  <div id="coloumn2"></div>
  <div id="coloumn3"></div>
  <div id="coloumn4"></div>
  <div id="coloumn5"></div>
  <div id="coloumn6"></div>
  <div id="coloumn7"></div>
  <div id="coloumn8"></div>
  <div id="coloumn9"></div>
</div>

Answer 2

您可以在开始时依靠order属性和隐式额外列的创建。诀窍是使用nth-child来考虑存在9个项目的情况，以便：

• 将第一项放置在显式网格之外。它将使用隐式的一个（开始时将添加1fr）
• 将最后一项column9放在开头。
• 强制项目column2在column9之前

function addColumn(){
  var g = document.querySelector(".my_grid");
  var div = document.createElement("div");
  div.setAttribute("id", "coloumn9");
  g.appendChild(div);
}

body{
  margin:0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.my_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr repeat(4, 1fr) 2rem;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;/* our implicit column */
  height: 100%;
  width: 100%;
}

.my_grid div{
  box-sizing: border-box;
  transition: .5s linear all;
}

#coloumn1{background: #0000}
#coloumn2{background: #0001}
#coloumn3{background: #0002}
#coloumn4{background: #0003}
#coloumn5{background: #0004}
#coloumn6{background: #0005}
#coloumn7{background: #0006}
#coloumn8{background: #0007}

/* added */
#coloumn9{
  background: #0008; 
  border:1px solid red;
  order:-1; /* place at the start */
}

#coloumn1:first-child:nth-last-child(9) {
  background:green;
  grid-column:-10; /* place before everything outisde the explicit grid */
}
#coloumn2:nth-child(2):nth-last-child(8) {
  background:blue;
  order:-1; /* place before column9*/
}
/**/

button {
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  width: 100px;
}

<div class="my_grid">
  <div id="coloumn1"></div>
  <div id="coloumn2"></div>
  <div id="coloumn3"></div>
  <div id="coloumn4"></div>
  <div id="coloumn5"></div>
  <div id="coloumn6"></div>
  <div id="coloumn7"></div>
  <div id="coloumn8">
    2rem
  </div>
</div>
<button onclick="addColumn()">Add Column</button>

Answer 3

纯css永远不能向后解析。所以父母不能根据孩子改变。以下js解决了您的问题。 （jQuery）

$('.yourclass').each(function(){
    $(this).addClass('children'+$(this).children().length);
})