CSS Rejilla rehegua

Bootstrap sistema red por defecto ohechauka culminación ohasáva peteî década umi técnica diseño CSS, oñeha'ãva ha oñeha'ãva millones de personas. Ha katu, ojejapo avei heta mba’ekuaarã ha técnica CSS ko’ag̃agua’ỹre jahecháva hína kundahárape CSS Grid pyahúicha.

Mba’éichapa omba’apo

Bootstrap 5 ndive, romoĩkuri opción emboguata hag̃ua peteĩ sistema cuadrícula añónte oñemopu’ãva CSS Grid-pe, ha katu peteĩ Bootstrap twist reheve. Pehupyty gueteri umi clase ikatúva pe’aplika peteĩ capricho-pe pemopu’ã haĝua umi diseño ombohováiva, ha katu peteĩ enfoque iñambuéva reheve pe capucha guýpe.

• CSS Grid ha’e opt-in. Embogue sistema cuadrícula por defecto emohenda rupi $enable-grid-classes: falseha emboguata CSS Rejilla emohenda rupi $enable-cssgrid: true. Upéi, embojoaju jey nde Sass.

• Emyengovia umi instancia de .rowcon .grid. Pe .gridmbo’esyry omohenda display: gridha omoheñói peteĩ grid-templateremopu’ãva nde HTML rupive.

• Emyengovia .col-*umi clase umi .g-col-*clase rehe. Kóva ojehu ñande CSS Grid vorekuéra oipurúgui pe grid-columnmbaꞌekuaarã width.

• Umi columna ha canalización tuichakue oñemohenda umi variable CSS rupive. Emohenda ko’ãva túva ári .gridha emohenda reipotáicha, línea ryepýpe térã peteĩ kuatia’atýpe, --bs-columnsha ndive --bs-gap.

Amo gotyove, Bootstrap oiméne oñembohasáta peteĩ solución híbrida-pe pe gappropiedad ohupyty haimete pytyvõ navegador henyhẽva flexbox-pe g̃uarã.

Umi mba’e iñimportantevéva ojoavyva

Oñembojojávo sistema de rejilla por defecto rehe:

• Umi utilidad Flex ndoikói peteĩchaite umi columna CSS Grid rehegua.

• Umi brecha omyengovia umi canalización. Pe gappropiedad omyengovia horizontal paddingñande sistema cuadrícula por defecto-gui ha ombaꞌapove margin.

• Péicha, ojoavy .rows-gui, .grids ndorekói margen negativo ha umi utilidad margen rehegua ndikatúi ojeporu oñemoambue haguã umi canalización red rehegua. Umi brecha rejilla rehegua ojeporu horizontalmente ha verticalmente por defecto. Ehecha pe sección personalización rehegua reikuaave hag̃ua.

• Umi estilo en línea ha personalizado ojehechavaꞌerã umi clase modificador ñemyengovia ramo (techapyrã, style="--bs-columns: 3;"vs class="row-cols-3").

• Pe anidación omba’apo peteĩcha, ha katu ikatu oikotevẽ ndéve emohendajey hag̃ua ne vore jepapa peteĩteĩva instancia peteĩ anidado rehegua .grid. Ehecha pe sección de anidación rehegua umi detalle rehegua.

Tembiecharã

Mbohapy columna rehegua

Mbohapy vore ipukukue joja opaite jehechaukaha ha tembipuru’i rupi ikatu ojejapo ojeporúvo umi .g-col-4mbo’esyry. Emoĩve mbo’esyry ombohováiva emoambue hag̃ua ñemohenda jehechaukaha tuichakue rupive.

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

Ombohováiva

Eipuru mbo’esyry ombohováiva emohenda hag̃ua ne ñemohenda umi jehechaukaha rupi. Koꞌape ñañepyrũ mokõi vore reheve umi jehechaukaha ijyvykuꞌivévape, ha upéi jakakuaa mbohapy vore peve umi jehechaukaha mbytépe ha yvateve.

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

Embojoja upéva ko mokõi vore ñemohenda rehe opaite jehechaukaha rehe.

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

Envoltura rehegua

Umi mbaꞌe cuadrícula rehegua oñembojere ijeheguiete ambue línea-pe ndaiporivéima jave espacio horizontalmente. Ñañamindu u pe gapojeaplikaha umi brecha horizontal ha vertical rehegua umi elemento cuadrícula rehegua apytépe.

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

Oñepyrũ

Umi mboꞌepy ñepyrũrã oguereko hembipotápe omyengovia ñande cuadrícula por defecto mboꞌepy offset rehegua, ha katu ndahaꞌei peteĩchaite. CSS Grid omoheñói peteĩ plantilla cuadrícula rehegua umi estilo rupive he’íva kundahárape “oñepyrũ hag̃ua ko vore’ípe” ha “opa hag̃ua ko vore’ípe”. Umi propiedad ha'e grid-column-startha grid-column-end. Umi mbo’esyry ñepyrũrã ha’e taquigrafía pe peteĩháme g̃uarã. Embojoaju umíva umi mbo’esyry vore rehegua ndive tuicha ha emohenda hag̃ua ne vore reikotevẽháicha. Umi mboꞌepy ñepyrũrã oñepyrũ 1haꞌeháicha 0peteĩ valor ndovaléiva koꞌã mbaꞌekuaarãme g̃uarã.

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

Umi columna auto rehegua

Ndaipóri jave mboꞌepy umi mbaꞌe cuadrícula rehegua (umi mitã pyaꞌete peteĩ .grid), peteĩteĩva mbaꞌe cuadrícula rehegua oñembotuichave ijeheguiete peteĩ vore peve.

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

Ko jepokuaa ikatu oñembojeheꞌa umi clase columna cuadrícula rehegua ndive.

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

Nidación rehegua

Ojogua ñande sistema red por defecto-pe, ñande CSS Grid oheja ojejapo hag̃ua anidación ndahasýiva .grids rehegua. Ha katu, ndojoguái pe por defecto-pe, ko cuadrícula ohereda umi cambio umi fila, columna ha gap-pe. Jahechamína ko ehémplo oĩva koʼápe:

• Ñamboyke mboy vore’i ñembohekopyre peteĩ CSS mba’ekuaarã tendápegua reheve: --bs-columns: 3.
• Peteĩha autocolumna-pe, ojehereda pe columna jepapa ha peteĩteĩva columna haꞌehína peteĩ tercio pe ancho ojeguerekóvagui.
• Mokõiha auto-columna-pe, ñamoĩjeýma columna jepapapy anidado .grid-pe 12-pe (ñande por defecto).
• Mbohapyha autocolumna ndorekói contenido anidado.

En la práctica kóva oheja umi diseño complejo ha personalizado-ve oñembojojávo ñande sistema de rejilla por defecto rehe.

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

Personalización rehegua

Emohenda mboýpa oĩ vore, mboy vorepa oĩ ha mboy vore ipekuepa umi mbaꞌekuaarã CSS pegua ndive.

Ko’ã CSS mba’ekuaarã ndoguerekói mba’ekuaarã ñepyrũrã; upéva rangue, omoĩ hikuái umi valor fallback ojeporúva oñemeꞌe peve peteĩ instancia local. Techapyrã, jaipuru var(--bs-rows, 1)ñande CSS Grid vorekuérape g̃uarã, omboykéva --bs-rowsupéva noñemohendapáigui gueteri moõve. Oĩma guive, .gridinstancia oipurúta upe valor pe valor fallback rangue 1.

Ndaipóri clase de rejilla

Umi elemento mitã pyaꞌetegua de .gridhaꞌehína umi elemento cuadrícula rehegua, upévare oñembotuichavevaꞌerã oñembojoapyꞌeỹre explícitamente peteĩ .g-colclase.

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

Columna ha brecha rehegua

Emohenda mboy columnapa oguereko ha pe brecha.

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

Oñemoĩvo umi fila

Oñemoĩve vore ha oñemoambuévo vore ñemohenda:

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

Umi brecha rehegua

Emoambue umi brecha vertical emoambuévo añoite pe row-gap. Ñañamindu u jaipuruha s gaprehe , ha katu ha ikatu oñemoambue tekoteveháicha..gridrow-gapcolumn-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>

Upévare ikatu jaguereko gaps vertical ha horizontal iñambuéva, ikatúva ogueraha petet valor año (opaite lado) téra petet valor par (vertical ha horizontal). Kóva ikatu ojeporu peteĩ estilo inline reheve gap, térã ñande --bs-gapCSS variable reheve.

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

Peteĩ limitación CSS Grid rehegua haꞌehína ñande clase por defecto oñemboheko gueteri mokõi Sass variable rupive, $grid-columnsha $grid-gutter-width. Kóva omohenda porã mboy mbo’esyrypa oñemboheko ñande CSS oñembohekopyrévape. Nde reguereko mokõi opción ko’ápe:

• Emoambue umi Sass mba’ekuaarã ñepyrũrã ha embojoaju jey ne CSS.
• Eipuru estilo en línea térã personalizado embotuichave hag̃ua umi clase oñeme’ẽva.

Techapyrã, ikatu embohetave vore jepapa ha emoambue vore tuichakue, ha upéi embotuicha nde “columna” peteĩ mezcla estilo inline ha CSS Grid vore mboꞌepy oñembohekopyréva reheve (techapyrã, .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>