Grid

docs.scrimba.com

आपके पास एक पृष्ठ है जिसमें शीर्ष पर एक हेडर, बाईं ओर एक साइडबार, एक मुख्य सामग्री क्षेत्र, और एक फूटर है। आप कंटेनरों के एक ढेर को नेस्ट कर सकते हैं और प्रत्येक को जगह में धकेल सकते हैं, और यह मोटे तौर पर काम करेगा जब तक कि आपको व्यवस्था बदलने की आवश्यकता न हो। CSS grid इस समस्या के लिए बनाया गया था: एक ही समय में पंक्तियों और स्तंभों में एक पृष्ठ लेआउट करना। एक बार जब आप ट्रैक के एक सेट के रूप में लेआउट का वर्णन कर सकते हैं, तो रैपर और फ्लोट्स के साथ ज्यादातर फिडलिंग गायब हो जाती है।

Grid कंटेनर

आप किसी भी element को display: grid देकर एक grid में बदल देते हैं। वह element grid कंटेनर बन जाता है, और इसके सीधे बच्चे एक grid में snap करने वाली items बन जाती हैं जिसे आप define करते हैं। अपने आप पर, display: grid ज्यादा कुछ नहीं करता है, इसलिए आप यह भी बताते हैं कि आप कितने स्तंभ और पंक्तियां चाहते हैं और प्रत्येक कितना बड़ा होना चाहिए।

आप grid-template-columns के साथ स्तंभों का वर्णन करते हैं और grid-template-rows के साथ पंक्तियों का। सूची में प्रत्येक मान एक track है, और एक track एक ही स्तंभ या पंक्ति है:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;   /* दो स्तंभ: एक fixed, फिर बाकी */
  grid-template-rows: 80px 400px;     /* दो पंक्तियां: एक छोटी, फिर एक लंबी */
}

एक element पर display: grid सेट करना इसे grid कंटेनर बनाता है, और इसके सीधे बच्चे एक grid में रखी गई items बन जाती हैं जिसे आप define करते हैं। यह flexbox का दो-आयामी समकक्ष है, जो items को एक बार में एक ही अक्ष के साथ रखता है। Flexbox पूछता है "यह पंक्ति (या स्तंभ) items को स्पेस कैसे साझा करना चाहिए?"; grid पूछता है "ये items पंक्तियों और स्तंभों के एक सेट में कहां बैठते हैं?"।

आप grid-template-columns और grid-template-rows के साथ tracks को define करते हैं। प्रत्येक मान एक track है, एक स्तंभ या पंक्ति, और मान units को mix कर सकते हैं: fixed लंबाई, प्रतिशत, या flexible fr unit जिसे आप अगले भाग में मिलते हैं।

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;   /* fixed साइडबार, flexible main स्तंभ */
  grid-template-rows: auto 1fr auto;  /* हेडर सामग्री में आकार, main भरता है, footer सामग्री में */
}

display: grid एक element पर grid formatting context स्थापित करता है: यह एक grid कंटेनर बन जाता है, इसके सीधे बच्चे grid items बन जाती हैं, और normal-flow rules जो उन बच्चों को नियंत्रित करते थे अब लागू नहीं होते हैं। Text nodes को anonymous items में लपेटा जाता है, और float और vertical-align जैसी properties अब items पर कोई प्रभाव नहीं डालती हैं, क्योंकि उनकी placement अब grid का काम है।

flexbox से अंतर dimensionality है, और यह सही निर्णय लेने के लिए पहला है। Flexbox एक-आयामी है: यह items को एक main axis के साथ वितरित करता है और wrap एक side effect है, लेकिन यह cross axis पर एक matching grid में सामग्री को align नहीं करता है। Grid दो-आयामी है: यह पंक्तियों और स्तंभों को एक साथ define करता है, इसलिए एक item की पंक्ति position और column position स्वतंत्र रूप से सेट होते हैं और items दोनों axes पर एक साथ line up होती हैं। आप explicit tracks को grid-template-columns और grid-template-rows के साथ define करते हैं, प्रत्येक मान एक track का उत्पादन करता है:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;   /* दो explicit column tracks */
  grid-template-rows: auto 1fr auto;  /* सामग्री, भरना, सामग्री */
}

auto keyword एक track को सामग्री में आकार देता है; 1fr leftover space को absorb करता है, जो अगला भाग बनाने वाली mechanism है।

JunoGrid कंटेनर एक element में display: grid जोड़ें और यह एक grid कंटेनर बन जाता है, इसके सीधे बच्चे items के रूप में अंदर बैठते हैं। फिर आप कहते हैं कि आप कितने स्तंभ और पंक्तियां चाहते हैं grid-template-columns और grid-template-rows के साथ, प्रति track एक मान। कुछ भी तब तक line up नहीं होता है जब तक आप उन tracks को define नहीं करते हैं, इसलिए यह हमेशा आपकी पहली चाल है।

JunoGrid कंटेनर Flexbox एक बार में एक अक्ष के साथ काम करता है; grid पंक्तियों और स्तंभों के साथ काम करता है, जो यही कारण है कि पृष्ठ layouts grid में अधिक natural लगते हैं। display: grid सेट करें, फिर अपने tracks को grid-template-columns और grid-template-rows में सूचीबद्ध करें। Grid के लिए पहुंचें जब आप चीजों को दो-आयामी arrangement में रख रहे हों, और flexbox जब आप एक पंक्ति या स्तंभ को line up कर रहे हों।

JunoGrid कंटेनरdisplay: grid एक grid formatting context बनाता है, इसलिए बच्चे normal flow का पालन करना बंद कर देते हैं और float और vertical-align quietly उन पर mattering बंद कर देते हैं। flexbox से असली split dimensionality है: flex एक अक्ष के साथ वितरित करता है, grid दोनों पर एक बार में रखता है। जब row और column position दोनों meaningful हों तो grid चुनें, जब केवल एक axis हो तो flex।

Flexible tracks

Fixed pixel स्तंभ ठीक हैं, लेकिन अधिकांश layouts ऐसे स्तंभ चाहते हैं जो space को evenly साझा करें और screen के साथ grow करें। यह fr unit के लिए है। एक fr का मतलब leftover space का एक share है, इसलिए 1fr के तीन स्तंभ container का एक तिहाई लेते हैं:

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* तीन equal स्तंभ */
}

1fr को तीन बार typing करना tedious है, इसलिए repeat() इसे आपके लिए लिखता है। और gap tracks के बीच space सेट करता है, इसलिए आप हर item पर margins के लिए नहीं पहुंचते हैं:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* समान तीन equal स्तंभ */
  gap: 16px;                               /* पंक्तियों और स्तंभों के बीच space */
}

fr unit container में fixed sizes और gaps निकालने के बाद free space का एक share मापता है। 1fr प्रत्येक तीन स्तंभ को equal third मिलते हैं; 2fr 1fr pair space को two-to-one में split करता है। क्योंकि fr जो बचा है उसे divide करता है, स्तंभ container बढ़ता या सिकुड़ता है क्योंकि proportional रहते हैं, जो fixed lengths नहीं कर सकते हैं।

दो helpers track lists को readable बनाते हैं। repeat(3, 1fr) 1fr 1fr 1fr को expand करता है, और gap एक property में gutters सेट करता है (row-gap और column-gap जब आप उन्हें different चाहते हैं):

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* तीन equal स्तंभ */
  gap: 16px;                               /* 16px gutters, पंक्तियां और स्तंभ */
}

Gutters को gap के साथ सेट किया जाता है, items पर margins नहीं। क्योंकि gap केवल tracks के बीच लागू होता है और कभी outer edges पर नहीं, grid अपने container के लिए flush बैठता है जबकि items evenly spaced रहती हैं।

fr unit एक flexible length है: यह container के free space का एक अंश प्रतिनिधित्व करता है, वह कमरा जो fixed track sizes, content-sized tracks, और gaps resolve होने के बाद रहता है। एक 2fr 1fr 1fr track list पहले स्तंभ को आधा free space और दूसरे दो को एक चौथाई प्रत्येक देता है। subtlety यह है कि fr free space distribute करता है, कुल width नहीं, इसलिए एक track जो wide content रखता है अपने fr share को push पार कर सकता है जब तक आप इसे cap नहीं करते, जो है जहां अंतिम भाग में minmax() आता है।

repeat() एक compact तरीका है एक run of tracks लिखने के लिए: repeat(3, 1fr) 1fr 1fr 1fr है, और यह composes है, इसलिए repeat(2, 200px 1fr) चार tracks देता है। gap (grid-gap का आधुनिक नाम) केवल tracks के बीच gutters सेट करता है, कभी grid के बाहर नहीं, इसलिए यह container के अपने padding से नहीं लड़ता है।

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* तीन equal स्तंभ */
  gap: 16px 24px;                          /* 16px row gap, 24px column gap */
}

दो-value gap को ध्यान दें: row gap पहले, फिर column gap। एक single value दोनों पर लागू होता है।

JunoFlexible tracks एक fr leftover space का एक share है, इसलिए 1fr 1fr 1fr आपको तीन equal स्तंभ देता है। repeat(3, 1fr) use करें ताकि आप एक ही value को बार-बार typing न कर रहे हों, और tracks के बीच space के लिए gap। एक बार fr मेरे लिए click करने के बाद, मैंने percentages के लिए reaching करना बंद कर दिया जो कभी add up नहीं होते थे।

JunoFlexible tracksfr container में free space split करता है, इसलिए proportional स्तंभ proportional रहते हैं जब पृष्ठ resize होता है। repeat() पर lean करें track lists को short रखने के लिए और per-item margins की जगह gutters के लिए gap करें। याद रखें gap केवल tracks के बीच बैठता है, कभी outer edge पर नहीं, जो आमतौर पर बिल्कुल वही है जो आप चाहते हैं।

JunoFlexible tracksfr free space divide करता है, कुल width नहीं, इसलिए wide content वाले track अपने share को overflow कर सकते हैं जब तक आप इसे minmax() से cap नहीं करते। repeat() composes है, इसलिए repeat(2, 200px 1fr) चार tracks है। और दो-value gap row gap पहले पढ़ता है, फिर column gap, जो लोगों को trip करता है जो मानते हैं कि यह clockwise shorthand match करता है।

Items रखना

Default द्वारा प्रत्येक item अगले free cell में गिरता है, एक cell per, order में। जब आप चाहते हैं कि एक item एक से अधिक cell लेता है, आप grid-column और grid-row के साथ ऐसा कहते हैं। tracks के बीच lines को 1 से शुरू करते हुए numbered किया जाता है, इसलिए grid-column: 1 / 3 का मतलब है "line 1 से शुरू करें, line 3 पर समाप्त करें", दो स्तंभ cover करते हुए:

.featured {
  grid-column: 1 / 3;   /* column line 1 से line 3 तक span, दो स्तंभ wide */
}

यदि आप lines count नहीं करना चाहते हैं, span कहता है कि जहां item lands वहां से कितने cells को cover करना है:

.featured {
  grid-column: span 2;   /* दो स्तंभ cover करें, जहां यह item बैठता है वहां से शुरू होकर */
}

Grid placement grid lines के साथ described किया जाता है, numbered lines जो tracks के बीच और चारों ओर बैठते हैं। एक three-column grid के चार column lines हैं, 1 से 4 तक। grid-column: 1 / 3 एक item को line 1 से line 3 तक रखता है, इसलिए यह पहले दो स्तंभ span करता है; grid-row vertically समान करता है। span keyword counting से बचाता है: grid-column: span 2 दो स्तंभ cover करता है जहां item को रखा गया है।

एक whole-page layout के लिए, regions को naming करना lines counting से बेहतर पढ़ता है। grid-template-areas आपको layout को named cells के एक सेट के रूप में draw करने देता है, फिर प्रत्येक item को एक name assign करते हैं:

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";     /* sidebar अपने नाम को repeat करके दोनों rows को span करता है */
}

.page > header { grid-area: header; }
.page > aside  { grid-area: sidebar; }
.page > main   { grid-area: main; }

Placement grid lines पर चलता है, numbered boundaries हर track के चारों ओर (n-track axis के n + 1 lines हैं)। grid-column: 1 / 3 start और end column line सेट करता है, उनके बीच tracks span करते हुए; grid-column: span 2 एक start को pin किए बिना एक span सेट करता है, auto-placement algorithm को choose करने देता है कि यह कहां lands। Negative line numbers end से count करते हैं, इसलिए grid-column: 1 / -1 हमेशा full width span करता है column count की परवाह किए बिना, जो full-bleed row लिखने का durable तरीका है।

grid-template-areas cells को name करता है इसलिए आप items को line number की जगह name से place करते हैं। प्रत्येक string एक row है, प्रत्येक token एक cell है, और token को cells में repeat करना एक item को उन्हें span करता है। whitespace-formatted block एक readable diagram के रूप में layout दोगुना करता है:

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";     /* sidebar column one की दोनों rows को occupy करता है */
}

.page > aside { grid-area: sidebar; }

दो rules इसे honest रखते हैं: every row string को cells की equal संख्या होनी चाहिए, और एक name के लिए cells को एक solid rectangle बनाना चाहिए, या declaration invalid है और ignored। एक . token एक empty cell को mark करता है जिसे आप deliberately blank रखना चाहते हैं।

JunoItems रखना Items default द्वारा एक cell प्रत्येक को भरते हैं, और आप एक को grid-column या grid-row के साथ cells में stretch करते हैं। Line numbers 1 पर शुरू होते हैं, इसलिए grid-column: 1 / 3 दो स्तंभ cover करता है, या यदि आप count नहीं करना चाहते हैं तो span 2 use करें। यह areas को single नाम देने से पहले अधिकांश layouts बनाने के लिए पर्याप्त है।

JunoItems रखना Grid lines के साथ items को place करें: grid-column: 1 / 3 दो स्तंभ span करता है, और span 2 इसे एक fixed start से count किए बिना करता है। एक full page के लिए, grid-template-areas आपको regions को name करने और layout को एक नज़र में read करने देता है, जो line numbers को hand से tracking करने से बेहतर है। एक name को cells में repeat करें और वह region उन्हें span करता है।

JunoItems रखना Lines negative हो सकती हैं, इसलिए grid-column: 1 / -1 कितने भी columns हों इसके बावजूद full width span करता है, जो reliable full-bleed trick है। grid-template-areas के साथ, every row string को equal cells चाहिए और प्रत्येक named region को एक solid rectangle होना चाहिए, या पूरी declaration drop होती है। एक cell को deliberately empty रखने के लिए एक . token use करें।

Responsive grids मीडिया क्वेरी के बिना

कार्ड की एक row एक wide screen पर तीन के पार दिखनी चाहिए, एक tablet पर दो, एक phone पर एक। आप बिना breakpoints लिखे grid alone के साथ यह कर सकते हैं। trick एक line है:

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

इसे अंदर से बाहर पढ़ें। minmax(200px, 1fr) का मतलब है कि प्रत्येक column कम से कम 200px और अधिकतम space का एक share है। auto-fit फिर उतने columns को fit करता है जितने container के पास room है। Wide screen, अधिक columns fit; narrow screen, कम fit, और कार्ड अपने आप reflow होते हैं।

Pattern जो बिना एक भी media query के कार्ड को reflow करता है repeat(auto-fit, minmax(200px, 1fr)) है। प्रत्येक piece एक job करता है। minmax(200px, 1fr) एक track को define करता है जो कभी 200px से छोटा नहीं है और कभी एक fr share से बड़ा नहीं है। auto-fit वह track को उतनी बार repeat करता है जितनी बार current width में fit हो, इसलिए column count fixed breakpoints की जगह container को respond करता है।

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

200px floor आपका real control है: यह वह narrowest है कि एक card को grid से पहले fewer columns में drop होने से पहले get करने की अनुमति है। यह responsive design में fluid techniques के साथ naturally pair करता है, और यह आमतौर पर media queries को replace करता है जिन्हें आप अन्यथा एक card grid के लिए लिखते हैं।

repeat(auto-fit, minmax(200px, 1fr)) canonical responsive-grid idiom है, और प्रत्येक part अपनी जगह को earn करता है। minmax(min, max) एक lower और upper bound के साथ एक track को define करता है: minmax(200px, 1fr) कभी 200px से नीचे shrink नहीं करता है और कभी एक free-space share को ज्यादा grow नहीं करता है। 200px floor reflow threshold को सेट करता है, वह width जिस पर grid एक column को gain या lose करता है।

auto-fit और auto-fill के बीच choice वह हिस्सा है जो जानने लायक है। दोनों compute करते हैं कितने minmax() tracks container में fit होते हैं। auto-fill leftover empty tracks को grid में रखता है, इसलिए कार्ड की एक half-empty row अपनी column width पर रहती है। auto-fit उन empty tracks को zero width में collapse करता है, इसलिए present items row को fill करने के लिए expand होती हैं:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));   /* items row को fill करने के लिए stretch */
  gap: 16px;
}

एक edge को देखें: minmax(200px, 1fr) एक container को narrow 200px plus gaps से overflow कर सकता है, क्योंकि floor एक hard minimum है। minmax(min(200px, 100%), 1fr) very small screens पर floor को container width में drop होने देकर guard करता है। devices के पार floor को reliably size करने के लिए, sizing units covers करता है कि length units कैसे resolve होते हैं।

JunoResponsive grids मीडिया क्वेरी के बिनाrepeat(auto-fit, minmax(200px, 1fr)) कार्ड को अपने आप reflow करता है, breakpoints की कोई जरूरत नहीं। प्रत्येक column कम से कम 200px है और अधिकतम space का एक share, और auto-fit उतने को pack करता है जितने fit होते हैं। 200px को change करें और आप change करते हैं कि कितने कार्ड side by side बैठते हैं।

JunoResponsive grids मीडिया क्वेरी के बिना एक line, repeat(auto-fit, minmax(200px, 1fr)), कार्ड-grid media queries के एक stack को replace करता है। 200px floor lever है: यह decide करता है कि एक card कितना narrow हो जाता है इससे पहले कि grid एक column drop कर दे। इससे पहले इसके लिए पहुंचें कि आप कुछ भी breakpoints लिखें जो वास्तव में एक reflowing grid of cards है।

JunoResponsive grids मीडिया क्वेरी के बिनाauto-fit empty tracks को collapse करता है इसलिए present items fill के लिए stretch करते हैं; auto-fill empty tracks को रखता है और gaps छोड़ता है, जो उनके बीच पूरा अंतर है। overflow case को watch करें: एक hard 200px floor बहुत narrow containers पर spill कर सकता है, इसलिए minmax(min(200px, 100%), 1fr) safer floor है। Floor वह है जो आपके reflow points को sets करता है, इसलिए smallest sensible card को mind में रखकर इसे choose करें।

Explicit और implicit grids

अब तक सब कुछ explicit grid को define करता है: tracks जिन्हें आप grid-template-columns और grid-template-rows में name करते हैं। जब items उस defined grid के बाहर land करते हैं, browser उन्हें hold करने के लिए tracks create करता है, और वे implicit grid बनाते हैं। एक three-column, one-row explicit grid में एक चौथी item add करें और यह एक नई, implicitly created दूसरी row शुरू करता है। Implicit tracks default द्वारा खुद को auto size करते हैं, यही कारण है कि एक implicit row केवल अपनी सामग्री जितना ही tall है जब तक आप अन्यथा say न करें।

grid-auto-rows उन implicit rows का size set करता है (grid-auto-columns implicit columns को), इसलिए एक card grid जिसकी row count आप predict नहीं कर सकते वह still even rows प्राप्त करता है:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* explicit: तीन स्तंभ */
  grid-auto-rows: 240px;                   /* implicit rows प्रत्येक 240px हैं */
  gap: 16px;
}

Alignment फिर decide करता है कि items और tracks अपने cells में कहां बैठते हैं। justify-items items को row (inline) axis में align करता है और align-items column (block) axis में, प्रत्येक start, end, center, या stretch (default, जो cell को fill करता है) को accept करता है। place-items दोनों के लिए shorthand है, block axis पहले:

.gallery {
  place-items: center;   /* align-items और justify-items, दोनों centered */
}

minmax() भी content keywords min-content और max-content लेता है: min-content सबसे छोटा है कि एक track overflow किए बिना हो सकता है (roughly longest unbreakable word), और max-content वह size है कि सामग्री चाहती है जब nothing इसे wrap करने के लिए force नहीं करता है। minmax(min-content, max-content) जैसे एक track सामग्री को उन bounds में size करता है। और subgrid एक nested grid को अपने parent के track lines को inherit करने देता है, इसलिए एक child grid के columns outer grid के साथ line up होते हैं अपने स्वयं को define करने की जगह।

Grid-versus-flex decision पर, clean rule यह है। यदि आप एक axis पर सामग्री को arrange कर रहे हैं और consequence के रूप में wrap हो रहा है, flexbox use करें: एक nav bar, tags की एक row, एक toolbar। यदि आप सामग्री को rows और columns में place कर रहे हैं जिन्हें दोनों axes पर line up करना चाहिए, grid use करें: एक page shell, एक card gallery, एक form aligned labels और fields के साथ। वे compose अच्छी तरह से होते हैं, इसलिए एक grid cell अक्सर एक flex container रखता है, और वह combination अधिकांश layouts को cover करता है जिन्हें आप build करेंगे।

JunoExplicit और implicit grids Tracks जिन्हें आप declare करते हैं वह explicit grid हैं; कुछ भी जो browser overflowing items को hold करने के लिए जोड़ता है वह implicit grid है, और वह extra tracks auto-sized हैं जब तक grid-auto-rows या grid-auto-columns अन्यथा say न करें। Alignment justify-items और align-items पर रहती है, place-items shorthand के रूप में और stretch default के रूप में। Decision एक axis है जिसमें wrapping का मतलब flexbox है, दो axes जिन्हें line up करना चाहिए का मतलब grid है, और वे happily nest करते हैं।