CSS ցանց

Bootstrap-ի լռելյայն ցանցային համակարգը ներկայացնում է CSS դասավորության ավելի քան մեկ տասնամյակի տեխնիկայի գագաթնակետը, որը փորձարկվել և փորձարկվել է միլիոնավոր մարդկանց կողմից: Այնուամենայնիվ, այն ստեղծվել է նաև առանց CSS-ի ժամանակակից բազմաթիվ առանձնահատկությունների և տեխնիկայի, որոնք մենք տեսնում ենք նոր CSS Grid-ի նման բրաուզերներում:

Ինչպես է դա աշխատում

Bootstrap 5-ի միջոցով մենք ավելացրել ենք տարբերակ՝ միացնելու առանձին ցանցային համակարգը, որը կառուցված է CSS Grid-ի վրա, բայց Bootstrap շրջադարձով: Դուք դեռ ստանում եք դասեր, որոնց կարող եք դիմել քմահաճույքով՝ արձագանքող դասավորություններ ստեղծելու համար, բայց գլխարկի տակ այլ մոտեցմամբ:

• CSS Grid-ը միացված է: Անջատեք լռելյայն ցանցային համակարգը՝ կարգավորելով $enable-grid-classes: falseև միացրեք CSS Ցանցը՝ կարգավորելով $enable-cssgrid: true: Այնուհետև նորից կազմեք ձեր Sass-ը:

• .rowՓոխարինեք օրինակները .grid. .gridԴասարանը սահմանում display: gridև ստեղծում է այնպիսի դաս , grid-templateորը դուք կառուցում եք ձեր HTML-ով:

• Դասերը փոխարինեք .col-*դասերով .g-col-*: Դա պայմանավորված է նրանով, որ մեր CSS Grid սյունակներն օգտագործում են grid-columnհատկությունը width.

• Սյունակները և ջրհորների չափերը սահմանվում են CSS փոփոխականների միջոցով: Սահմանեք դրանք ծնողի վրա .gridև հարմարեցրեք այնպես, ինչպես ցանկանում եք, ներդիրում կամ ոճաթերթում, --bs-columnsև --bs-gap.

Ապագայում Bootstrap-ը, ամենայն հավանականությամբ, կանցնի հիբրիդային լուծման, քանի որ gapգույքը ձեռք է բերել բրաուզերի գրեթե ամբողջական աջակցություն flexbox-ի համար:

Հիմնական տարբերություններ

Լռելյայն ցանցային համակարգի համեմատ.

• Flex կոմունալ ծառայությունները նույն կերպ չեն ազդում CSS Grid սյունակների վրա:

• Բացերը փոխարինում են ջրհեղեղները: Գույքը փոխարինում է մեր լռելյայն ցանցային համակարգի gapհորիզոնականը և գործում է ավելի նման :paddingmargin

• Որպես այդպիսին, ի տարբերություն .rows-ի, .grids-ն չունեն բացասական լուսանցքներ, և մարժային կոմունալ ծառայությունները չեն կարող օգտագործվել ցանցի ջրհեղեղները փոխելու համար: Ցանցային բացերը լռելյայն կիրառվում են հորիզոնական և ուղղահայաց: Լրացուցիչ մանրամասների համար տե՛ս հարմարեցման բաժինը :

• Ներքին և հատուկ ոճերը պետք է դիտարկվեն որպես փոփոխող դասերի փոխարինում (օրինակ՝ style="--bs-columns: 3;"ընդդեմ class="row-cols-3"):

• Nesting-ն աշխատում է նույն կերպ, բայց կարող է պահանջել, որ դուք վերականգնեք ձեր սյունակների քանակը ներդիրի յուրաքանչյուր օրինակի վրա .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-ը ստեղծում է ցանցի ձևանմուշ ոճերի միջոցով, որոնք բրաուզերներին ասում են «սկսել այս սյունակից» և «ավարտել այս սյունակում»: Այդ հատկություններն են 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-ը թույլ է տալիս հեշտ տեղավորել .grids-երը: Այնուամենայնիվ, ի տարբերություն լռելյայնի, այս ցանցը ժառանգում է տողերի, սյունակների և բացերի փոփոխությունները: Դիտարկենք ստորև բերված օրինակը.

• Մենք շրջում ենք սյունակների լռելյայն թիվը՝ տեղական CSS փոփոխականով --bs-columns: 3.
• Առաջին ավտոմատ սյունակում սյունակների քանակը ժառանգվում է, և յուրաքանչյուր սյունակ կազմում է հասանելի լայնության մեկ երրորդը:
• Երկրորդ ավտոմատ սյունակում մենք վերակայել ենք սյունակների քանակը .grid12-ի (մեր լռելյայն):
• Երրորդ ավտոմատ սյունակը զուրկ բովանդակություն չունի:

Գործնականում սա թույլ է տալիս ավելի բարդ և հարմարեցված դասավորություններ՝ համեմատած մեր լռելյայն ցանցային համակարգի հետ:

<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 փոփոխականներով:

Այս CSS փոփոխականները չունեն լռելյայն արժեք. փոխարենը, նրանք կիրառում են հետադարձ արժեքներ, որոնք օգտագործվում են մինչև տեղական օրինակի տրամադրումը: Օրինակ, մենք օգտագործում var(--bs-rows, 1)ենք մեր CSS Grid տողերը, որոնք անտեսում --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. Նկատի ունեցեք, որ մենք օգտագործում gapենք .grids-ի վրա, բայց 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>

Դրա շնորհիվ դուք կարող եք ունենալ տարբեր ուղղահայաց և հորիզոնական gaps, որոնք կարող են վերցնել մեկ արժեք (բոլոր կողմերը) կամ զույգ արժեքներ (ուղղահայաց և հորիզոնական): Սա կարող է կիրառվել ներկառուցված ոճով gapկամ մեր --bs-gapCSS փոփոխականով:

<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 Grid-ի սահմանափակումներից մեկն այն է, որ մեր լռելյայն դասերը դեռ ստեղծվում են երկու Sass փոփոխականներով, $grid-columnsև $grid-gutter-width. Սա արդյունավետորեն կանխորոշում է մեր կազմված CSS-ում ստեղծված դասերի քանակը: Այստեղ դուք ունեք երկու տարբերակ.

• Փոփոխեք այդ լռելյայն Sass փոփոխականները և նորից կազմեք ձեր CSS-ը:
• Օգտագործեք ներկառուցված կամ հատուկ ոճեր՝ տրամադրված դասերը մեծացնելու համար:

Օրինակ, դուք կարող եք մեծացնել սյունակների քանակը և փոխել բացերի չափը, այնուհետև չափել ձեր «սյունակները» ներկառուցված ոճերի և նախապես սահմանված CSS Grid սյունակների դասերի խառնուրդով (օրինակ՝ .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>