Container wa Mtaani wa CSS

1
2
3
4
5
6
7
8

Jifunze Kufanya Kwenye Mtaani

kifungu cha kifungu

Kama unataka kumaliza kifungu cha HTML kama kifungu cha kifungu, inahitajika kuingiza display Kipimo hiki kinapokea values ya grid au inline-grid.

Kifungu cha kifungu kinatengenezwa na viumbe vya kifungu ambavyo vinapatikana kwenye mstari na mstari.

kipimo cha grid-template-columns

grid-template-columns Kipimo hiki kinadefini namba ya mstari kwenye usambazaji wa kifungu, kinaweza kumielekea ukubwa wa mstari wa kila mstari.

Maadili yake ni orodha ya kipimo kwenye eneo kipya, kila kipimo kinadefini ukubwa wa mstari wa kila mstari.

Kama unataka kusaidia kifungu cha kifungu kinakua 4 mstari, weka ukubwa wa 4 mstari hivi; kama kila mstari inahitajika kuwa na ukubwa wa eneo unaofanana, weka "auto".

Mafano

Pata kifungu kinakua 4 mstari:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Jifunze Kufanya Kwenye Mtaani

Tahadhari:Kama kuna viumbe vya kifungu 4 vya kifungu 4, kifungu kinatangaza mstari mpya kwenye mstari mpya hivi na kuingiza viumbe hivi kwenye mstari hivi.

grid-template-columns Kipimo hiki kinaweza kutumika kumielekea ukubwa wa mstari (kubwa cha eneo).

Mafano

Weka ukubwa wa 4 mstari hivi:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Jifunze Kufanya Kwenye Mtaani

kipimo cha grid-template-rows

grid-template-rows Kipimo hiki kinadefini ukubwa wa mwezi wa kila mstari.

1
2
3
4
5
6
7
8

Maadili yake ni orodha ya kipimo kwenye eneo kipya, kila kipimo kinadefini ukubwa wa mwezi wa kila mstari:

Mafano

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Jifunze Kufanya Kwenye Mtaani

kipimo cha justify-content

justify-content Kipimo hiki kinatumika kumaliza mwezi wa kifungu kote kwenye kifungu.

1
2
3
4
5
6
7
8

Tahadhari:Ukubwa wa mwezi wa mtumizi wa kifungu inahitajika kuwa chini ya ukubwa wa kifungu, kwa hivyo kifungu cha justify-content kinaweza kutumika.

Mafano

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Jifunze Kufanya Kwenye Mtaani

Mafano

.grid-container {
  display: grid;
  justify-content: space-around;
}

Jifunze Kufanya Kwenye Mtaani

Mafano

.grid-container {
  display: grid;
  justify-content: space-between;
}

Jifunze Kufanya Kwenye Mtaani

Mafano

.grid-container {
  display: grid;
  justify-content: center;
}

Jifunze Kufanya Kwenye Mtaani

Mafano

.grid-container {
  display: grid;
  justify-content: start;
}

Jifunze Kufanya Kwenye Mtaani

Mafano

.grid-container {
  display: grid;
  justify-content: end;
}

Jifunze Kufanya Kwenye Mtaani

align-content yaani kipimo

align-content Mwili wa mafano wa kusikitisha mtaani wa kina kwa kina

1
2
3
4
5
6
7
8

Tahadhari:Ukubwa wa mtaani wa mtaani wa grid lazima wakubwa na ukubwa wa container, kwa hivyo属性 align-content inafaa kufanya kazi.

Mafano

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Jifunze Kufanya Kwenye Mtaani

Mafano

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Jifunze Kufanya Kwenye Mtaani

Mafano

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Jifunze Kufanya Kwenye Mtaani

Mafano

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Jifunze Kufanya Kwenye Mtaani

Mafano

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Jifunze Kufanya Kwenye Mtaani

Mafano

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

Jifunze Kufanya Kwenye Mtaani