CSS ગ્રીડ
ઉદાહરણો અને કોડ સ્નિપેટ્સ સાથે CSS ગ્રીડ પર બનેલી અમારી વૈકલ્પિક લેઆઉટ સિસ્ટમને કેવી રીતે સક્ષમ કરવી, ઉપયોગ કરવી અને કસ્ટમાઇઝ કરવી તે શીખો.
બુટસ્ટ્રેપની ડિફોલ્ટ ગ્રીડ સિસ્ટમ એક દાયકાથી વધુની CSS લેઆઉટ તકનીકોની પરાકાષ્ઠાને રજૂ કરે છે, જે લાખો લોકો દ્વારા અજમાવી અને પરીક્ષણ કરવામાં આવી છે. પરંતુ, તે ઘણી આધુનિક CSS સુવિધાઓ અને તકનીકો વિના પણ બનાવવામાં આવી હતી જે અમે નવા CSS ગ્રીડ જેવા બ્રાઉઝર્સમાં જોઈ રહ્યા છીએ.
તે કેવી રીતે કામ કરે છે
બુટસ્ટ્રેપ 5 સાથે, અમે CSS ગ્રીડ પર બનેલી અલગ ગ્રીડ સિસ્ટમને સક્ષમ કરવાનો વિકલ્પ ઉમેર્યો છે, પરંતુ બુટસ્ટ્રેપ ટ્વિસ્ટ સાથે. તમને હજુ પણ એવા વર્ગો મળે છે કે જેને તમે પ્રતિભાવાત્મક લેઆઉટ બનાવવા માટે અરજી કરી શકો છો, પરંતુ હૂડ હેઠળ એક અલગ અભિગમ સાથે.
-
CSS ગ્રિડ પસંદ કરેલું છે. સેટિંગ દ્વારા ડિફોલ્ટ ગ્રીડ સિસ્ટમને અક્ષમ કરો
$enable-grid-classes: false
અને સેટિંગ દ્વારા CSS ગ્રીડને સક્ષમ કરો$enable-cssgrid: true
. પછી, તમારા સાસને ફરીથી કમ્પાઇલ કરો. -
ના દાખલાઓને
.row
સાથે બદલો.grid
..grid
વર્ગ સેટ કરેdisplay: grid
છે અને બનાવે છે જેgrid-template
તમે તમારા HTML વડે બિલ્ડ કરો છો. -
.col-*
વર્ગો સાથે વર્ગો બદલો.g-col-*
. આ એટલા માટે છે કારણ કે અમારી CSS ગ્રીડ કૉલમ નીgrid-column
જગ્યાએ પ્રોપર્ટીનો ઉપયોગ કરે છેwidth
. -
કૉલમ અને ગટરના કદ CSS ચલો દ્વારા સેટ કરવામાં આવે છે. આને પેરેન્ટ પર સેટ કરો
.grid
અને તમે ઇચ્છો તેમ, ઇનલાઇન અથવા સ્ટાઇલશીટમાં,--bs-columns
અને સાથે કસ્ટમાઇઝ કરો--bs-gap
.
ભવિષ્યમાં, બુટસ્ટ્રેપ હાઇબ્રિડ સોલ્યુશનમાં શિફ્ટ થઈ જશે કારણ કે gap
પ્રોપર્ટીએ ફ્લેક્સબોક્સ માટે લગભગ સંપૂર્ણ બ્રાઉઝર સપોર્ટ પ્રાપ્ત કર્યો છે.
મુખ્ય તફાવતો
ડિફૉલ્ટ ગ્રીડ સિસ્ટમની તુલનામાં:
-
ફ્લેક્સ ઉપયોગિતાઓ એ જ રીતે CSS ગ્રીડ કૉલમ્સને અસર કરતી નથી.
-
ગાબડા ગટરને બદલે છે.
gap
પ્રોપર્ટીpadding
અમારી ડિફોલ્ટ ગ્રીડ સિસ્ટમમાંથી હોરીઝોન્ટલને બદલે છે અને તેના જેવા વધુ કાર્યો કરે છેmargin
. -
જેમ કે, s થી વિપરીત
.row
,.grid
s પાસે કોઈ નકારાત્મક માર્જિન નથી અને ગ્રીડ ગટર બદલવા માટે માર્જિન ઉપયોગિતાઓનો ઉપયોગ કરી શકાતો નથી. ગ્રીડ ગેપ ડિફૉલ્ટ રૂપે આડા અને ઊભી રીતે લાગુ કરવામાં આવે છે. વધુ વિગતો માટે કસ્ટમાઇઝિંગ વિભાગ જુઓ . -
style="--bs-columns: 3;"
ઇનલાઇન અને કસ્ટમ શૈલીઓને મોડિફાયર વર્ગો (દા.ત., વિclass="row-cols-3"
.) માટે રિપ્લેસમેન્ટ તરીકે જોવી જોઈ��� . -
નેસ્ટિંગ એ જ રીતે કામ કરે છે, પરંતુ તમારે નેસ્ટેડના દરેક ઇન્સ્ટન્સ પર તમારી કૉલમ ગણતરીઓ રીસેટ કરવાની જરૂર પડી શકે છે
.grid
. વિગતો માટે માળો વિભાગ જુઓ .
ઉદાહરણો
ત્રણ કૉલમ
.g-col-4
વર્ગોનો ઉપયોગ કરીને તમામ વ્યુપોર્ટ અને ઉપકરણોમાં ત્રણ સમાન-પહોળાઈના કૉલમ બનાવી શકાય છે. વ્યૂપોર્ટ સાઇઝ દ્વારા લેઆઉટ બદલવા માટે પ્રતિભાવશીલ વર્ગો ઉમેરો .
<div class="grid">
<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>
પ્રતિભાવશીલ
સમગ્ર વ્યૂપોર્ટમાં તમારા લેઆઉટને સમાયોજિત કરવા માટે પ્રતિભાવશીલ વર્ગોનો ઉપયોગ કરો. અહીં આપણે સૌથી સાંકડા વ્યુપોર્ટ્સ પર બે કૉલમથી શરૂઆત કરીએ છીએ, અને પછી મધ્યમ વ્યૂપોર્ટ અને તેનાથી ઉપરના ત્રણ કૉલમ સુધી વધીએ છીએ.
<div class="grid">
<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>
બધા વ્યુપોર્ટ પર આ બે કૉલમ લેઆઉટ સાથે તેની સરખામણી કરો.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
રેપિંગ
ગ્રીડ આઇટમ્સ ઑટોમૅટિક રીતે આગલી લાઇન પર લપેટી જાય છે જ્યારે આડી રીતે વધુ જગ્યા ન હોય. નોંધ કરો કે gap
ગ્રીડ આઇટમ્સ વચ્ચેના આડા અને ઊભા અંતરને લાગુ પડે છે.
<div class="grid">
<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
<div class="grid">
<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
, દરેક ગ્રીડ આઇટમ આપોઆપ એક કૉલમમાં માપવામાં આવશે.
<div class="grid">
<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>
આ વર્તનને ગ્રીડ કૉલમ વર્ગો સાથે મિશ્રિત કરી શકાય છે.
<div class="grid">
<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
s ના સરળ માળખા માટે પરવાનગી આપે છે. જો કે, ડિફોલ્ટથી વિપરીત, આ ગ્રીડ પંક્તિઓ, કૉલમ્સ અને ગાબડાઓમાં ફેરફારોને વારસામાં મેળવે છે. નીચેના ઉદાહરણને ધ્યાનમાં લો:
- અમે સ્થાનિક CSS વેરીએબલ સાથે કૉલમની ડિફૉલ્ટ સંખ્યાને ઓવરરાઇડ કરીએ છીએ:
--bs-columns: 3
. - પ્રથમ ઓટો-કૉલમમાં, કૉલમની ગણતરી વારસામાં મળે છે અને દરેક કૉલમ ઉપલબ્ધ પહોળાઈના ત્રીજા ભાગની હોય છે.
- બીજી ઑટો-કૉલમમાં, અમે નેસ્ટેડ પર કૉલમ કાઉન્ટને
.grid
12 (અમારું ડિફૉલ્ટ) પર ફરીથી સેટ કર્યું છે. - ત્રીજા સ્વતઃ-સ્તંભમાં કોઈ નેસ્ટેડ સામગ્રી નથી.
વ્યવહારમાં આ અમારી ડિફોલ્ટ ગ્રીડ સિસ્ટમની સરખામણીમાં વધુ જટિલ અને કસ્ટમ લેઆઉટ માટે પરવાનગી આપે છે.
<div class="grid" 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 ચલોની કોઈ મૂળભૂત કિંમત નથી; તેના બદલે, તેઓ ફોલબેક મૂલ્યો લાગુ કરે છે જેનો ઉપયોગ સ્થાનિક દાખલો પૂરો પાડવામાં ન આવે ત્યાં સુધી થાય છે. ઉદાહરણ તરીકે, અમે var(--bs-rows, 1)
અમારી CSS ગ્રીડ પંક્તિઓ માટે ઉપયોગ કરીએ છીએ, જે અવગણના કરે --bs-rows
છે કારણ કે તે હજી સુધી ક્યાંય સેટ કરવામાં આવી નથી. એકવાર તે થઈ જાય, .grid
દાખલા ની ફોલબેક મૂલ્યને બદલે તે મૂલ્યનો ઉપયોગ કરશે 1
.
કોઈ ગ્રીડ વર્ગો નથી
ના તાત્કાલિક બાળકોના ઘટકો એ ગ્રીડ આઇટમ છે, તેથી સ્પષ્ટપણે વર્ગ .grid
ઉમેર્યા વિના તેનું કદ કરવામાં આવશે ..g-col
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
કૉલમ અને ગાબડા
કૉલમની સંખ્યા અને ગેપને સમાયોજિત કરો.
<div class="grid" 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>
<div class="grid" 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>
પંક્તિઓ ઉમેરી રહ્યા છીએ
વધુ પંક્તિઓ ઉમેરીને અને કૉલમનું સ્થાન બદલીને:
<div class="grid" 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
. નોંધ કરો કે અમે s gap
પર ઉપયોગ કરીએ છીએ .grid
, પરંતુ row-gap
અને column-gap
જરૂરિયાત મુજબ સુધારી શકાય છે.
<div class="grid" 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
s હોઈ શકે છે, જે એક મૂલ્ય (બધી બાજુઓ) અથવા મૂલ્યોની જોડી (ઊભી અને આડી) લઈ શકે છે. આ માટે ઇનલાઇન શૈલી gap
સાથે અથવા અમારા --bs-gap
CSS વેરીએબલ સાથે લાગુ કરી શકાય છે.
<div class="grid" 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
) ના મિશ્રણ સાથે તમારા "કૉલમ્સ"નું કદ કરી શકો છો.
<div class="grid" 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>