Sistema ti grid
Usaren ti nabileg a mobile-first flexbox grid-mi tapno mangbangon kadagiti layout ti amin a sukog ken kadakkel gapu iti sangapulo ket dua a sistema ti adigi, lima a default a responsive tier, dagiti variable ken mixin ti Sass, ken pinulpullo a nasakbay a naikeddeng a klase.
Ti sistema ti grid ti Bootstrap ket agus-usar ti serye dagiti pagkargaan, dagiti hilera, ken dagiti adigi tapno mangilayout ken mangitunos ti linaon. Naaramid dayta iti flexbox ken naan-anay a makasungbat. Iti baba ket maysa a pagarigan ken ti nauneg a panangkita no kasano nga agtitipon ti grid.
Baro wenno saan kadi a pamiliar ti flexbox? Basaen daytoy a giya ti flexbox ti CSS Tricks para iti likudan, terminolohia, pagannurotan, ken dagiti snippet ti kodigo.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Ti pagarigan iti ngato ket mangpartuat kadagiti tallo nga agpapada-a-kalawa a kolum kadagiti babassit, kalalainganna, dadakkel, ken ekstra a dadakkel nga alikamen babaen ti panagusar kadagiti nasakbay a naikeddeng a klase ti gridtayo. Dagita a kolum ket naisentro iti panid nga addaan iti nagannak .container
.
Breaking it down, kastoy ti panagandar daytoy:
- Dagiti container ket mangipaay iti pamay-an a mangisentro ken horizontal a mangi-pad kadagiti linaon ti site-mo. Usaren
.container
para iti makasungbat a kalawa ti pixel wenno.container-fluid
para itiwidth: 100%
ballasiw dagiti amin a kadakkel ti viewport ken alikamen. - Dagiti hilera ket balkot para kadagiti adigi. Tunggal adigi ket addaan iti horizontal
padding
(maawagan iti gutter) a pangkontrol iti espasio iti nagbaetan dagitoy. Kalpasannapadding
, makontra daytoy kadagiti hilera nga addaan kadagiti negatibo a pingir. Iti daytoy a wagas, amin a linaon kadagiti kolummo ket makita a naitunos nga agpababa iti kannigid a sikigan. - Iti maysa a layout ti grid, ti linaon ket masapul a maikabil iti uneg dagiti adigi ken dagiti laeng adigi ket mabalin a dagus nga annak dagiti hilera.
- Gapu ti flexbox, dagiti adigi ti grid nga awan ti naikeddeng
width
ket automatiko a maiplastar a kas dagiti agpapada a kalawa a adigi. Kas pagarigan, uppat nga instansia ti.col-sm
ket tunggal maysa ket automatiko a 25% ti kalawana manipud iti bassit a breakpoint ken agpangato. Kitaen ti benneg dagiti kolum ti auto-layout para kadagiti ad-adu pay a pagarigan. - Dagiti klase ti adigi ket mangipakita ti bilang dagiti adigi a kayatmo nga usaren manipud kadagiti mabalin a 12 iti tunggal maysa a linia. Isu a no kayatmo ti tallo nga agpapada ti kalawana a kolum iti ballasiw, mabalinmo nga usaren ti
.col-4
. - Dagiti kolum
width
s ket naikeddeng kadagiti porsiento, isu a kanayon a pluido ken kadakkelda a relatibo iti nagannak nga elementoda. - Dagiti adigi ket addaan kadagiti horisontal
padding
tapno mangpartuat kadagiti kanal iti nagbaetan dagiti indibidual nga adigi, nupay kasta, mabalinmo nga ikkaten timargin
manipud kadagiti hilera kenpadding
manipud kadagiti adigi nga addaan.no-gutters
iti.row
. - Tapno agbalin ti grid a makasungbat, adda dagiti lima a grid breakpoint, maysa para iti tunggal maysa a sumungbat a breakpoint : amin a breakpoint (extra small), bassit, kalalainganna, dakkel, ken ekstra a dakkel.
- Dagiti puntos ti panagburak ti grid ket naibatay kadagiti kabassitan a kalawa a panagsaludsod ti media, a ti kayatna a sawen ket agaplikar dagitoy iti dayta a maysa a puntos ti panagburak ken amin dagitoy iti ngato daytoy (kas pagarigan,
.col-sm-4
agaplikar kadagiti babassit, kalalainganna, dakkel, ken ekstra a dakkel nga alikamen, ngem saan nga umuna a puntos tixs
panagburak). - Mabalinmo nga usaren dagiti nasakbay a naikeddeng a klase ti grid (kas ti
.col-4
) wenno dagiti Sass mixins para iti ad-adu a semantiko a panagmarka.
Ammuem dagiti limitasion ken dagiti bug iti aglawlaw ti flexbox , a kas ti saan a pannakabael nga agusar kadagiti sumagmamano nga elemento ti HTML a kas dagiti paglaon ti flex .
Bayat a ti Bootstrap ket agus-usar em
ti s wenno rem
s para iti panangipalawag kadagiti kaaduan a kadakkel, px
dagiti s ket maus-usar para kadagiti puntos ti panagburak ti grid ken dagiti kalawa ti pagkargaan. Daytoy ket gapu ta ti kalawa ti viewport ket adda kadagiti pixel ken saan nga agbaliw babaen ti kadakkel ti letra .
Kitaen no kasano nga agtrabaho dagiti aspeto ti sistema ti grid ti Bootstrap iti ballasiw dagiti adu nga alikamen nga addaan iti nalaka a mausar a lamisaan.
Ekstra nga bassit <576px |
Bassit nga ≥576px |
Kalalainganna nga ≥768px |
Dakkel nga ≥992px |
Ekstra nga dakkel ≥1200px |
|
---|---|---|---|---|---|
Max kalawa ti pagkargaan | Awan (auto) . | 540px nga | 720px nga | 960px nga | 1140px nga |
Prefix ti klase | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# ti kolum | 12 nga | ||||
Lapad ti kanal | 30px (15px iti tunggal sikigan ti maysa a kolum) . | ||||
Mabalin nga umok | Wen | ||||
Panag-order iti kolum | Wen |
Usaren dagiti breakpoint-espesipiko a klase ti adigi para iti nalaka a panagdakkel ti adigi nga awan ti nalawag a nanumeroan a klase a kas ti .col-sm-6
.
Kas pagarigan, ditoy ket dua a layout ti grid a maipakat iti tunggal maysa nga alikamen ken viewport, manipud xs
iti aginggana iti xl
. Inayon ti ania man a bilang dagiti unit-less a klase para iti tunggal maysa a breakpoint a kasapulam ken tunggal maysa a kolum ket agpapada ti kalawana.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Dagiti agpapada-a-kalawa a kolum ket mabalin a mabingbingay kadagiti adu a linia, ngem adda idi ti Safari flexbox a bug a nanglapped iti daytoy nga agtrabaho nga awan ti nalawag flex-basis
wenno border
. Adda dagiti workaround para kadagiti daan a bersion ti browser, ngem saan koma a kasapulan dagitoy no up-to-date-ka.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Ti auto-layout para kadagiti adigi ti grid ti flexbox ket kayatna pay a sawen a mabalinmo nga ikeddeng ti kalawa ti maysa a kolum ken dagiti agkabsat a kolum ket automatiko a mangbalbaliw ti kadakkel iti aglawlawna. Mabalinmo nga usaren dagiti nasakbay a naikeddeng a klase ti grid (kas naipakita iti baba), dagiti grid mixins, wenno dagiti kalawa ti inline. Imutektekanyo a dagiti dadduma a kolum ket agbaliwto ti kadakkelda urayno kasano ti kalawa ti tengnga a kolum.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Usaren col-{breakpoint}-auto
dagiti klase tapno kadakkel dagiti kolum a naibatay iti natural a kalawa ti linaonda.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Mangpartuat kadagiti agpapada ti kalawana a kolum a mangsaklaw kadagiti adu a hilera babaen ti panangikabil ti a .w-100
no sadino ti kayatmo a pagburak dagiti adigi iti baro a linia. Pagbalinen dagiti break a makasungbat babaen ti panangilaok ti .w-100
iti sumagmamano a makasungbat a display utilities .
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Ti grid ti Bootstrap ket mangiraman kadagiti lima a tukad dagiti nasakbay a naikeddeng a klase para iti panagbangon kadagiti komplikado a sumungbat a layout. Ipasayaat ti kadakkel dagiti kolummo kadagiti ekstra a bassit, bassit, kalalainganna, dakkel, wenno ekstra a dakkel nga alikamen nupay kasta makitam a maitutop.
Para kadagiti grid nga agpapada manipud kadagiti kabassitan kadagiti alikamen aginggana kadagiti kadakkelan, usaren ti .col
ken .col-*
dagiti klase. Ibaga ti maysa a nanumeroan a klase no kasapulam ti partikular a kadakkel a kolum; no saan, agwayawayakayo a mangpetpet iti .col
.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
Babaen ti panagusar ti maymaysa a grupo dagiti .col-sm-*
klase, mabalinmo ti mangpartuat ti batayan a sistema ti grid a mangrugi a naurnong sakbay nga agbalin a horisontal nga addaan iti bassit a breakpoint ( sm
).
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
Dimo kayat a dagiti kolummo ket basta agtumpok iti sumagmamano a grid tier? Usaren ti kombinasion ti nadumaduma a klase para iti tunggal tier no kasapulan. Kitaen ti pagarigan iti baba para iti nasaysayaat nga ideya no kasano nga agtrabaho amin dayta.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
Usaren dagiti flexbox alignment utilities tapno bertikal ken horizontal a mangitunos kadagiti adigi.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Dagiti kanal iti nagbaetan dagiti adigi kadagiti nasakbay a naikeddeng a klasetayo ti grid ket mabalin a maikkat babaen ti .no-gutters
. Daytoy ket mangikkat ti negatibo nga margin
s manipud .row
ken ti horisontal padding
manipud kadagiti amin a dagus nga ubbing a kolum.
Ania ti taudan a kodigo para iti panagpartuat kadagitoy nga estilo. Imutektekanyo a dagiti panangibabawi ti adigi ket naisakop kadagiti laeng umuna nga ubbing a kolum ken naipuntiria babaen ti agpili ti attribute . Bayat a daytoy ket mangpataud ti ad-adu nga espesipiko a mangpili, ti panag-padding ti adigi ket mabalin pay laeng a mapasayaat babaen dagiti utilidad ti panagsisina .
Kasapulan kadi ti disenio manipud iti igid agingga iti igid? Ibaba ti nagannak .container
wenno .container-fluid
.
Iti praktis, adtoy ti langana. Imutektekanyo mabalinmo nga itultuloy nga usaren daytoy kadagiti amin a dadduma pay a nasakbay a naikeddeng a klase ti grid (a mairaman dagiti kalawa ti adigi, dagiti sumungbat a tukad, dagiti panagurnos manen, ken dadduma pay).
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
No nasurok a 12 nga adigi ti naikabil iti uneg ti maymaysa a linia, tunggal grupo dagiti ekstra nga adigi ket, kas maysa a yunit, agbalkot iti baro a linia.
Gapu ta 9 + 4 = 13 > 12, daytoy nga 4-kolum-a-kalawa a div ket makagun-od ti nabalkot iti baro a linia a kas maysa nga agsasaruno a yunit.
Agtultuloy dagiti sumaganad a kolum iti baro a linia.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
Ti panangburak kadagiti adigi iti baro a linia iti flexbox ket agkasapulan ti bassit a hack: manginayon ti maysa nga elemento nga addaan width: 100%
sadinoman a kayatmo a baluten dagiti adigim iti baro a linia. Gagangay daytoy ket maibanag babaen ti adu nga .row
s, ngem saan a tunggal maysa a pamay-an ti pannakaipatungpal ket mabalin a mangibaga iti daytoy.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
Mabalinmo pay nga iyaplikar daytoy a break kadagiti espesipiko a breakpoint babaen dagiti responsive display utilities mi .
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
Usaren .order-
dagiti klase para iti panangkontrol iti makita nga urnos ti linaonmo. Dagitoy a klase ket makasungbat, isu a mabalinmo nga ikeddeng ti order
babaen ti breakpoint (kas pagarigan, .order-1.order-md-2
). Iramanna ti suporta para iti 1
babaen 12
iti ballasiw ti amin a lima a grid tiers.
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
Adda pay dagiti responsive .order-first
ken .order-last
dagiti klase a mangbalbaliw ti order
ti maysa nga elemento babaen ti panangipakat order: -1
ken order: 13
( order: $columns + 1
), a nagsasaruno. Mabalin met a mailaok dagitoy a klase kadagiti nanumeroan .order-*
a klase no kasapulan.
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
Mabalinmo nga i-offset dagiti kolum ti grid iti dua a wagas: dagiti sumungbat .offset-
a klasemi ti grid ken dagiti utilidad ti marginmi . Dagiti klase ti grid ket nadakkel tapno maipada kadagiti adigi bayat a dagiti pingir ket ad-adda a makatulong para kadagiti napardas a layout a sadiay ti kalawa ti offset ket agdumaduma.
Iyakar dagiti kolum iti kannawan babaen ti panagusar kadagiti .offset-md-*
klase. Dagitoy a klase ket paaduenda ti kannigid a pingir ti maysa a kolum babaen dagiti *
adigi. Kas pagarigan, .offset-md-4
aggaraw .col-md-4
iti rabaw ti uppat a kolum.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Malaksid ti panagikkat ti kolum kadagiti sumungbat a breakpoint, mabalin a kasapulam nga i-reset dagiti offset. Kitaen daytoy nga agtigtignay iti pagarigan ti grid .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
Iti panagakar iti flexbox iti v4, mabalinmo nga usaren dagiti margin utilities a kas .mr-auto
ti panangpilit kadagiti kakabsat a kolum nga umadayo iti maysa ken maysa.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
Tapno mai-nest ti linaonmo babaen ti default a grid, manginayon ti baro .row
ken grupo dagiti .col-sm-*
adigi iti uneg ti addan a .col-sm-*
kolum. Dagiti naisanglad a hilera ket rumbeng a mangiraman ti maysa a grupo dagiti adigi a mangnayon aginggana ti 12 wenno basbassit (saan a kasapulan nga usarem amin dagiti 12 a magun-od a kolum).
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
No agus-usar kadagiti taudan a Sass a papeles ti Bootstrap, addaanka iti pagpilian nga agusar kadagiti variable ken mixin ti Sass tapno mangpartuat kadagiti kostumbre, semantiko, ken makasungbat a layout ti panid. Dagiti nasakbay a naikeddeng a klasemi ti grid ket agus-usar kadagitoy met laeng a variable ken dagiti mixin tapno mangipaay ti sibubukel a suite dagiti nakasagana nga usaren a klase para kadagiti napardas a sumungbat a layout.
Dagiti variable ken mapa ket mangikeddeng ti bilang dagiti adigi, ti kalawa ti kanal, ken ti puntos ti panagsaludsod ti media a pangrugian kadagiti agtaytayab nga adigi. Usarenmi dagitoy tapno mangpataud kadagiti nasakbay a naikeddeng a klase ti grid a nadokumento iti ngato, ken kasta met para kadagiti kostumbre a mixin a nailista iti baba.
Dagiti mixin ket naus-usar a maikuyog kadagiti grid a variable tapno mangpataud ti semantiko a CSS para kadagiti indibidual a grid a kolum.
Mabalinmo a baliwan dagiti variable kadagiti bukodmo a kostumbre a pateg, wenno usarem laeng dagiti mixin nga addaan kadagiti default a pategda. Adda ditoy ti pagarigan ti panagusar kadagiti default a panagitunos tapno mangpartuat ti dua-a-kolum a layout nga addaan iti giwang iti nagbaetan.
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Babaen ti panagusar kadagiti naibangon a grid Sass a variable ken mapami, mabalin a naan-anay a maibagay dagiti nasakbay a naikeddeng a klase ti grid. Baliwan ti bilang dagiti tier, dagiti dimension ti panagsaludsod ti media, ken dagiti kalawa ti pagkargaan—kalpasanna ti panagtipon manen.
Ti bilang dagiti adigi ti grid ket mabalin a mabaliwan babaen dagiti variable ti Sass. $grid-columns
ket naus-usar a mangpataud kadagiti kalawa (iti porsiento) ti tunggal maysa nga indibidual nga adigi bayat $grid-gutter-width
a mangipalubos kadagiti breakpoint-espesipiko a kalawa a nabingbingay a naurnos iti ballasiw padding-left
ken padding-right
para kadagiti kanal ti adigi.
Iti panaglabas dagiti adigi a mismo, mabalinmo pay nga ipasadaan ti bilang dagiti grid tier. No kayatmo laeng ti uppat a grid tier, i-update-mo ti $grid-breakpoints
ken $container-max-widths
iti maysa a banag a kas iti daytoy:
No mangaramidka kadagiti ania man a panagbalbaliw kadagiti variable wenno mapa ti Sass, kasapulam nga idulinen dagiti panagbalbaliwmo ken agtipon manen. Ti panagaramid iti daytoy ket mangiruar ti baro a grupo dagiti nasakbay a naikeddeng a klase ti grid para kadagiti kalawa ti adigi, dagiti offset, ken panagurnos. Dagiti responsibo a utilidad ti pannakakita ket ma-update pay tapno agusar kadagiti kostumbre a breakpoint. Siguraduen nga ikeddeng dagiti pateg ti grid iti px
(saan a rem
, em
, wenno %
).