CSS nisqa Rejilla

Bootstrap kaqpa ñawpaqmanta ruwasqa rejilla sisteman chunka watamanta aswan CSS churay técnicas kaqpa tukukuyninta rikuchin, millonnintin runakunap pruebasqa chaymanta pruebasqa. Ichaqa, ruwasqa karqan mana achka kunan pacha CSS ruwanakuna chaymanta técnicas rikusqayku musuq CSS Grid hina maskaqkunapi.

Imayna llamkan

Bootstrap 5 kaqwan, akllanata yapayku huk sapaq rejilla sistema atichiypaq mayqinchus CSS Grid kaqpi ruwasqa, ichaqa huk Bootstrap t'ikraywan. Hinallam clasekunata chaskinki qam huk capricho kaqpi aplicayta atikunki kutichiq layouts ruwanapaq, ichaqa huk hukniray enfoquewan capucha urapi.

• CSS Grid nisqaqa akllanapaqmi. Ñawpaqmanta churasqa llika llamkanata mana llamk'achiy churaspa chaymanta CSS llikata $enable-grid-classes: falseatichiy churaspa $enable-cssgrid: true. Chaymanta, Sass nisqaykita yapamanta huñuy.

• Instanciakunatawan tikray .row. .grid.gridClase churan chaymanta display: gridruwan huk grid-templatechaymanta ruwanki HTMLniykiwan.

• .col-*Clases nisqakunata clasekunawan tikray .g-col-*. Kayqa CSS Grid columnakunaykupa grid-columnrantinpi propiedadta llamk'achisqanraykum width.

• Columnakuna chaymanta canalización sayaykuna CSS variables kaqnintakama churasqa kanku. Kaykunata tayta mamapi churay .gridchaymanta imayna munasqaykimanhina ruway, chiru ukhupi utaq huk estilo raphipi, --bs-columnschaymanta --bs-gap.

Hamuq pachapi, Bootstrap huk híbrido solucionman tikrakunqachá imaynachus gappropiedad yaqa hunt'asqa maskaq yanapakuy flexbox kaqpaq aypasqa.

Hatun chikan kayninkuna

Ñawpaqmanta churasqa llika sistemawan tupachisqa:

• Flex yanapakuykuna mana CSS Grid columnakunata kaqllatachu afectan.

• Gaps nisqakunaqa canales nisqakunatam tikran. Propiedadqa ñawpaqmanta ruwasqa rejilla sistemaykumanta gaphorizontalta tikran chaymanta aswan hina llamkan .paddingmargin

• Chayhina kaptinqa, mana .rows hinachu, .grids mana negativo margenkunayuqchu chaymanta margen utilidadkuna mana atikunmanchu canales de rejilla tikranapaq. Rejilla ch'usaqkunaqa ñawpaqmanta churasqa kanku horizontalmente chaymanta verticalmente. Aswan sut'inchaykunapaq ruwaypaq t'aqapi qhaway .

• Chiru ukhupi chaymanta sapanchasqa estilokuna qhawasqa kanan tiyan tikraq clasekunap rantinpi hina (kayhina, style="--bs-columns: 3;"vs class="row-cols-3").

• Nesting kaqlla llamk'an, ichaqa huk nested kaqpa sapa instancianpi columna yupayniykikunata musuqmanta churanaykipaq mañasunkiman .grid. Aswan sut'inchaykunapaqqa nido nisqa t'aqapi qhaway.

Ejemplos

Kimsa columnakuna

Kimsa kaqlla anchoyuq columnakuna llapa qhawanakuna chaymanta dispositivokuna chawpipi ruwakunman .g-col-4clasekuna llamk'achispa. Kutichiq clasekunata yapay , qhaway punku sayayninwan churanata tikranaykipaq.

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

Kutichiq

Kutichiq clasekunata llamk'achiy, qhaway punkukunapura churasqaykita allichanaykipaq. Kaypi aswan k'iti qhawanakunapi iskay sapaqchasqawan qallarinchik, chaymanta chawpi qhawanakunapi chaymanta pataman kimsa sapaqchasqaman wiñayku.

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

Chayta kay iskay sapaqchasqa churanawan tukuy qhawanakunapi tupachiy.

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

P’istu

Rejilla elementokuna kikinmanta qatiq chiruman p'istuykunku mana aswan espacio horizontal kaqpi kaqtin. Reparay, chay gapaplikakun horizontal hinaspa vertical brechas entre elementos de rejilla.

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

Qallarin

Qallarina clasekuna ñawpaqmanta ruwasqa rejillaykupa offset clasekuna tikrayta munanku, ichaqa mana tukuyninpi kaqllachu kanku. CSS Grid huk plantilla rejilla ruwan estilokuna kaqnintakama chaymanta navegadorkunaman ninku “kay columnapi qallariy” chaymanta “kay columnapi tukukuy”. Chay propiedades nisqakunan kanku grid-column-starthinaspa grid-column-end. Qallariy clasekunaqa ñawpaq kaqpaq taquigrafía nisqa. Chaykunata columna clasekunawan tupachiy sayayninman chaymanta columnakunayki imayna necesitasqaykiman hina tupachiy. Qallarina clasekuna kaypi qallarinku 1as 0huk mana allin chani kay propiedades kaqpaq.

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

Auto columnakuna

Mayk'aq mana clasekuna kanchu llikata imakuna kaqpi (huk kaqpa chaylla wawankuna .grid), sapa llika imakuna kikinmanta huk sapaqchasqa kanqa.

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

Kay ruwayqa llikata columna clasekunawan chaqrusqa kanman.

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

Nido

Ñawpaqmanta ruwasqa rejilla sistemaykuman rikch'akuq, CSS Rejillayku .grids kaqmanta mana sasa anidado ruwayta saqin. Ichaqa, mana ñawpaqmanta hinachu, kay llikaqa filakunapi, sapaqchasqakunapi, ch'usaqkunapipas tikraykunatam herenciata chaskikun. Kay urapi ejemplota qhawarisun:

• Sapaqchasqa yupayta sapanchasqa yupayta huk kiti CSS tikraqwan llalliyku: --bs-columns: 3.
• Ñawpaq kaq auto-columna kaqpi, columna yupay herenciayuq chaymanta sapa columna huk kimsa kaq ancho kaqmanta kan.
• Iskay kaq auto-columna kaqpi, columna yupayta anidado .gridkaqpi 12 kaqman (ñawpaqmanta ruwasqayku) kaqmanta churarqayku.
• Kimsa kaq auto-columna mana anidado contenidoyuqchu.

Ruwaypi kayqa aswan sasa chaymanta ruwasqa churaykunata saqin mayk'aq ñawpaqmanta ruwasqa rejilla sistemaykuwan tupachisqa.

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

Personalizar

Sapanchasqa yupayta, hayk'a filakuna, chaymanta ch'usaqkuna anchunta llaqta CSS tikraqkunawan ruway.

Kay CSS tikraqkuna mana ñawpaqmanta chaniyuqchu kanku; aswanpas, huk kiti instancia qusqa kanankama llamk'achisqa fallback chanikunata churanku . Ejemplopaq, var(--bs-rows, 1)CSS Grid filaykupaq llamk'achiyku, mayqinchus mana qhawanchu --bs-rowsimaraykuchus chay manaraq maypipas churasqachu. Huk kuti kaptin, .gridinstancia chay chanita llamk'achinqa chaymanta 1.

Mana rejilla clasekuna

Chaylla wawakuna elementokuna kaqmanta .gridkanku rejilla elementokuna, chayrayku paykuna sayachisqa kanqa mana explícitamente huk .g-colclase yapaspa.

<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Columnas y brechas

Yupay columnakunata, ch’usaq kaqtapas allinchay.

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

Filakunata yapay

Aswan filakunata yapay chaymanta sapaqchasqakuna churanata tikray:

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

Gaps

Sayaq ch'usaqkunata tikrayqa row-gap. Reparay s gapnisqapi llamk'achinchik .grid, ichaqa row-gaphinaspa column-gapnecesitasqanman hina tikrayta atisunman.

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

Chayrayku, hukniray sayaq, sayaq gaps nisqayuq kayta atinki, chaytaq huk chanillata (tukuy ladukunata) icha huk paris chanikunata (sayaq, sayaq) hap'iyta atin. Kayqa huk chiru ukhupi estilowan llamk'achiy atikunman gap, utaq --bs-gapCSS tikraqniykuwan.

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

Sass

Huk CSS Grid kaqpa limitacionninqa ñawpaqmanta claseyku iskay Sass tikraqkunawan ruwasqaraq kasqanmi, $grid-columnschaymanta $grid-gutter-width. Kayqa allinta ñawpaqmanta kamachin hayk'a clasekuna ruwasqayku huñusqa CSS kaqpi. Kaypiqa iskay akllanakunayuqmi kanki:

• Chay ñawpaqmanta Sass tikraqkunata tikray chaymanta CSS kaqniyki musuqmanta huñuy.
• Chiru ukhupi utaq sapanchasqa estilokunata llamk'achiy qusqa clasekunata yapanaykipaq.

Ejemplopaq, columna yupayta yapayta atikunki chaymanta ch'usaq sayayninta tikrayta atikunki, chaymanta “columnakunayki” tupuyta atikunki huk chaqrusqa inline estilokuna chaymanta ñawpaqmanta riqsisqa CSS Grid columna clasekuna (kayhina, .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>