Kifupi kwa Safu na Safu Wima kwenye Gridi za CSS

Kuna hali ambapo ni rahisi kubainisha vipimo vya safu na safu wima kwa umbo la kifupi. Kwa hili tunatumia sifa grid-template, ambayo hubainishwa kwenye kipengele-kitumi na inawakilisha umbo lililofupishwa la kurekodi sifa mbili grid-template-rows na grid-template-columns.

Safu na safu wima kwa chombo cha gridi hubainishwa kupitia kufyeka, vipimo vyake hubainishwa kwa vitengo vya kipimo.

Mfano

Wacha kwa kutumia sifa grid-template tufanye meza:

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: 600px;
  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: 600px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Mfano

Sasa kwenye meza kutoka kwa mfano uliopita tufanye safu ya juu iwe na upana wa sehemu mbili, na safu wima ya kwanza - iwe 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: 600px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Kazi Za Vitendo