Sistema de rejilla

Atiyniyuq kuyuchina-ñawpaq flexbox rejillaykuta llamk'achiy llapa rikchaykunamanta chaymanta sayaykunamanta churanakuna ruwanapaq huk chunka iskayniyuq columna sistema kaqman, pichqa ñawpaqmanta kutichiq patakunaman, Sass tikraqkuna chaymanta mixins kaqman, chaymanta chunkakuna ñawpaqmanta riqsisqa clasekunaman gracias nispa.

Imayna llamkan

Bootstrap kaqpa rejilla sisteman huk serie waqaychanakuna, filakuna chaymanta columnakuna llamk'achin imakuna ruwanapaq chaymanta chiqanchaypaq. Flexbox nisqawan ruwasqa kachkan , tukuyninpitaq kutichiq kachkan. Uraypi huk rikch'anachiy kachkan chaymanta huk ukhu qhaway imaynachus chay rejilla huñukun chayta.

¿Musuqchu icha manachu flexbox nisqapi riqsinkichu? Ñawiriy kay CSS Tricks flexbox yanapakuyta qhipa kaqpaq, terminología kaqpaq, kamachiykunapaq chaymanta código fragmentos kaqpaq.

<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>

Hawa ejemplo kimsa kaqlla ancho columnakuna ruwan huch'uy, chawpi, hatun chaymanta yapa hatun dispositivokunapi ñawpaqmanta riqsisqa rejilla claseykuwan. Chay columnakunaqa tayta mamawan kuska p'anqapi chawpichasqam kachkan .container.

Chayta pakispa, kaypi imayna llamk'an:

• Contenedores huk mediota qun chawpiman chaymanta horizontalmente sitioykipa contenidonta pad. Huk kutichiq pixel anchopaq .containerutaq .container-fluidllapa width: 100%qhaway punku chaymanta dispositivo sayayninkuna chimpapaq llamk'achiy.
• Filakunaqa columnakunapaq p'istukunam. Sapa columnaqa horizontal nisqayuqmi padding(canal nisqa sutiyuq) chaykunapurapi espaciota kamachinapaq. Chaymantaqa paddingmana allin margenniyuq filakunapim chayta contrarrestakun. Chayhina, llapa columnakunaykipi kaq contenido paña lado urayman rikuylla chiqanchasqa kachkan.
• Huk rejilla churaypi, contenidoqa columnakuna ukhupi churasqa kanan tiyan chaymanta columnakunalla filakunap chaylla wawankuna kanman.
• Flexbox kaqman gracias, mana huk nisqayuq rejilla columnakuna widthkikinmanta churakunqa kaqlla ancho columnakuna hina. Ejemplopaq, tawa instanciakuna .col-smsapan kikillanmanta kanqa 25% ancho huch'uy p'akiymanta chaymanta wichayman. Aswan rikch'anakunapaq kikinmanta churana columnakuna t'aqapi qhaway .
• Sapaq clasekuna hayk'a columnakuna llamk'achiyta munanki sapa filapi 12 atikuqmanta rikuchin. Chaymi, kimsa kaqlla anchoyuq columnakuna chimpapi munanki chayqa, llamk'achiy atikunki .col-4.
• Columna widths pachakmanta hukninpi churasqa, chayrayku sapa kuti fluido chaymanta sayayniyuq kanku tayta elementonkumanhina.
• paddingSapaq sapaqchasqakuna sapa sapaq sapaqchasqakunapura canales nisqakunata ruwanapaq horizontal nisqayuqmi , chaywanpas, chay marginfrom filakunamanta chaymanta paddingcolumnakunamanta hurquyta atinki chaywan .no-gutterson the .row.
• Rejilla kutichiq kananpaqqa, pichqa rejilla pakikuna kan, sapa kutichiq pakinapaq huk : llapa pakikuna (yapa uchuy), uchuy, chawpi, hatun, yapa hatun.
• Rejilla p'akiykuna aswan pisi ancho willay tapuykunapi sayasqa kanku, niyta munan chay huk p'akiy punto kaqman chaymanta llapa chaymanta pata kaqkunaman ruwanku (kayhina, .col-sm-4huch'uy, chawpi, hatun chaymanta yapasqa hatun dispositivokunaman ruwakun, ichaqa mana ñawpaq xsp'akiy punto kaqpichu).
• Aswan semántico markapaq ñawpaqmanta riqsisqa rejilla clasekunata (hina .col-4) utaq Sass mixins llamk'achiyta atinki.

Flexbox muyuriqpi hark'akuykunata chaymanta pantaykunata yachay , wakin HTML elementokunata flex waqaychanakuna hina llamk'achiyta mana atiy hina .

Rejilla akllanakuna

Bootstrap ems icha rems llamk'achin aswan hatun kayninkunata riqsichinapaq, pxs llamk'achin llika p'akiykunapaq chaymanta waqaychana anchokunapaq. Kayqa qhawana punkup anchun pixelkunapi kasqanraykum , qillqap sayayninwan mana tikrasqanraykum .

Rikuy imayna Bootstrap rejilla sistemamanta aspectokuna llamk'anku achka dispositivokunapura huk makiwan ruwana tablawan.

Kikinmanta churana columnakuna

Punto de ruptura-específica columna clasekunata llamk'achiy mana sasa columna sayaypaq mana huk sut'i yupasqa clase hina .col-sm-6.

Igual-ancho

Ejemplopaq, kaypi iskay rejilla churanakuna kanku sapa dispositivopaq chaymanta qhawana punkupaq, kaqmanta xschaymanta xl. Yapay mayk'a unidad mana unidadniyuq clasekuna sapa p'akiypaq necesitasqaykipaq chaymanta sapa columna kaqlla ancho kanqa.

<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>

Kikin anchoyuq sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa achka chirukunapi, ichataq Safari flexbox pantayflex-basis karqan, kayta mana sut'i icha mana llamk'ayta hark'arqan border. Ñawpaq maskaq layakunapaq llamkanakuna kanku, ichaqa mana necesariochu kananku tiyan sichus kunan pacha kanki.

<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>

Huk columna anchota churay

Kikinmanta churay flexbox rejilla columnakunapaqpas niyta munan huk columna anchota churayta atikunki chaymanta wawqi columnakuna kikillanmanta muyuriqninpi sayayninta tikrayta atikunki. Ñawpaqmanta riqsisqa llika clasekunata (urapi rikuchisqa hina), llika mixins utaq chiru ukhupi anchokunata llamk'achiy atikunki. Reparay huk columnakuna hatun sayayninta tikranqa ima anchoña chawpi columna kaptinpas.

<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>

Contenido de ancho variable

Clases nisqakunata llamk'achiy col-{breakpoint}-autocolumnakunata hatunyachinapaq, contenidonkupa ancho naturalninman hina.

<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>

Igual ancho achka filayuq

Achka sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa sapaqchasqa .w-100maypi sapaqchasqa musuq chiruman pakikunanta munanki chayta churaspa. .w-100Samaykunata kutichiq ruway wakin kutichiq qhaway yanapakuykunawan chaqruspa .

<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>

Clases de respuesta

Bootstrap kaqpa llikanpi pichqa patakuna ñawpaqmanta riqsisqa clasekunayuq kachkan, sasa kutichiq churanakuna ruwanapaq. Sapaqchay columnakunaykipa sayayninta yapa uchuy, uchuy, chawpi, hatun utaq yapa hatun dispositivokunapi imayna munasqaykimanhina.

Tukuy pakikuykuna

Aswan huch'uy dispositivokunamanta aswan hatun kaqkama kaqlla rejillakunapaq, .colchaymanta .col-*clasekunata llamk'achiy. Huk yupasqa claseta willay mayk'aq huk particular sayayniyuq columnata necesitanki; mana chayqa, ama manchakuspa .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>

Apilado a horizontal

Huk huñu .col-sm-*clasekuna llamk'achispa, huk sistema de rejilla básica ruwayta atikunki chaymanta pilasqa qallarikun chaymanta horizontalman tukun huch'uy p'akiypi ( 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>

Chaqruy hinaspa tupachiy

¿Manachu munanki columnakunayki wakin rejilla patakunapi pilakunalla kananpaq? Sapa patapaq hukniray clasekuna huñusqata necesitasqanman hina llamk’achiy. Uraypi kaq ejemplota qhaway aswan allin yuyayta imayna tukuy llamk’asqanmanta.

<!-- 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>

Alineación

Flexbox chiqanchay yanapakuykunata llamk'achiy sayaqmanta, sayaqmanta columnakunata chiqanchanapaq.

Alineación vertical nisqa

<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>

Alineación horizontal nisqa

<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>

Mana kanalniyuq

Ñawpaqmanta riqsisqa rejilla claseykupi columnakunapura canales nisqakunataqa .no-gutters. Kayqa llapa chaylla wawakuna columnakunamanta negativo margins nisqakunatam hurqun .row, horizontal nisqatapas hurqun.padding

Kaypi kay estilokuna ruwanapaq pukyuta kachkan. Reparay, sapaq sapaqchasqakuna ñawpaq wawakuna sapaqchasqakunallaman alcanceyuq kanku chaymanta atributo akllaq kaqnintakama qhawasqa kanku . Kay aswan específico akllanata ruwan chaypas, columna relleno aswan ruwasqa kanmanraq espaciamiento yanapakuykunawan .

¿Necesitan un diseño de borde a borde? Tayta mamata .containerutaq .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Ruwaypiqa kaypim imayna qawakun. Reparay kayta llapa wak ñawpaqmanta riqsisqa llika clasekunawan llamk'ayta atikunki (sapaq anchokuna, kutichiq patakuna, wakmanta kamachiykuna chaymanta aswan).

<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>

Columna envoltura

Sichus huk sapaq sapaqchasqa 12 aswan sapaqchasqakuna churasqa kanqa, sapa huñu yapasqa sapaqchasqakuna, huk unidad hina, musuq chiruman p'istunqa.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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>

Columna pakikuna

Flexbox kaqpi musuq chiruman columnakunata pakiyqa huk uchuy hack nisqatam munan: huk elementota yapay width: 100%maypipas columnakunayki musuq chiruman p'istuykuyta munanki chaywan. Normalmente kayqa achka .rows kaqwan ruwakun, ichaqa mana sapa implementación método kaymanta cuentata quyta atinchu.

<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>

Hinallataq kay samayta wakin p'akiykunapi ruwayta atikunki kutichiq qhaway yanapakuyniykuwan .

<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>

Wakmanta kamachiy

Clases nisqakunata kamachiy

.order-Clases llamk'achiy contenidoykipa rikuy ordenninta kamachinapaq . Kay clasekuna kutichiq kanku, chayrayku chay by breakpoint churayta atikunki order(kayhina, .order-1.order-md-2). Pichqantin rejilla patakunapi a través 1nisqapaq yanapakuyta churan .12

<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>

También hay responsivos .order-firsty .order-lastclases que cambian el orderde un elemento aplicando order: -1y order: 13( order: $columns + 1), respectivamente. .order-*Kay clasekunatapas necesitasqanman hinam yupasqa clasekunawanpas chaqrusqa kanman .

<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>

Columnas nisqakunata offset nisqa

Iskay ñanpi rejilla columnakunata offsetta atikunki: kutichiq .offset-rejilla claseyku chaymanta margen yanapakuyniyku . Rejilla clasekuna sayayniyuq kanku columnakunawan tupananpaq chaymanta margenkuna aswan allin kanku usqhayta churanapaq maypichus offset anchun tikraq kachkan.

Clases de desplazamiento

.offset-md-*Clases nisqawan columnakunata pañaman kuyuchiy . Kay clasekunaqa huk columnapa lluq'i margenninta *columnakunawan yapan. Ejemplopaq, tawa columnakunapim .offset-md-4kuyun ..col-md-4

<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>

Kutichiq p'akiykunapi columna ch'uyanchanamanta aswan, offsetkunata wakmanta churanayki tiyan. Kayta ruwaypi qhaway rejilla ejemplopi .

<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>

Utilidades de margen nisqa

v4 kaqpi flexbox kaqman kuyuywan, margen yanapakuykunata llamk'achiy atikunki imayna .mr-autowawqi columnakuna hukmanta hukmanta karuman kallpachay hina.

<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>

Nido

Ñawpaqmanta ruwasqa llikawan willanaykipaq, musuq .rowchaymanta huñusqa .col-sm-*sapaq sapaqchasqa sapaqchasqa sapaqchasqa ukhupi yapay .col-sm-*. Anidado filakuna huk huñu columnakunayuq kanan tiyan 12 utaq aswan pisi yapasqa (mana llapa 12 tarikuq columnakuna llamk'achinaykipaq kamachisqachu).

<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>

Sass mixinkuna

Bootstrap kaqpa pukyu Sass willakuykunata llamk'achkaspa, akllanayuq kanki Sass tikraqkuna chaymanta mixins llamk'achiyta sapanchasqa, semántico chaymanta kutichiq p'anqa churanakuna ruwanapaq. Ñawpaqmanta riqsisqa rejilla claseyku kay kikin tikraqkunata chaymanta mixins llamk'achinku huk tukuy suite listo llamk'anapaq clasekuna usqhaylla kutichiq churanakuna qunankupaq.

Variables nisqakuna

Variables chaymanta mapakuna yupay columnakuna, canal ancho, chaymanta medios tapuy punto maypichus columnakuna flotante qallarinapaq kamachin. Kaykunata llamk'achiyku ñawpaqmanta riqsisqa rejilla clasekuna ruwanapaq, chaymanta uraypi listasqa sapanchasqa mixins kaqpaq.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixinkuna

Mixinkuna llamk'achisqa kanku llikata tikraqkunawan kuskachasqa sapa llika columnakunapaq CSS semántico ruwanapaq.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Ejemplo de uso

Tikraqkunata kikin sapanchasqa chanikunaman tikrayta atinki, icha mixins nisqakunata ñawpaqmanta chanikunawan llamk'achiylla. Kaypi huk rikch'ana kachkan ñawpaqmanta churasqakuna llamk'achiyta iskay columna churayta ruwanapaq huk ch'usaq chawpipi.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<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>

Personalizar la rejilla

Sass rejilla ruwasqaykuwan chaymanta mapakunawan llamk'achispa, ñawpaqmanta riqsisqa rejilla clasekuna hunt'asqa ruwayta atikun. Yupay patakuna, willay mast'ariy dimensiones, chaymanta waqaychana anchokuna tikray —chaymanta wakmanta huñuy.

Columnas y canales

Rejilla columnakuna yupayqa Sass variables nisqawanmi tikrasqa kanman. $grid-columnssapa sapa columnapa anchunkunata (pachakmanta) paqarichinanpaqmi llamkachisqa, $grid-gutter-widthcolumna canales nisqapaq anchonta churan.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Niveles de rejilla

Kikin columnakunamanta aswan karuman kuyuspa, yupayta rejilla patakunatapas ruwayta atinki. Sichus tawa llika patakunallata munanki, $grid-breakpointschaymanta $container-max-widthskayhina kaqman musuqyachinki:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass tikraqkunapi utaq mapakunapi ima tikraytapas ruwachkaspa, tikrayniykikunata waqaychanki chaymanta wakmanta huñunayki tiyan. Chayta ruwaspaqa huk musuq huñu ñawpaqmanta riqsisqa rejilla clasekuna columna anchokunapaq, offsets kaqpaq chaymanta kamachiypaq lluqsinqa. Kutichiy rikuy yanapakuykunapas musuqchasqa kanqa sapanchasqa pakinakuna llamk'achinapaq. Aswan allinta qhaway llikata chanikunata px(mana rem, em, icha %) nisqapi churayta.