in English

ग्रिड प्रणाली

बाह्र स्तम्भ प्रणाली, छवटा पूर्वनिर्धारित उत्तरदायी तहहरू, Sass चर र मिक्सिनहरू, र दर्जनौं पूर्वनिर्धारित कक्षाहरूका लागि सबै आकार र आकारहरूको लेआउटहरू निर्माण गर्न हाम्रो शक्तिशाली मोबाइल-पहिलो फ्लेक्सबक्स ग्रिड प्रयोग गर्नुहोस्।

यस पृष्ठमा

उदाहरण

बुटस्ट्र्यापको ग्रिड प्रणालीले सामग्री लेआउट र पङ्क्तिबद्ध गर्न कन्टेनरहरू, पङ्क्तिहरू र स्तम्भहरूको श्रृंखला प्रयोग गर्दछ। यो flexbox संग निर्मित छ र पूर्ण उत्तरदायी छ। तल एउटा उदाहरण र ग्रिड प्रणाली कसरी सँगै आउँछ भन्ने बारे विस्तृत व्याख्या छ।

flexbox मा नयाँ वा अपरिचित? पृष्ठभूमि, शब्दावली, दिशानिर्देशहरू, र कोड स्निपेटहरूको लागि यो CSS ट्रिक्स फ्लेक्सबक्स गाइड पढ्नुहोस् ।

स्तम्भ

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

माथिको उदाहरणले हाम्रा पूर्वनिर्धारित ग्रिड वर्गहरू प्रयोग गरेर सबै यन्त्रहरू र भ्यूपोर्टहरूमा तीन बराबर-चौडाइ स्तम्भहरू सिर्जना गर्दछ। ती स्तम्भहरू पृष्ठमा अभिभावकसँग केन्द्रित हुन्छन् .container।

यसले कसरी काम गर्छ

यसलाई तोड्दै, यहाँ कसरी ग्रिड प्रणाली सँगै आउँछ:

हाम्रो ग्रिडले छ वटा उत्तरदायी ब्रेकपोइन्टहरूलाई समर्थन गर्दछ । ब्रेकपोइन्टहरू मिडिया क्वेरीहरूमा आधारित हुन्छन् min-width, यसको मतलब तिनीहरूले त्यो ब्रेकपोइन्ट र त्यसमाथिका सबैलाई असर गर्छ (जस्तै, , , , र ) मा .col-sm-4लागू हुन्छ । यसको मतलब तपाइँ प्रत्येक ब्रेकपोइन्ट द्वारा कन्टेनर र स्तम्भ आकार र व्यवहार नियन्त्रण गर्न सक्नुहुन्छ।smmdlgxlxxl
कन्टेनरहरू बीचमा र तेर्सो रूपमा तपाईंको सामग्री प्याड गर्नुहोस्। .containerप्रतिक्रियाशील पिक्सेल चौडाइको लागि .container-fluid, width: 100%सबै भ्यूपोर्टहरू र यन्त्रहरूमा, वा .container-mdतरल पदार्थ र पिक्सेल चौडाइहरूको संयोजनको लागि प्रतिक्रियाशील कन्टेनर (जस्तै, ) को लागि प्रयोग गर्नुहोस्।
पङ्क्तिहरू स्तम्भहरूका लागि र्यापरहरू हुन्। प्रत्येक स्तम्भमा तेर्सो paddingहुन्छ (जसलाई नाली भनिन्छ) तिनीहरू बीचको ठाउँ नियन्त्रण गर्नका लागि। यसलाई paddingत्यसपछि पङ्क्तिहरूमा नकारात्मक मार्जिनहरूको साथ प्रतिवाद गरिन्छ तपाईंको स्तम्भहरूमा सामग्री दृश्यात्मक रूपमा बायाँ छेउमा पङ्क्तिबद्ध छ। पङ्क्तिहरूले तपाईंको सामग्रीको स्पेसिङ परिवर्तन गर्न स्तम्भ आकार र गटर वर्गहरू समान रूपमा लागू गर्न परिमार्जक वर्गहरूलाई समर्थन गर्दछ।
स्तम्भहरू अविश्वसनीय लचिलो छन्। त्यहाँ प्रति पङ्क्तिमा 12 टेम्प्लेट स्तम्भहरू उपलब्ध छन्, तपाईंलाई तत्वहरूको विभिन्न संयोजनहरू सिर्जना गर्न अनुमति दिन्छ जुन स्तम्भहरूको संख्यामा फैलिन्छ। स्तम्भ वर्गहरूले स्प्यान गर्न टेम्प्लेट स्तम्भहरूको संख्या संकेत गर्दछ (जस्तै, col-4चार स्प्यान्स)। widths प्रतिशतमा सेट गरिएको छ त्यसैले तपाईसँग सधैं समान सापेक्ष आकार हुन्छ।
गटरहरू पनि उत्तरदायी र अनुकूलन योग्य छन्। गटर कक्षाहरू सबै ब्रेकपोइन्टहरूमा उपलब्ध छन्, हाम्रो मार्जिन र प्याडिङ स्पेसिङको रूपमा सबै समान आकारहरूका साथ । तेर्सो नालीहरू .gx-*कक्षाहरू, ठाडो नालीहरू .gy-*, वा .g-*कक्षाहरू भएका सबै गटरहरू परिवर्तन गर्नुहोस्। .g-0गटर हटाउन पनि उपलब्ध छ।
Sass चरहरू, नक्साहरू, र मिक्सिनहरूले ग्रिडलाई शक्ति दिन्छ। यदि तपाइँ Bootstrap मा पूर्वनिर्धारित ग्रिड कक्षाहरू प्रयोग गर्न चाहनुहुन्न भने, तपाइँ हाम्रो ग्रिडको स्रोत Sass प्रयोग गर्न सक्नुहुन्छ थप अर्थ मार्कअपको साथ तपाइँको आफ्नै सिर्जना गर्न। हामीले तपाईंको लागि अझ बढी लचिलोपनको लागि यी Sass चरहरू उपभोग गर्न केही CSS अनुकूलन गुणहरू पनि समावेश गर्दछौं।

फ्लेक्सबक्स वरपरका सीमितताहरू र बगहरू बारे सचेत रहनुहोस् , जस्तै फ्लेक्स कन्टेनरहरूको रूपमा केही HTML तत्वहरू प्रयोग गर्न असक्षमता ।

ग्रिड विकल्पहरू

बुटस्ट्र्यापको ग्रिड प्रणालीले सबै छवटा पूर्वनिर्धारित ब्रेकपोइन्टहरू, र तपाईंले अनुकूलन गर्ने कुनै पनि ब्रेकपोइन्टहरूमा अनुकूलन गर्न सक्छ। छ पूर्वनिर्धारित ग्रिड तहहरू निम्नानुसार छन्:

अतिरिक्त सानो (xs)
सानो (sm)
मध्यम (md)
ठूलो (lg)
अतिरिक्त ठूलो (xl)
अतिरिक्त अतिरिक्त ठूलो (xxl)

माथि उल्लेख गरिए अनुसार, यी प्रत्येक ब्रेकपोइन्टको आफ्नै कन्टेनर, अद्वितीय वर्ग उपसर्ग, र परिमार्जकहरू छन्। यी ब्रेकपोइन्टहरूमा ग्रिड कसरी परिवर्तन हुन्छ यहाँ छ:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
कन्टेनर`max-width`	कुनै पनि छैन (स्वचालित)	540px	720px	960px	1140px	1320px
कक्षा उपसर्ग	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
स्तम्भहरूको #	१२
नाली चौडाइ	1.5rem (.75rem बाँया र दायाँ)
कस्टम गटरहरू	हो
नेस्टेबल	हो
स्तम्भ क्रम	हो

स्वत: लेआउट स्तम्भहरू

स्तम्भको आकारको लागि स्पष्ट संख्याको वर्ग बिना नै ब्रेकपोइन्ट-विशिष्ट स्तम्भ वर्गहरू प्रयोग गर्नुहोस् .col-sm-6।

बराबर चौडाइ

उदाहरणका लागि, यहाँ दुई ग्रिड लेआउटहरू छन् जुन प्रत्येक यन्त्र र भ्यूपोर्टमा लागू हुन्छ, xsदेखि xxl. तपाईलाई चाहिने प्रत्येक ब्रेकपोइन्टको लागि कुनै पनि संख्यामा एकाइ-कम कक्षाहरू थप्नुहोस् र प्रत्येक स्तम्भ समान चौडाइको हुनेछ।

२ मध्ये १

२ मध्ये २

३ मध्ये १

३ मध्ये २

३ मध्ये ३

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

एक स्तम्भ चौडाइ सेट गर्दै

फ्लेक्सबक्स ग्रिड स्तम्भहरूको लागि स्वत: लेआउटको मतलब यो पनि हो कि तपाईंले एउटा स्तम्भको चौडाइ सेट गर्न सक्नुहुन्छ र भाइबहिनी स्तम्भहरू स्वचालित रूपमा यसको वरिपरि रिसाइज गर्न सक्नुहुन्छ। तपाईंले पूर्वनिर्धारित ग्रिड वर्गहरू (तल देखाइए अनुसार), ग्रिड मिक्सिन वा इनलाइन चौडाइहरू प्रयोग गर्न सक्नुहुन्छ। ध्यान दिनुहोस् कि अन्य स्तम्भहरूले केन्द्र स्तम्भको चौडाइलाई फरक पार्दैन।

३ मध्ये १

३ मध्ये २ (फडा)

३ मध्ये ३

३ मध्ये १

३ मध्ये २ (फडा)

३ मध्ये ३

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

चर चौडाइ सामग्री

col-{breakpoint}-autoतिनीहरूको सामग्रीको प्राकृतिक चौडाइमा आधारित स्तम्भहरूलाई आकार दिन कक्षाहरू प्रयोग गर्नुहोस्।

३ मध्ये १

चर चौडाइ सामग्री

३ मध्ये ३

३ मध्ये १

चर चौडाइ सामग्री

३ मध्ये ३

html

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

उत्तरदायी कक्षाहरू

बुटस्ट्र्यापको ग्रिडले जटिल उत्तरदायी लेआउटहरू निर्माण गर्न पूर्वनिर्धारित वर्गहरूको छ वटा तहहरू समावेश ग��्दछ। अतिरिक्त साना, साना, मध्यम, ठूला, वा अतिरिक्त ठूला यन्त्रहरूमा तपाईंको स्तम्भहरूको आकार अनुकूलित गर्नुहोस् तर तपाईंले उपयुक्त देख्नुहुन्छ।

सबै ब्रेकपोइन्टहरू

ग्रिडहरूका लागि जुन यन्त्रहरूको सबैभन्दा सानो देखि ठूलासम्म समान छन्, .colर .col-*वर्गहरू प्रयोग गर्नुहोस्। जब तपाईलाई विशेष आकारको स्तम्भ चाहिन्छ एक नम्बर गरिएको वर्ग निर्दिष्ट गर्नुहोस्; अन्यथा, अडिग रहन नहिचकिचाउनुहोस् .col।

कर्नल

col-8

col-4

html

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

तेर्सोमा स्ट्याक गरियो

कक्षाहरूको एकल सेट प्रयोग गरेर .col-sm-*, तपाईंले एउटा आधारभूत ग्रिड प्रणाली सिर्जना गर्न सक्नुहुन्छ जुन स्ट्याक गरिएको सुरु हुन्छ र सानो ब्रेकपोइन्ट ( sm) मा तेर्सो हुन्छ।

col-sm-8

col-sm-4

col-sm

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

मिक्स र मिलाउनुहोस्

तपाइँका स्तम्भहरू केवल केहि ग्रिड तहहरूमा स्ट्याक गर्न चाहनुहुन्न? आवश्यकता अनुसार प्रत्येक तहको लागि विभिन्न वर्गहरूको संयोजन प्रयोग गर्नुहोस्। यो सबै कसरी काम गर्दछ भन्ने राम्रो विचारको लागि तलको उदाहरण हेर्नुहोस्।

col-md-8

.col-6 .col-md-4

col-6

html

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

पङ्क्ति स्तम्भहरू

.row-cols-*तपाईंको सामग्री र लेआउटलाई उत्कृष्ट रूपमा प्रस्तुत गर्ने स्तम्भहरूको संख्या द्रुत रूपमा सेट गर्न उत्तरदायी कक्षाहरू प्रयोग गर्नुहोस्। जहाँ सामान्य .col-*वर्गहरू व्यक्तिगत स्तम्भहरूमा लागू हुन्छन् (जस्तै, .col-md-4), पङ्क्ति स्तम्भ वर्गहरू अभिभावकमा .rowसर्टकटको रूपमा सेट हुन्छन्। .row-cols-autoतपाईं स्तम्भहरूलाई तिनीहरूको प्राकृतिक चौडाइ दिन सक्नुहुन्छ ।

आधारभूत ग्रिड लेआउटहरू तुरुन्तै सिर्जना गर्न वा तपाईंको कार्ड लेआउटहरू नियन्त्रण गर्न यी पङ्क्ति स्तम्भ वर्गहरू प्रयोग गर्नुहोस्।

स्तम्भ

html

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

html

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

स्तम्भ

html

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

तपाईं पनि साथमा Sass mixin प्रयोग गर्न सक्नुहुन्छ row-cols(),:

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

नेस्टिङ

तपाईंको सामग्रीलाई पूर्वनिर्धारित ग्रिडसँग नेस्ट गर्न, अवस्थित स्तम्भ भित्र नयाँ .rowर स्तम्भहरूको सेट थप्नुहोस् । नेस्ट गरिएका पङ्क्तिहरूले स्तम्भहरूको सेट समावेश गर्नुपर्छ जसले १२ वा सोभन्दा कम थप्छन् (तपाईले सबै उपलब्ध १२ स्तम्भहरू प्रयोग गर्नु आवश्यक छैन)।.col-sm-*.col-sm-*

स्तर 1: .col-sm-3

स्तर 2: .col-8 .col-sm-6

स्तर 2: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

सास

बुटस्ट्र्यापको स्रोत सास फाइलहरू प्रयोग गर्दा, तपाईंसँग अनुकूलन, अर्थपूर्ण, र उत्तरदायी पृष्ठ लेआउटहरू सिर्जना गर्न Sass चर र मिक्सिनहरू प्रयोग गर्ने विकल्प छ। हाम्रा पूर्वनिर्धारित ग्रिड वर्गहरूले द्रुत प्रतिक्रियाशील लेआउटहरूको लागि प्रयोग गर्न-का लागि तयार कक्षाहरूको सम्पूर्ण सूट प्रदान गर्न यी नै चरहरू र मिक्सिनहरू प्रयोग गर्छन्।

चरहरू

चर र नक्साहरूले स्तम्भहरूको संख्या, नालीको चौडाइ, र मिडिया क्वेरी बिन्दुमा फ्लोटिंग स्तम्भहरू सुरु गर्ने निर्धारण गर्दछ। हामी माथि उल्लेखित पूर्वनिर्धारित ग्रिड वर्गहरू उत्पन्न गर्न प्रयोग गर्छौं, साथै तल सूचीबद्ध अनुकूलन मिक्सनहरूको लागि।

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

मिक्सन

व्यक्तिगत ग्रिड स्तम्भहरूको लागि सिमान्टिक CSS उत्पन्न गर्न ग्रिड चरहरूसँग संयोजनमा Mixins प्रयोग गरिन्छ।

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

उदाहरण प्रयोग

तपाइँ चरहरूलाई तपाइँको आफ्नै अनुकूल मानहरूमा परिमार्जन गर्न सक्नुहुन्छ, वा केवल तिनीहरूको पूर्वनिर्धारित मानहरूसँग मिक्सिनहरू प्रयोग गर्नुहोस्। बीचको अन्तरको साथ दुई-स्तम्भ लेआउट सिर्जना गर्न पूर्वनिर्धारित सेटिङहरू प्रयोग गर्ने एउटा उदाहरण यहाँ छ।

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

मुख्य सामग्री

माध्यमिक सामग्री

html

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ग्रिड अनुकूलन गर्दै

हाम्रो निर्मित ग्रिड Sass चर र नक्साहरू प्रयोग गरेर, पूर्वनिर्धारित ग्रिड वर्गहरूलाई पूर्ण रूपमा अनुकूलन गर्न सम्भव छ। टियरहरूको संख्या, मिडिया क्वेरी आयामहरू, र कन्टेनर चौडाइहरू परिवर्तन गर्नुहोस् - त्यसपछि पुन: कम्पाइल गर्नुहोस्।

स्तम्भ र गटरहरू

ग्रिड स्तम्भहरूको संख्या Sass चर मार्फत परिमार्जन गर्न सकिन्छ। $grid-columnsप्रत्येक व्यक्तिगत स्तम्भको चौडाइ (प्रतिशतमा) उत्पन्न गर्न प्रयोग गरिन्छ जबकि $grid-gutter-widthस्तम्भ गटरहरूको चौडाइ सेट गर्दछ। $grid-row-columnsको स्तम्भहरूको अधिकतम संख्या सेट गर्न प्रयोग गरिन्छ .row-cols-*, यो सीमा भन्दा माथिको कुनै पनि संख्यालाई बेवास्ता गरिन्छ।

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

ग्रिड तहहरू

स्तम्भहरू भन्दा बाहिर जाँदै, तपाईंले ग्रिड तहहरूको संख्या पनि अनुकूलन गर्न सक्नुहुन्छ। यदि तपाइँ केवल चार ग्रिड तहहरू चाहनुहुन्छ भने, तपाइँ अपडेट गर्नुहुनेछ $grid-breakpointsर $container-max-widthsयो जस्तै केहि:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass चर वा नक्सामा कुनै पनि परिवर्तन गर्दा, तपाईंले आफ्नो परिवर्तनहरू बचत गर्न र पुन: कम्पाइल गर्न आवश्यक छ। त्यसो गर्दा स्तम्भ चौडाइ, अफसेटहरू, र अर्डरिङका लागि पूर्वनिर्धारित ग्रिड वर्गहरूको एकदम नयाँ सेट आउटपुट हुनेछ। अनुकूल ब्रेकपोइन्टहरू प्रयोग गर्न उत्तरदायी दृश्यता उपयोगिताहरू पनि अद्यावधिक गरिनेछ। px(होइन rem, emवा %) मा ग्रिड मानहरू सेट गर्न निश्चित गर्नुहोस् ।