ग्रिड / टाइल दृश्य कैसे बनाएं?

Question

उदाहरण के लिए, मेरे पास कुछ क्लास। आर्टिकल हैं, और मैं इस क्लास को ग्रिड व्यू के रूप में देखना चाहता हूं। इसलिए मैंने इस शैली को लागू किया:

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

वह शैली .article को टाइल / ग्रिड बना देगा। यह निश्चित ऊंचाई के साथ ठीक है। लेकिन अगर मैं ऑटो को ऊंचाई सेट करना चाहता हूं (स्वचालित रूप से इसके भीतर डेटा के अनुसार खिंचाव), ग्रिड गंदा लग रहा है।

और मैं इस तरह से विचार करना चाहता हूं:

Answer 1

इस तरह के लेआउट को मेसनरी लेआउट कहा जाता है । चिनाई एक और ग्रिड लेआउट है लेकिन यह तत्वों की अंतर ऊंचाई के कारण व्हाट्सएप को भर देगा।

jQuery चिनाई चिनाई लेआउट बनाने के लिए jQuery प्लगइन में से एक है।

वैकल्पिक रूप से, आप CSS3 columns का उपयोग कर सकते हैं । लेकिन अभी के लिए jQuery आधारित प्लगइन सबसे अच्छा विकल्प है क्योंकि CSS3 कॉलम के साथ संगतता समस्या है।

Comments

रहने के लिए यहां CSS3-way जोड़ा !

— बेहरदखोडयार

Answer 2

आप flexbox का उपयोग कर सकते हैं।

1. अपने तत्वों को एक बहुस्तरीय कॉलम फ्लेक्स कंटेनर में रखें

   #flex-container {
     display: flex;
     flex-flow: column wrap;
   }
   

2. तत्वों को फिर से व्यवस्थित करें, ताकि DOM ऑर्डर लंबवत के बजाय क्षैतिज रूप से सम्मानित किया जाए। उदाहरण के लिए, यदि आप 3 कॉलम चाहते हैं,

   #flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
   #flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
   #flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */
   

3. प्रत्येक स्तंभ के पहले आइटम से पहले एक स्तंभ को तोड़ने पर मजबूर करें:

   #flex-container > :nth-child(-n + 3) {
     page-break-before: always; /* CSS 2.1 syntax */
     break-before: always;  /* New syntax */
   }
   

   अफसोस की बात है, सभी ब्राउज़र फ्लेक्सबॉक्स में अभी तक लाइन ब्रेक का समर्थन नहीं करते हैं। यह फ़ायरफ़ॉक्स पर काम करता है, हालांकि।

#flex-container {
  display: flex;
  flex-flow: column wrap;
}

#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

#flex-container > :nth-child(-n + 3) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}

/* The following is optional */
#flex-container > div {
  background: #666;
  color: #fff;
  margin: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
}
#flex-container > :nth-child(1) { height: 100px; }
#flex-container > :nth-child(2) { height: 50px; }
#flex-container > :nth-child(3) { height: 75px; }
#flex-container > :nth-child(4) { height: 50px; }
#flex-container > :nth-child(5) { height: 100px; }
#flex-container > :nth-child(6) { height: 50px; }
#flex-container > :nth-child(7) { height: 100px; }
#flex-container > :nth-child(8) { height: 75px; }
#flex-container > :nth-child(9) { height: 125px; }

<div id="flex-container">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
  <div>7</div><div>8</div><div>9</div>
</div>

Comments

वाह, यह एक पुराना सवाल था। और चिनाई लेआउट का अनुकरण करने के लिए फ्लेक्सबॉक्स का उपयोग करना सबसे अच्छा विकल्प नहीं है। आपका स्निपेट इस तरह से काम नहीं कर रहा है: डी, ​​मुझे लगता है कि आप इस बिंदु को याद करते हैं। CSS3 कॉलम का उपयोग करके इस समस्या को हल करने के लिए अन्य समाधान है। लेकिन, उत्तर के लिए धन्यवाद

— अरियोना रियान

@ArionaRian फ़ायरफ़ॉक्स पर स्निपेट आज़माएं, अन्य ब्राउज़र अभी तक मजबूर लाइन ब्रेक का समर्थन नहीं करते हैं। और हाँ, CSS कॉलम भी काम कर सकते हैं, लेकिन फ्लेक्सबॉक्स के विपरीत, जो लेआउट के लिए टेक्स्ट की तुलना में अधिक डिज़ाइन किए गए लगते हैं।

— ओरिऑल

हाँ, यह समस्या है :), यही कारण है कि अब तक, हम अभी भी इस तरह के डिज़ाइन को बिछाने के लिए चिनाई / आइसोटोप प्लगइन से चिपके हुए हैं।

— अरिओना रियान

बस प्रदर्शन: फ्लेक्स; फ्लेक्स-रैप: रैप; कंटेनर पर (और अधिक कुछ नहीं), और यह Win11 और Win7 पर क्रोम, फ़ायरफ़ॉक्स, सफारी, IE11 में सही काम करता है। मिनट-ऊंचाई से सावधान रहें, हालांकि (देखें caniuse.com/#search=flex-wrap )

— LBJ

@LBJ लेकिन फिर तत्वों को पंक्तियों में व्यवस्थित किया जाता है। यहाँ वांछित व्यवहार नहीं है

— ओरिऑल

Answer 3

अब CSS3 व्यापक ब्राउज़रों के माध्यम से व्यापक रूप से उपलब्ध और संगत है, इसका समय SO के स्निपेट टूल से लैस एक शुद्ध समाधान के लिए है:

---

बनाने के लिए चिनाई CSS3 का उपयोग कर लेआउट column-countके साथ साथ column-gapपर्याप्त होगा। लेकिन मैंने media-queriesइसे उत्तरदायी बनाने के लिए भी उपयोग किया है।

कार्यान्वयन में गोता लगाने से पहले, कृपया विचार करें कि अपने कोड को विरासत ब्राउज़र, विशेष रूप से IE8 के लिए अनुकूल बनाने के लिए jQuery मेसनरी लाइब्रेरी फॉलबैक जोड़ना अधिक सुरक्षित होगा।

<!--[if lte IE 9]>
    <script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->

ये रहा:

.masonry-brick {
    color: #FFF;
    background-color: #FF00D8;
    display: inline-block;
    padding: 5px;
    width: 100%;
    margin: 1em 0; /* for separating masonry-bricks vertically*/
}

@media only screen and (min-width: 480px) {
    .masonry-container {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 768px) {
    .masonry-container {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 960px) {
    .masonry-container {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

<div class="masonry-container">
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
   <div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>

Comments

क्या आप जानते हैं कि चिनाई और कंटेनर में वस्तुओं के बीच समान स्थान कैसे है?

— इंट्रक्रेटर

यह अच्छा है, लेकिन बहुत से लोगों के लिए, आदेश की आवश्यकता है masonry bricks। स्तंभ चीजों को ऊपर से नीचे की ओर आदेश देता है, सवाल उसी क्षैतिज रूप से रहने के लिए पूछ रहा था, न कि लंबवत स्विच करने के लिए। उदाहरण के लिए, SHOULD के ऊपर पाया जाने वाला सबसे छोटा ब्लॉक तीसरे कॉलम में है लेकिन शीर्ष पंक्ति में है।

— 3:11 बजे jscul

Answer 4

केवल सीएसएस के साथ हल करने का सबसे अच्छा विकल्प सीएसएस कॉलम-काउंट संपत्ति का उपयोग कर रहा है।

 .content-box {
   border: 10px solid #000000;
   column-count: 3;
 }

अधिक जानकारी के लिए इसे देखें : https://developer.mozilla.org/en/docs/Web/CSS/column-count

Answer 5

आप प्रदर्शन का उपयोग कर सकते हैं: ग्रिड

उदाहरण के लिए:

यह 7 कॉलम वाला एक ग्रिड है और आपकी पंक्तियों का आकार ऑटो है।

.myGrid{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: auto;
      grid-gap: 10px;
      justify-items: center;
}

अधिक जानकारी के लिए अनुसरण लिंक पर जाएं : https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 6

साथ सीएसएस ग्रिड मॉड्यूल आप एक बना सकते हैं बहुत समान लेआउट।

कोडपेन डेमो

1) तीन निश्चित-चौड़ाई वाले ग्रिड कॉलम सेट करें

ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  ...
}

2) सुनिश्चित करें कि बड़ी ऊंचाई वाले आइटम 2 पंक्तियों वाले हों

li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 85vh;
  margin: 4vh auto;
  border: 5px solid green;
  padding: 1rem;
  overflow: auto;
  counter-reset: item;
}
li {
  position: relative;
}
li:after {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  padding: 0.3rem;
  background: salmon;
  color: white;
  left:0;
  top:0;
}
img {
  outline: 5px solid salmon;
}
li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
  grid-row: span 2;
}

<ul>
  <li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
  <li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>

कोडपेन डेमो

समस्याये:

• वस्तुओं के बीच अंतराल एक समान नहीं होगा
• आपको बड़ी / उच्च वस्तुओं को 2 या अधिक पंक्तियों में मैन्युअल रूप से सेट करना होगा
• सीमित ब्राउज़र समर्थन :)

Answer 7

और यदि आप चिनाई से भी आगे जाना चाहते हैं, तो आइसोटोप का उपयोग करें http://isotope.metafizzy.co/ यह चिनाई का उन्नत संस्करण है (उसी लेखक द्वारा विकसित) यह शुद्ध सीएसएस नहीं है, यह जावास्क्रिप्ट की मदद से उपयोग करता है लेकिन यह बहुत लोकप्रिय है, इसलिए आपको बहुत सारे डॉक्स मिल जाएंगे

यदि आप इसे बहुत जटिल पाते हैं तो कई प्रीमियम प्लगइन्स हैं जो पहले से ही आइसोटोप पर आधारित हैं, उदाहरण के लिए मीडिया बॉक्स http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

Answer 8

एक ग्रिड-आधारित उदाहरण है।

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  padding: 10px;
}

.grid-layout .item {
  padding: 15px;
  color: #fff;
  background-color: #444;
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

.span-3 {
  grid-column-end: span 3;
  grid-row-end: span 4;
}

<div class="grid-layout">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-3">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item span-2">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>

राहेल एंड्रयू एफटीडब्ल्यू द्वारा इस कोड-पेन के आधार पर