Mifano ya Mtaani wa Kipindi

Header
Menu
Main
Right
Footer

亲自试一试

Mashua ya jumu

Moduli ya kushua cha jumu cha CSS (CSS Grid Layout Module) inaunda mifumo ya kushua cha kijumu kinachokwenda na mitaifa na majicho, inakusababisha ujenzi wa tovuti kuwa rahisi, bila kusababu kwa mifungo wa mifungo na uharibifu wa kimaingizo.

Vivu vya kina

Vivu vya kina zote vya sasa vinakubali kipengiaji cha jumu.

57.0 16.0 52.0 10 44

Vifungo vya jumu

Mashua ya jumu inaitwa kina kimoja na vifungo vingine vingine au vingi.

实例

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

亲自试一试

Display Property

kwa sababu ya HTML elementi: display kwa kusababu kwa kipengiaji cha: grid kwa inline-grid wakati huo, hii inaonekana kama kijumu cha jumu.

实例

.grid-container {
  display: grid;
}

亲自试一试

实例

.grid-container {
  display: inline-grid;
}

亲自试一试

Vifungo vya jumu vya kina na vingine vinavyoenda kwenye kijumu kinaweza kuwa vifungo vya jumu kwa upya.

Majicho ya jumu (Grid Columns)

Mandhari ya kipengele cha kijumu kinaelewa kama kijicho.

Mitafu ya jumu (Grid Rows)

Mandhari wa kijumu cha kipengele kinaelewa kama mitaifa.

Kimaingizo cha jumu (Grid Gaps)

Kimaingizo kati ya kijicho au kijumu kinaundwa kama kimaingizo.

Unaweza kushika ukurugenzi wa kimaingizo kwa kuitumia kipengiaji kimeingia kimeziwa:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

实例

grid-column-gap Kipengiaji hiki kinasababu kwa kusababu kwa kimaingizo kati ya kijicho:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

亲自试一试

实例

grid-row-gap Kipengiaji hiki kinasababu kwa kusababu kwa kimaingizo kati ya mitaifa:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

亲自试一试

实例

grid-gap Kipengiaji hiki kinaweza kufanyika kwa kusababu kwa kipengiaji cha kijumu na kipengiaji cha kijumu cha kijicho:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

亲自试一试

实例

grid-gap Kipengiaji kinaweza kutumika kufanya kusababu kimaingizo kwa barabara na kimaingizo kwa kijumu:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

亲自试一试

网格行（Grid Lines）

列之间的线称为列线（column lines）。

行之间的线称为行线（row lines）。

当把网格项目放在网格容器中时，请引用行号：

实例

把网格项目放在列线 1，并在列线 3 结束它：

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

亲自试一试

实例

把网格项目放在行线 1，并在行线 3 结束它：

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

亲自试一试