CSS торы

Bootstrap әдепкі тор жүйесі миллиондаған адамдар сынаған және сынаған онжылдық CSS орналасу әдістерінің шарықтау шегін білдіреді. Бірақ ол сонымен қатар жаңа CSS Grid сияқты браузерлерде көретін көптеген заманауи CSS мүмкіндіктері мен әдістерінсіз жасалған.

Бұл қалай жұмыс істейді

Bootstrap 5 көмегімен біз CSS торында құрылған, бірақ Bootstrap бұралуы бар бөлек тор жүйесін қосу опциясын қостық. Сіз әлі де жауап беретін макеттерді құру үшін қалауыңыз бойынша қолдануға болатын сабақтар аласыз, бірақ басқа тәсілмен.

• CSS Grid қосылды. Әдепкі тор жүйесін орнату арқылы өшіріңіз $enable-grid-classes: falseжәне CSS торын орнату арқылы қосыңыз $enable-cssgrid: true. Содан кейін Sass-ты қайта құрастырыңыз.

• даналарын .rowауыстырыңыз .grid. Класс HTML көмегімен құрастырылатын .gridсыныпты орнатады display: gridжәне жасайды .grid-template

• .col-*Сыныптарды сыныптармен ауыстырыңыз .g-col-*. Себебі, біздің CSS Grid бағандары grid-columnорнына сипатты пайдаланады width.

• Бағандар мен саңылаулардың өлшемдері CSS айнымалылары арқылы орнатылады. Оларды ата-анаға орнатыңыз .gridжәне қалауыңызша, кірістірілген немесе мәнерлер кестесінде және арқылы --bs-columnsтеңшеңіз --bs-gap.

Болашақта Bootstrap гибридті шешімге ауысуы мүмкін, себебі gapмүлік flexbox үшін толық дерлік браузер қолдауына қол жеткізді.

Негізгі айырмашылықтар

Әдепкі тор жүйесімен салыстырғанда:

• Flex утилиталары CSS Grid бағандарына бірдей әсер етпейді.

• Саңылаулар шұңқырларды ауыстырады. Бұл сипат әдепкі тор жүйеміздегі gapкөлденеңді ауыстырады және сияқты функцияларды орындайды .paddingmargin

• Осылайша, s-ден айырмашылығы .row, .grids-де теріс жиектер жоқ және маржа утилиталарын тор ағындарын өзгерту үшін пайдалану мүмкін емес. Тор аралықтары әдепкі бойынша көлденең және тігінен қолданылады. Қосымша мәліметтер алу үшін теңшеу бөлімін қараңыз.

• Кірістірілген және теңшелетін мәнерлер модификатор сыныптарын ауыстыру ретінде қарастырылуы керек (мысалы, 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 торымыз .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. Есіңізде болсын, біз 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-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 торының бір шектеуі біздің әдепкі сыныптарымыз әлі де екі 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>