CSS reža īpašību saīsinātā pierakstīšana

Īpašība grid ir visu reža konteinera kolonnu un rindu īpašību saīsināta forma. Visas vērtības tiek pierakstītas vienā rindā, atdalītas ar slīpsvītru.

Izmantojot grid, vienā rindā var aprakstīt tikai vienu īpašību veidu - eksplicītās (grid-template-rows, grid-template-columns, grid-template-areas) vai implicītās (grid-auto-rows, grid-auto-columns, grid-auto-flow). Tās īpašības, kuras netika norādītas, iegūst noklusējuma vērtības.

Piemērs

Izveidosim tabulu ar īpašības grid palīdzību:

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

Результат:

Piemērs

Tagad iestatīsim otrajai un trešajai rindai vienādu platumu, un katrai kolonnai - atšķirīgu platumu:

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

Результат:

Piemērs

Tagad tabulā no iepriekšējā piemēra izveidosim augšējo rindu ar platumu divās frakcijās, un pirmo kolonnu - pusei frakcijas:

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

Результат:

Praktiskie uzdevumi