Question

嘿，我是CSS网格的新手。看看下面的例子：

＆＃13;

.platform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 20px;
}

.item {
  width:100%;
  background-color:#aaa;
  padding:10px;
  box-sizing:border-box;
  text-align:center;
}

.wrapmed {
  max-width:400px;
}

.wrapsmall {
  max-width:300px;
}

＆＃13;

<div class="platform">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">d</div>
</div>

<br/><br/>

<div class="wrapmed">
  <div class="platform">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
  </div>
</div>

<br/><br/>

<div class="wrapsmall">
  <div class="platform">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
  </div>
</div>

＆＃13;

基本上网格效果很好。但是我从不打算打破网格，使得3个项目位于顶部，只有一个项目位于下一行。

我希望有4列，或两列，或一个。（怎么样）我能实现这种行为吗？

编辑：代码段现在显示了三种可能的情况。案例2是不受欢迎的。

Answer 1

您可以嵌套平台div以控制列的折叠方式。

我添加了一个父平台元素，该元素将两个子平台元素并排放置或彼此放置。
然后在子平台元素内部将这些项目成对或成对分组。

现在，当屏幕尺寸缩小时，子平台元素将首先堆叠以创建2x2网格。
如果屏幕进一步缩小，则子平台中的项目将堆叠并创建1x4网格。

#include <stdio.h>

int main()
{
   char startingString[40] = "Man";
   int i;
   int j = 0;
   int k;
   int p;
   int decimalString[3000];
   int binaryString[3000];
   int quotient;
   int decimal;
   int testString[3000];

   // Convert the ASCII characters into their decimal equivalents. 
  for(i=0; i<3; i++){
      decimalString[i] = startingString [i];
      //testString[i] = startingString [i];
     // printf("%d\n", decimalString[i]);
  }


     for(k=0; k<3; k++){
     quotient = decimalString[k];
     decimal = decimalString[k];
     while (decimal != 0){
         quotient = decimal%2;
         binaryString[j] = quotient;
         decimal = decimal/2;
         j++;

     }



    for(p=j-1; p>=0; p--){
      printf("%d", binaryString[p]);

        }

    }

    return 0;
}

.platform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 20px;
}

.item {
  width:100%;
  background-color:#aaa;
  padding:10px;
  box-sizing:border-box;
  text-align:center;
}

.wrapmed {
  max-width:400px;
}

.wrapsmall {
  max-width:300px;
}

Answer 2

你可以使用偶数或奇数孩子的伪类，所以.item nth-child（偶数）

是否可以始终使用自动填充的偶数列？

2 个答案: