CSS Grid hmanga siam a ni

CSS Grid-a siam kan alternate layout system enable, hman leh customize dan entirnan leh code snippet te nen zir rawh.

He page ah hian

Bootstrap-a default grid system hian kum sawm chuang zet CSS layout technique, mi maktaduai tam takin an lo enchhin tawh leh an lo enchhin tawh, a tawp ber a entir a ni. Mahse, CSS Grid thar ang chi browser-a kan hmuh mek CSS feature leh technique tam tak awm lovin siam a ni bawk.

Heads up—kan CSS Grid system hi experimental a ni a, v5.1.0 atang khan opt-in a ni! Kan documentation-a CSS-ah kan dah tel a, i tana entir nan kan dah a, mahse default-in a disable a ni. I project-a enable dan tur hriat nan chhiar zel ang che.

A hnathawh dan

Bootstrap 5 hmang hian CSS Grid-a siam, mahse Bootstrap twist nei grid system hran enable theihna option kan dah belh a ni. Responsive layout siam turin whim-a apply theih class i la hmu tho a, mahse hood hnuaiah approach danglam tak hmangin.

CSS Grid chu opt-in a ni. Default grid system chu setting hmangin disable $enable-grid-classes: falsela, CSS Grid chu setting hmangin enable $enable-cssgrid: truerawh. Tichuan, i Sass kha recompile leh rawh.
Instance te chu .rowwith hmangin thlak leh rawh .grid. .gridClass hian i HTML hmanga i build on tur a set a , display: grida siam bawk.grid-template
.col-*Class te chu class hmangin thlak leh rawh .g-col-*. Hei hi kan CSS Grid column-ah hian grid-columnproperty ai chuan width.
Column leh gutter size te chu CSS variable hmangin set a ni. Hengte hi parent-ah set la .grid, i duh angin customize rawh, inline emaw stylesheet-ah emaw, --bs-columnsleh --bs-gap.

Nakin lawkah chuan Bootstrap hian hybrid solution-ah a inthlak mai thei a, a chhan chu he gapproperty hian flexbox tan browser support kimchang deuhthaw a neih tawh avangin.

A danglamna pawimawh tak tak

Default grid system nen khaikhin chuan:

Flex utilities hian CSS Grid column te chu a nghawng dan a inang lo hle.
Gaps hian gutters a thlak a. Property hian kan default grid system atanga gaphorizontal a thlak a, .paddingmargin
Chutiang a nih avang chuan s ang lo takin .rows .gridhian negative margin an nei lo va, margin utilities hmangin grid gutters thlak theih a ni lo. Grid gap hi default-in horizontal leh vertical-a hman a ni. A chipchiar zawkna chu customizing section ah hian en rawh .
Inline leh custom style te hi modifier class thlaktu anga ngaih tur a ni (eg, style="--bs-columns: 3;"vs class="row-cols-3").
Nesting hian chutiang bawkin hna a thawk a, mahse nested instance tinah i column counts reset a ngai mai thei .grid. A chipchiar zawkna chu nesting section ah hian en rawh .

Entirna te

Column pathum a awm

.g-col-4Class te hmang hian viewport leh device zawng zawngah equal-width column pathum siam theih a ni . Viewport size a zirin layout thlak turin responsive class te add bawk ang che.

.g-col-4 tih a ni

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

Chhanna pe thei

Viewport hrang hranga i layout siamrem nan responsive class hmang rawh. Hetah hian viewport tawi ber berah column pahnih hmangin kan tan a, chutah chuan medium viewport leh a chung lamah column pathum-ah kan pung leh a.

.g-col-6 .g-col-md-4 tih a ni

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

Chu chu viewport zawng zawngah he column pahnih layout nen hian khaikhin rawh.

.g-col-6 tih a ni

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

Wrapping tih a ni

Grid item te chu horizontal-a room a awm tawh loh chuan line dang ah automatic in a wrap thin. gapGrid item inkara horizontal leh vertical gap-ah a hman theih tih hre reng ang che .

.g-col-6 tih a ni

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

A tan a

Start class hian kan default grid-a offset class te thlak danglam a tum a, mahse a inang vek lo. CSS Grid hian style hrang hrang hmangin grid template a siam a, chu chuan browser-te chu “he column-ah hian tan rawh” leh “he column-ah hian tawp rawh” tih a hrilh a ni. Chu property te chu grid-column-startleh grid-column-end. Start class te hi a hmasa zawk tan shorthand a ni. Column class te nen pair la, i column te chu i mamawh ang angin size leh align rawh. Start class te chu heng property te tana value dik lo tak 1angin an tan thin.0

.g-col-3 .g-a tan-2

.g-col-4 .g-a tan-6

<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 column te a awm bawk

Grid item-a class a awm loh chuan (a fate nghal .grid) grid item tin chu column pakhatah a size nghal vek ang.

1. a ni

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

Hetiang thiltih hi grid column class te nen pawh a inhmeh thei hle.

.g-col-6 tih a ni

1. a ni

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

Nesting tih a ni

Kan default grid system ang bawkin kan CSS Grid hian .grids te awlsam taka nesting theihna a siam bawk. Mahse, default ang lo takin he grid hian row, column leh gap-a inthlak danglamna a inherit thin. A hnuaia entîrna hi han ngaihtuah teh:

Column default number chu local CSS variable hmangin kan override a: --bs-columns: 3.
Auto-column hmasa berah chuan column count chu inherited a ni a, column tin chu a zau zawng awm zat hmun thuma ṭhena hmun khat a ni.
Auto-column pahnihnaah chuan nested-a column count chu .grid12-ah kan reset a (kan default).
Auto-column pathumnaah chuan nested content a awm lo.

Practice-ah chuan hei hian kan default grid system nena khaikhin chuan layout complex leh custom zawk siam theihna a siamsak a ni.

Auto-colum hmasa ber a ni

Auto-column a ni

Auto-colum pahnihna a ni

6 of 12 a ni

4 of 12 a ni

2 of 12 a ni

Pathumna chu auto-column a ni

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

Customizing a ni

Column awm zat, row awm zat, leh gap zau zawng te chu local CSS variable hmangin customize rawh.

A danglam thei	Fallback value a ni	Hrilhfiahna
`--bs-rows`	`1`	I grid template chhunga row awm zat
`--bs-columns`	`12`	I grid template chhunga column awm zat
`--bs-gap`	`1.5rem`	Column inkar gap lian tham (vertical leh horizontal) .

Heng CSS variable te hian default value an nei lo va; chu ai chuan local instance pek a nih hma loh chuan hman thin fallback value an hmang zawk thin . Entirnan, kan CSS Grid rows atan kan hmang a, chu chu khawiah mah set a la nih loh avangin a var(--bs-rows, 1)ngaihthah a ni. --bs-rowsA nih tawh chuan .gridinstance chuan chu value chu fallback value aiah a hmang ang 1.

Grid class a awm lo

Immediate children elements of .gridchu grid item a nih avangin .g-colclass chiang taka dah tel lovin size an siam ang.

Auto-column a ni

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

Column leh gap te

Column awm zat leh gap awm zat chu siamrem rawh.

.g-col-2 tih a ni

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

.g-col-6 tih a ni

.g-col-4 tih a ni

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

Rows te dah belh a ni

Row tam zawk dah belh leh column dah dan thlak danglam:

Auto-column a ni

<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 te a awm

Vertical gap te chu row-gap. Hriat tur chu s gap-ah kan hmang a .grid, mahse row-gapleh column-gapa tul angin kan siam danglam thei bawk.

.g-col-6 tih a ni

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

Chuvang chuan vertical leh horizontal gaps hrang hrang i nei thei a, chu chuan value pakhat (a sir zawng zawng) emaw, value pahnih (vertical leh horizontal) emaw a la thei a ni. Hei hi , tan inline style hmangin kan hmang thei a gap, kan --bs-gapCSS variable hmangin kan hmang thei bawk.

.g-col-6 tih a ni

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

CSS Grid-a limitation pakhat chu kan default class te hi Sass variable pahnih hmanga siam a la ni reng a, $grid-columnsleh $grid-gutter-width. Hei hian kan compiled CSS-a class siam chhuah zat chu a takin a ruat lawk a ni. Hetah hian duhthlan tur pahnih i nei a:

Chu default Sass variable te chu siam danglam la, i CSS chu recompile leh rawh.
Class pekte chu augment turin inline emaw custom style emaw hmang ang che.

Entirnan, column count i tipung thei a, gap size i thlak thei a, chutah chuan i “columns” te chu inline style leh predefined CSS Grid column class (eg, .g-col-4) mix hmangin i size thei bawk.

14 a awm a

.g-col-4 tih a ni

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