मैं सोच रहा था, अगर कॉलम मोड में सीएसएस ग्रिड का उपयोग करना संभव है और कोशिकाओं को सांप लाइनों में भरना संभव है। ऐशे ही:

    01 06 07 12
    02 05 08 11
    03 04 09 10

इस पर कोई सलाह? आपकी सहायता के लिए धन्यवाद।

6
xioverflow 29 अक्टूबर 2019, 00:21

1 उत्तर

सबसे बढ़िया उत्तर

यहाँ एक विचार है यदि हम इस तथ्य पर विचार करें कि आपके पास हमेशा 3 पंक्तियाँ होंगी:

.container {
  display:grid;
  grid-template-rows:20px 20px 20px;
  grid-auto-columns:20px;
  grid-auto-flow:column dense;
}

.container > div:nth-child(6n + 4) { grid-row:3; }
.container > div:nth-child(6n + 5) { grid-row:2; }
/*.container > div:nth-child(6n + 6) { grid-row:1; }  to illustrate the pattern but not needed */

/* Irrelevant styles */
.container {
  grid-gap:5px;
  counter-reset:num;
  margin:10px;
}

.container > div {
  border:1px solid;
}
.container > div:before{
  content:counter(num);
  counter-increment:num;
}
<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

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

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

जिसे आप आसानी से 4 पंक्तियों या किसी भी संख्या तक बढ़ा सकते हैं:

.container {
  display:grid;
  grid-template-rows:repeat(4,20px);
  grid-auto-columns:20px;
  grid-auto-flow:column dense;
}

.container > div:nth-child(8n + 5) { grid-row:4; }
.container > div:nth-child(8n + 6) { grid-row:3; }
.container > div:nth-child(8n + 7) { grid-row:2; }
/*.container > div:nth-child(8n + 8) { grid-row:1; }*/
/* For N = number of rows 
  .container > div:nth-child((2xN)n + (N+1)) { grid-row:N; }
  .container > div:nth-child((2xN)n + (N+2)) { grid-row:(N-1); }
  ....
  .container > div:nth-child((2xN)n + (2xN)) { grid-row:1; }

*/

.container {
  grid-gap:5px;
  counter-reset:num;
  margin:10px;
}

.container > div {
  border:1px solid;
}
.container > div:before{
  content:counter(num);
  counter-increment:num;
}
<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

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

<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
6
Temani Afif 13 नवम्बर 2019, 08:20