Sifa grid

Sifa grid inawakilisha muundo mfupi wa kuandika sifa zote za safu na safu mlalo za chombo cha gridi. Yote maadili huandikwa kwenye mstari mmoja kupitia kufyeka.

Kupitia grid kwenye mstari mmoja unaweza kuelezewa aina moja tu ya sifa - za wazi (grid-template-rows, grid-template-columns, grid-template-areas) au zisizo wazi (grid-auto-rows, grid-auto-columns, grid-auto-flow). Sifa ambazo zimebaki bila kutajwa, zinachukua thamani chaguomsingi.

Kisintaksia

csskipengele {
  grid: sifa za gridi;
}

Mfano

Wacha tutengeneze jedwali kwa kutumia sifa grid:

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: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}

#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Mfano

Na sasa wacha tuweke safu mlalo 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: 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

Na sasa kwenye jedwali kutoka kwa mfano uliopita tufanye safu mlalo 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: 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