in English

CSS గ్రిడ్

ఉదాహరణలు మరియు కోడ్ స్నిప్పెట్‌లతో CSS గ్రిడ్‌లో నిర్మించిన మా ప్రత్యామ్నాయ లేఅవుట్ సిస్టమ్‌ను ఎలా ప్రారంభించాలో, ఉపయోగించాలో మరియు అనుకూలీకరించాలో తెలుసుకోండి.

ఈ పేజీలో

బూట్‌స్ట్రాప్ యొక్క డిఫాల్ట్ గ్రిడ్ సిస్టమ్ దశాబ్దానికి పైగా CSS లేఅవుట్ టెక్నిక్‌ల ముగింపును సూచిస్తుంది, దీనిని మిలియన్ల మంది వ్యక్తులు ప్రయత్నించారు మరియు పరీక్షించారు. కానీ, కొత్త CSS గ్రిడ్ వంటి బ్రౌజర్‌లలో మనం చూస్తున్న అనేక ఆధునిక CSS లక్షణాలు మరియు సాంకేతికతలు లేకుండా కూడా ఇది సృష్టించబడింది.

హెచ్చరిక-మా CSS గ్రిడ్ సిస్టమ్ ప్రయోగాత్మకమైనది మరియు v5.1.0 నాటికి ప్రారంభించబడింది! మేము దానిని మీ కోసం ప్రదర్శించడానికి మా డాక్యుమెంటేషన్ యొక్క CSSలో చేర్చాము, కానీ ఇది డిఫాల్ట్‌గా నిలిపివేయబడింది. మీ ప్రాజెక్ట్‌లలో దీన్ని ఎలా ప్రారంభించాలో తెలుసుకోవడానికి చదువుతూ ఉండండి.

అది ఎలా పని చేస్తుంది

బూట్‌స్ట్రాప్ 5తో, మేము CSS గ్రిడ్‌లో నిర్మించబడిన ప్రత్యేక గ్రిడ్ సిస్టమ్‌ను ప్రారంభించే ఎంపికను జోడించాము, కానీ బూట్‌స్ట్రాప్ ట్విస్ట్‌తో. మీరు ఇప్పటికీ ప్రతిస్పందించే లేఅవుట్‌లను రూపొందించడానికి ఇష్టానుసారం దరఖాస్తు చేసుకోగల తరగతులను పొందుతారు, కానీ హుడ్ కింద వేరే విధానంతో.

CSS గ్రిడ్ ప్రారంభించబడింది. సెట్ చేయడం ద్వారా డిఫాల్ట్ గ్రిడ్ సిస్టమ్‌ను నిలిపివేయండి మరియు సెట్ చేయడం $enable-grid-classes: falseద్వారా CSS గ్రిడ్‌ను ప్రారంభించండి $enable-cssgrid: true. అప్పుడు, మీ సాస్‌ని మళ్లీ కంపైల్ చేయండి.
.rowయొక్క ఉదాహరణలను తో భర్తీ చేయండి .grid. తరగతి .gridసెట్ చేస్తుంది మరియు మీరు మీ HTMLతో రూపొందించిన display: gridదాన్ని సృష్టిస్తుంది .grid-template
.col-*తరగతులను తరగతులతో భర్తీ చేయండి .g-col-*. ఎందుకంటే మా CSS గ్రిడ్ నిలువు వరుసలు grid-columnబదులుగా ప్రాపర్టీని ఉపయోగిస్తాయి width.
నిలువు వరుసలు మరియు గట్టర్ పరిమాణాలు CSS వేరియబుల్స్ ద్వారా సెట్ చేయబడ్డాయి. వీటిని పేరెంట్‌పై సెట్ చేయండి .gridమరియు మీకు కావలసిన విధంగా అనుకూలీకరించండి, ఇన్‌లైన్ లేదా స్టైల్‌షీట్‌లో, --bs-columnsమరియు --bs-gap.

భవిష్యత్తులో, బూట్‌స్ట్రాప్ gapఫ్లెక్స్‌బాక్స్‌కు దాదాపు పూర్తి బ్రౌజర్ మద్దతును పొందింది కాబట్టి బూట్‌స్ట్రాప్ హైబ్రిడ్ పరిష్కారానికి మారవచ్చు.

కీ తేడాలు

డిఫాల్ట్ గ్రిడ్ సిస్టమ్‌తో పోలిస్తే:

Flex వినియోగాలు CSS గ్రిడ్ నిలువు వరుసలను అదే విధంగా ప్రభావితం చేయవు.
ఖాళీలు గట్టర్లను భర్తీ చేస్తాయి. gapప్రాపర్టీ paddingమా డిఫాల్ట్ గ్రిడ్ సిస్టమ్ నుండి క్షితిజ సమాంతరాన్ని భర్తీ చేస్తుంది మరియు మరిన్ని వాటిలా పనిచేస్తుంది margin.
అలాగే, s వలె కాకుండా .row, .gridsకి ప్రతికూల మార్జిన్‌లు లేవు మరియు గ్రిడ్ గట్టర్‌లను మార్చడానికి మార్జిన్ యుటిలిటీలు ఉపయోగించబడవు. గ్రిడ్ ఖాళీలు డిఫాల్ట్‌గా అడ్డంగా మరియు నిలువుగా వర్తించబడతాయి. మరిన్ని వివరాల కోసం అనుకూలీకరణ విభాగాన్ని చూడండి .
ఇన్‌లైన్ మరియు కస్టమ్ స్టైల్‌లను మాడిఫైయర్ క్లాస్‌లకు ప్రత్యామ్నాయాలుగా చూడాలి (ఉదా, style="--bs-columns: 3;"vs class="row-cols-3").
నెస్టింగ్ కూడా అదే విధంగా పని చేస్తుంది, కానీ మీరు సమూహానికి సంబంధించిన ప్రతి సందర్భంలో మీ నిలువు వరుస గణనలను రీసెట్ చేయాల్సి రావచ్చు .grid. వివరాల కోసం గూడు విభాగాన్ని చూడండి .

ఉదాహరణలు

మూడు నిలువు వరుసలు

.g-col-4తరగతులను ఉపయోగించడం ద్వారా అన్ని వీక్షణపోర్ట్‌లు మరియు పరికరాలలో మూడు సమాన-వెడల్పు నిలువు వరుసలను సృష్టించవచ్చు . వీక్షణపోర్ట్ పరిమాణం ద్వారా లేఅవుట్‌ను మార్చడానికి ప్రతిస్పందించే తరగతులను జోడించండి .

.g-col-4

html

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

రెస్పాన్సివ్

వీక్షణపోర్ట్‌లలో మీ లేఅవుట్‌ని సర్దుబాటు చేయడానికి ప్రతిస్పందించే తరగతులను ఉపయోగించండి. ఇక్కడ మేము ఇరుకైన వీక్షణపోర్ట్‌లలో రెండు నిలువు వరుసలతో ప్రారంభించి, ఆపై మీడియం వ్యూపోర్ట్‌లు మరియు ఎగువన మూడు నిలువు వరుసలకు పెరుగుతాము.

.g-col-6 .g-col-md-4

html

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

అన్ని వ్యూపోర్ట్‌లలో ఈ రెండు నిలువు వరుసల లేఅవుట్‌తో పోల్చండి.

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

చుట్టడం

అడ్డంగా ఎక్కువ స్థలం లేనప్పుడు గ్రిడ్ అంశాలు స్వయంచాలకంగా తదుపరి పంక్తికి చుట్టబడతాయి. gapగ్రిడ్ అంశాల మధ్య క్షితిజ సమాంతర మరియు నిలువు అంతరాలకు ఇది వర్తిస్తుందని గమనించండి .

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

మొదలవుతుంది

ప్రారంభ తరగతులు మా డిఫాల్ట్ గ్రిడ్ ఆఫ్‌సెట్ తరగతులను భర్తీ చేయడం లక్ష్యంగా పెట్టుకున్నాయి, కానీ అవి పూర్తిగా ఒకేలా ఉండవు. CSS గ్రిడ్ స్టైల్స్ ద్వారా గ్రిడ్ టెంప్లేట్‌ను సృష్టిస్తుంది, అది బ్రౌజర్‌లను “ఈ నిలువు వరుస వద్ద ప్రారంభించండి” మరియు “ఈ కాలమ్‌లో ముగించండి” అని చెబుతుంది. ఆ లక్షణాలు grid-column-startమరియు grid-column-end. ప్రారంభ తరగతులు మునుపటి వాటికి సంక్షిప్తలిపి. పరిమాణానికి వాటిని నిలువు తరగతులతో జత చేయండి మరియు మీకు అవసరమైన విధంగా మీ నిలువు వరుసలను సమలేఖనం చేయండి. ప్రారంభ తరగతులు ఈ లక్షణాలకు చెల్లని విలువగా 1ప్రారంభమవుతాయి .0

.g-col-3 .g-start-2

.g-col-4 .g-start-6

html

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

ఆటో నిలువు వరుసలు

గ్రిడ్ ఐటెమ్‌లపై తరగతులు లేనప్పుడు (a యొక్క తక్షణ పిల్లలు .grid), ప్రతి గ్రిడ్ అంశం స్వయంచాలకంగా ఒక నిలువు వరుస పరిమాణంలో ఉంటుంది.

html

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

ఈ ప్రవర్తనను గ్రిడ్ కాలమ్ తరగతులతో కలపవచ్చు.

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

గూడు కట్టడం

మా డిఫాల్ట్ గ్రిడ్ సిస్టమ్ మాదిరిగానే, మా CSS గ్రిడ్ .gridలు సులభంగా గూడు కట్టుకోవడానికి అనుమతిస్తుంది. అయినప్పటికీ, డిఫాల్ట్ వలె కాకుండా, ఈ గ్రిడ్ అడ్డు వరుసలు, నిలువు వరుసలు మరియు ఖాళీలలో మార్పులను వారసత్వంగా పొందుతుంది. దిగువ ఉదాహరణను పరిగణించండి:

మేము స్థానిక CSS వేరియబుల్‌తో డిఫాల్ట్ నిలువు వరుసల సంఖ్యను భర్తీ చేస్తాము: --bs-columns: 3.
మొదటి స్వీయ-నిలువు వరుసలో, నిలువు వరుస గణన వారసత్వంగా ఉంటుంది మరియు ప్రతి నిలువు వరుస అందుబాటులో ఉన్న వెడల్పులో మూడింట ఒక వంతు ఉంటుంది.
రెండవ స్వీయ-నిలువు వరుసలో, మేము నెస్టెడ్‌లోని కాలమ్ కౌంట్‌ను .grid12కి రీసెట్ చేసాము (మా డిఫాల్ట్).
మూడవ స్వీయ-నిలువు వరుసలో సమూహ కంటెంట్ లేదు.

ఆచరణలో ఇది మా డిఫాల్ట్ గ్రిడ్ సిస్టమ్‌తో పోల్చినప్పుడు మరింత సంక్లిష్టమైన మరియు అనుకూల లేఅవుట్‌లను అనుమతిస్తుంది.

మొదటి స్వీయ కాలమ్

ఆటో-కాలమ్

రెండవ స్వీయ కాలమ్

12లో 6

12లో 4

12లో 2

మూడవ స్వీయ కాలమ్

html

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

అనుకూలీకరించడం

స్థానిక CSS వేరియబుల్స్‌తో నిలువు వరుసల సంఖ్య, అడ్డు వరుసల సంఖ్య మరియు ఖాళీల వెడల్పును అనుకూలీకరించండి.

వేరియబుల్	ఫాల్‌బ్యాక్ విలువ	వివరణ
`--bs-rows`	`1`	మీ గ్రిడ్ టెంప్లేట్‌లోని అడ్డు వరుసల సంఖ్య
`--bs-columns`	`12`	మీ గ్రిడ్ టెంప్లేట్‌లోని నిలువు వరుసల సంఖ్య
`--bs-gap`	`1.5rem`	నిలువు వరుసల మధ్య అంతరం యొక్క పరిమాణం (నిలువు మరియు క్షితిజ సమాంతర)

ఈ CSS వేరియబుల్స్‌కు డిఫాల్ట్ విలువ లేదు; బదులుగా, వారు స్థానిక ఉదాహరణ అందించబడే వరకు ఉపయోగించే ఫాల్‌బ్యాక్ విలువలను వర్తింపజేస్తారు . ఉదాహరణకు, మేము మా CSS గ్రిడ్ అడ్డు వరుసల కోసం ఉపయోగిస్తాము , ఇది ఇంకా ఎక్కడా సెట్ చేయబడనందున var(--bs-rows, 1)విస్మరిస్తుంది . --bs-rowsఅది అయిన తర్వాత, .gridఉదాహరణ ఫాల్‌బ్యాక్ విలువకు బదులుగా ఆ విలువను ఉపయోగిస్తుంది 1.

గ్రిడ్ తరగతులు లేవు

తక్షణ పిల్లల మూలకాలు గ్రిడ్ అంశాలు, కాబట్టి అవి స్పష్టంగా తరగతిని .gridజోడించకుండానే పరిమాణంలో ఉంటాయి ..g-col

ఆటో-కాలమ్

html

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

నిలువు వరుసలు మరియు ఖాళీలు

నిలువు వరుసల సంఖ్య మరియు అంతరాన్ని సర్దుబాటు చేయండి.

.g-col-2

html

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

.g-col-6

.g-col-4

html

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

అడ్డు వరుసలను కలుపుతోంది

మరిన్ని అడ్డు వరుసలను జోడించడం మరియు నిలువు వరుసల స్థానాన్ని మార్చడం:

ఆటో-కాలమ్

html

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

ఖాళీలు

ను సవరించడం ద్వారా మాత్రమే నిలువు అంతరాలను మార్చండి row-gap. gapమేము s లో ఉపయోగిస్తామని గమనించండి .grid, కానీ row-gapఅవసరమైన column-gapవిధంగా సవరించవచ్చు.

.g-col-6

html

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

దాని కారణంగా, మీరు వేర్వేరు నిలువు మరియు క్షితిజ సమాంతర gapలను కలిగి ఉండవచ్చు, ఇది ఒకే విలువను (అన్ని వైపులా) లేదా ఒక జత విలువలను (నిలువు మరియు క్షితిజ సమాంతర) తీసుకోవచ్చు. ఇది కోసం ఇన్‌లైన్ శైలితో gapలేదా మా --bs-gapCSS వేరియబుల్‌తో వర్తించవచ్చు.

.g-col-6

html

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

సాస్

CSS గ్రిడ్ యొక్క ఒక పరిమితి ఏమిటంటే, మా డిఫాల్ట్ తరగతులు ఇప్పటికీ రెండు Sass వేరియబుల్స్ ద్వారా ఉత్పత్తి చేయబడతాయి $grid-columnsమరియు $grid-gutter-width. ఇది మా కంపైల్ చేసిన CSSలో రూపొందించబడిన తరగతుల సంఖ్యను ప్రభావవంతంగా ముందే నిర్ధారిస్తుంది. మీకు ఇక్కడ రెండు ఎంపికలు ఉన్నాయి:

ఆ డిఫాల్ట్ Sass వేరియబుల్‌లను సవరించండి మరియు మీ CSSని మళ్లీ కంపైల్ చేయండి.
అందించిన తరగతులను పెంచడానికి ఇన్‌లైన్ లేదా అనుకూల శైలులను ఉపయోగించండి.

ఉదాహరణకు, మీరు కాలమ్ కౌంట్‌ని పెంచవచ్చు మరియు గ్యాప్ పరిమాణాన్ని మార్చవచ్చు, ఆపై ఇన్‌లైన్ స్టైల్స్ మరియు ముందే నిర్వచించబడిన CSS గ్రిడ్ కాలమ్ క్లాస్‌ల (ఉదా, .g-col-4) మిశ్రమంతో మీ “నిలువు వరుసలను” పరిమాణం చేయవచ్చు.

14 నిలువు వరుసలు

.g-col-4

html

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>