Sifa ya grid-template

Sifa grid-template huweka idadi na upana wa safu na safu wima, ambazo kipengele kitachukua kwenye gridi na ni fomu iliyofupishwa ya sifa grid-template-rows na grid-template-columns. Safu na safu wima, ambazo kipengele kitawekwa huzingatiwa kupitia kufyeka. Sifa grid-template huwekwa kwenye kipengele-kizio na huamua mpangilio wa vipelelezi. Katika thamani ya sifa tunaweka upana wa safu au safu wima kwa vipimo vyovyote vya ukubwa.

Wakati wa kubainisha thamani za sifa kwenye pikseli vipimo vya vipengele vitafanana kabisa navyo. Ikiwa tunatumia neno auto, basi safu wima na safu zitajaza nafasi yote inayopatikana. Matumizi ya kipimo fr (sehemu) humaanisha, kuwa nafasi yote itagawanywa katika sehemu sawa. Faida ya fr ni umiliki wake wa kukabiliana na chombo tofauti au azimio la skrini, kwa sababu fr hugawia tu kwa idadi iliyobainishwa ya sehemu bila kushikamana na ukubwa maalum kwenye pikseli.

Kisarufi

csskichaguli {
  grid-template: upana na idadi ya safu / upana na idadi ya safu wima;
}

Mfano

Wacha kwa kutumia sifa grid-template tutengeneze jedwali:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Mfano

Sasa wacha tuweke safu ya pili na ya tatu upana sawa, na kila safu wima - upana tofauti:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Mfano

Sasa kwenye jedwali kutoka kwa mfano uliopita tufanye safu ya juu iwe na upana wa sehemu mbili, na safu wima ya kwanza - nusu ya sehemu:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Angalia pia