सीएसएस ग्रिड रैपिंग

Question

क्या मीडिया के प्रश्नों का उपयोग किए बिना सीएसएस ग्रिड लपेटना संभव है?

मेरे मामले में, मेरे पास एक गैर-निर्धारक संख्या है जो मुझे एक ग्रिड में रखी गई है और मैं चाहता हूं कि वह ग्रिड लपेटे। फ्लेक्सबॉक्स का उपयोग करते हुए, मैं चीजों को अच्छी तरह से स्थान देने में असमर्थ हूं। मैं मीडिया के सवालों के एक समूह से भी बचना चाहता हूं।

यहाँ कुछ नमूना कोड दिया गया है :

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

और यहाँ एक GIF छवि है:

एक साइड-नोट के रूप में, अगर कोई भी मुझे बता सकता है कि मैं सभी वस्तुओं की चौड़ाई को निर्दिष्ट करने से कैसे बच सकता हूं जैसे grid-template-columnsकि मैं उसके साथ हूं तो यह बहुत अच्छा होगा। मैं बच्चों को अपनी खुद की चौड़ाई निर्दिष्ट करना पसंद करूंगा।

Comments

grid-template-columns: auto auto auto auto;इस मामले में काम करता है? =)

— जैकब क्लीबोइज़

Answer 1

नोटेशन की पुनरावृत्ति संख्या के रूप में auto-fillया तो उपयोग करें ।auto-fitrepeat()

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

---

auto-fill

जब auto-fillपुनरावृत्ति संख्या के रूप में दिया जाता है, यदि ग्रिड कंटेनर में संबंधित अक्ष में एक निश्चित आकार या अधिकतम आकार होता है, तो पुनरावृत्ति की संख्या सबसे बड़ा संभव सकारात्मक पूर्णांक है जो ग्रिड को उसके ग्रिड कंटेनर को ओवरफ़्लो करने का कारण नहीं बनता है।

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

ग्रिड अपने कंटेनर को ओवरफ्लो किए बिना यथासंभव कई पटरियों को दोहराएगा।

इस मामले में, ऊपर दिया गया उदाहरण (छवि देखें) , केवल 5 ट्रैक ओवरफ्लो किए बिना ग्रिड-कंटेनर में फिट हो सकते हैं। हमारे ग्रिड में केवल 4 आइटम हैं, इसलिए शेष स्थान के भीतर एक खाली ट्रैक के रूप में एक पांचवां बनाया जाता है।

शेष शेष स्थान, # 6 ट्रैक, स्पष्ट ग्रिड को समाप्त करता है। इसका मतलब है कि एक और ट्रैक रखने के लिए पर्याप्त जगह नहीं थी।

---

auto-fit

auto-fitकीवर्ड के समान व्यवहार करती है auto-fill, सिवाय इसके कि बाद ग्रिड आइटम प्लेसमेंट एल्गोरिथ्म शेष अंतरिक्ष के भीतर किसी भी खाली पटरियों को ध्वस्त कर दिया जाएगा 0।

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

ग्रिड अभी भी अपने कंटेनर को ओवरफ्लो किए बिना अधिक से अधिक पटरियों को दोहराएगा, लेकिन खाली पटरियों को ढहा दिया जाएगा 0।

एक टूटे हुए ट्रैक को एक निश्चित ट्रैक साइज़िंग फ़ंक्शन के रूप में माना जाता है 0px।

auto-fillछवि उदाहरण के विपरीत , खाली पांचवा ट्रैक ढह जाता है, जो 4 वें आइटम के ठीक बाद स्पष्ट ग्रिड को समाप्त करता है।

---

auto-fill बनाम auto-fit

minmax()फ़ंक्शन का उपयोग करने पर दोनों के बीच का अंतर ध्यान देने योग्य है।

ग्रिड कंटेनर में बचे हुए स्थान के एक अंश के साथ-साथ minmax(186px, 1fr)आइटम 186pxको 186pxसीमित करने के लिए उपयोग करें ।

उपयोग करते समय auto-fill, आइटम तब बढ़ेंगे जब खाली पटरियों को रखने के लिए जगह नहीं होगी।

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

उपयोग करते समय auto-fit, आइटम शेष स्थान को भरने के लिए बढ़ेंगे क्योंकि सभी खाली पटरियों को ढहा दिया जाता है 0px।

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

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

---

खेल का मैदान:

CodePen

ऑटो-फिल पटरियों का निरीक्षण

---

ऑटो-फिट पटरियों का निरीक्षण

Comments

क्या इसे बनाने का कोई तरीका है जो अगली पंक्ति में हैं?

— kentcdodds

जैसे आप फ्लेक्स बॉक्स के साथ, display: gridतत्व उपयोग परjustify-content: center

— स्पिटल

प्रिय @ रिकी इसे कैसे बनाया जाए ताकि माइनमैक्स की पहली संपत्ति, जैसे। repeat(auto-fill, minmax(186px, 1fr));पिक्सेल नहीं है, लेकिन जब तक div के अंदर पाठ नहीं है?

— मेस्क्यूब

@ मेम्स्किब यह संभव नहीं है, एक निश्चित आकार की आवश्यकता है। अधिक विवरण के लिए आप इस उत्तर पर एक नज़र डाल सकते हैं ।

— रिकी

क्या इसे बनाने का कोई तरीका है ताकि जब इसे अगली पंक्ति में जाना पड़े, तो इसमें से दो आइटम केवल एक के बजाय नीचे जाएं? तो 4 से 2 की तरह 1 और क्या इसमें 4 से 3 से 2 नहीं है?

— sammiepls

Answer 2

आप auto-fitया तो फ़ंक्शन के auto-fillअंदर चाहते हैं repeat():

grid-template-columns: repeat(auto-fit, 186px);

यदि आप minmax()लचीले कॉलम आकारों की अनुमति देने के लिए भी उपयोग करते हैं, तो दोनों के बीच का अंतर स्पष्ट हो जाता है :

grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

यह आपके स्तंभों को आकार में फ्लेक्स करने की अनुमति देता है, कंटेनर की पूरी चौड़ाई में 186 पिक्सेल से लेकर समान-चौड़ाई वाले कॉलम तक। auto-fillचौड़ाई में फिट होंगे जितने कॉलम बनाएंगे। यदि कहें, तो पांच कॉलम फिट हैं, भले ही आपके पास केवल चार ग्रिड आइटम हों, एक पांचवा खाली कॉलम होगा:

auto-fitइसके बजाय का उपयोग करने से खाली स्तंभों को रोका जा सकेगा, यदि आवश्यक हो तो आपको आगे बढ़ाया जाएगा:

Answer 3

आप के लिए देख रहे हो सकता है auto-fill:

grid-template-columns: repeat(auto-fill, 186px);

डेमो: http://codepen.io/alanbuchanan/pen/wJRMox

उपलब्ध स्थान को अधिक कुशलता से उपयोग करने के लिए, आप उपयोग कर सकते हैं minmax, और autoदूसरे तर्क के रूप में पास कर सकते हैं :

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

डेमो: http://codepen.io/alanbuchanan/pen/jBXWLR

यदि आप खाली कॉलम नहीं चाहते हैं, तो आप auto-fitइसके बजाय उपयोग कर सकते हैं auto-fill।

Comments

क्या इसे बनाने का कोई तरीका है जो अगली पंक्ति में हैं?

— kentcdodds

Answer 4

मेरी भी ऐसी ही स्थिति थी। आपने जो किया, उसके शीर्ष पर, मैं अपने कॉलमों को कंटेनर में केंद्रित करना चाहता था, जबकि खाली कॉलमों को उनके लिए बाएं या दाएं की अनुमति नहीं देता:

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}

Comments

पुन "जबकि उनके लिए करने के लिए खाली कॉलम की अनुमति नहीं दे" : आप मतलब है ", जबकि खाली कॉलम की अनुमति नहीं दे या तो उनके लिए" ( करने के लिए → भी → या तो )? या "जबकि उनके लिए खाली कॉलम की अनुमति नहीं दे" (बिना करने के लिए )? या कुछ और (यह गणना करने के लिए प्रतीत नहीं होता है)?

— पीटर मॉर्टेंसन

Answer 5

यहाँ मेरा प्रयास है। फुलाना बहाना, मैं अतिरिक्त रचनात्मक महसूस कर रहा था।

मेरे विधि एक माता पिता है divसाथ तय आयाम । बाकी सिर्फ उस div के अंदर के कंटेंट को फिटिंग करना है।

यह पहलू अनुपात की परवाह किए बिना छवियों को पुनर्विक्रय करेगा । कोई कठिन फसल भी नहीं होगी ।

body {
    background: #131418;
    text-align: center;
    margin: 0 auto;
}

.my-image-parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    line-height: 300px; /* Should match your div height */
    text-align: center;
    font-size: 0;
}

/* Start demonstration background fluff */
    .bg1 {background: url(https://unsplash.it/801/799);}
    .bg2 {background: url(https://unsplash.it/799/800);}
    .bg3 {background: url(https://unsplash.it/800/799);}
    .bg4 {background: url(https://unsplash.it/801/801);}
    .bg5 {background: url(https://unsplash.it/802/800);}
    .bg6 {background: url(https://unsplash.it/800/802);}
    .bg7 {background: url(https://unsplash.it/802/802);}
    .bg8 {background: url(https://unsplash.it/803/800);}
    .bg9 {background: url(https://unsplash.it/800/803);}
    .bg10 {background: url(https://unsplash.it/803/803);}
    .bg11 {background: url(https://unsplash.it/803/799);}
    .bg12 {background: url(https://unsplash.it/799/803);}
    .bg13 {background: url(https://unsplash.it/806/799);}
    .bg14 {background: url(https://unsplash.it/805/799);}
    .bg15 {background: url(https://unsplash.it/798/804);}
    .bg16 {background: url(https://unsplash.it/804/799);}
    .bg17 {background: url(https://unsplash.it/804/804);}
    .bg18 {background: url(https://unsplash.it/799/804);}
    .bg19 {background: url(https://unsplash.it/798/803);}
    .bg20 {background: url(https://unsplash.it/803/797);}
/* end demonstration background fluff */

.my-image {
    width: auto;
    height: 100%;
    vertical-align: middle;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="my-image-parent">
    <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg4"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg5"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg6"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg7"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg8"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg9"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg10"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg11"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg12"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg13"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg14"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg15"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg16"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg17"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg18"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg19"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg20"></div>
</div>