Īpašība grid

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

Ar grid vienā rindā var aprakstīt tikai viena veida īpašības - 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.

Sintakse

csselements {
  grid: režģa īpašības;
}

Piemērs

Izveidosim tabulu ar grid īpašības 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: 400px;
  height: 200px;
}

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

Результат:

Piemērs

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

Результат:

Skatiet arī