Shkurtesa e Vetive të CSS Grid

Vetia grid përfaqëson formën e shkurtuar të shënimit të të gjitha vetive të kolonave dhe rreshtave të kontejnerit grid. Të gjitha vlerat shënohen në një rresht të vetëm përmes një vije të pjerrët.

Nëpërmjet grid në një rresht mund të përshkruhet vetëm një lloj i vetive - eksplicite (grid-template-rows, grid-template-columns, grid-template-areas) ose implicite (grid-auto-rows, grid-auto-columns, grid-auto-flow). Ato veti të cilat kanë mbetur të pashënuara, marrin vlerat e paracaktuara.

Shembull

Le të krijojmë një tabelë duke përdorur vetinë 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: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Shembull

Tani le t'u caktojmë rreshtit të dytë dhe të tretë gjerësi të njëjtë, dhe çdo kolone - gjerësi të ndryshme:

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;
}

Результат:

Shembull

Tani në tabelën nga shembulli i mëparshëm le ta bëjmë rreshtin e sipërm me gjerësi dy fraksione, dhe kolonën e parë - në gjysmë fraksioni:

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;
}

Результат:

Detyra praktike