Numri dhe Gjerësia e Kolonave në CSS Grid

Njohjen me punën në grid do ta fillojmë duke caktuar numrin dhe gjerësinë e kolonave, përgjatë të cilave do të vendosen elementet fëmijë. Për këtë qëllim do të përdorim vetinë grid-template-columns, e cila specifikohet në elementin prind dhe përcakton numrin dhe gjerësinë e kolonave, të cilat do të zënë elementet fëmijë në grid. Në vlerën e vetisë specifikojmë gjerësinë e kolonave në piksel.

Shembull

Le të krijojmë fillimisht elementin prind dhe ta bëjmë atë kontejner grid. Le të supozojmë se kemi një div, brenda të cilit ndodhet katër elementë fëmijë. Le t'i caktojmë atij në vetinë display vlerën grid, dhe në vetinë grid-template-columns të shkruajmë gjerësinë për dy kolona:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 200px 400px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Shembull

Tani le të krijojmë një tabelë me katër kolona të ndryshme në madhësi:

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>

css#parent {
  display: grid;
  grid-template-columns: 50px 100px 200px 250px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Detyra Praktike