Numărul și lățimea coloanelor în grid-urile CSS

Vom începe familiarizarea cu lucrul în grid stabilind numărul și lățimea coloanelor, de-a lungul cărora vor fi poziționate elementele copil. În acest scop vom folosi proprietatea grid-template-columns, care este specificată în elementul părinte și definește numărul și lățimea coloanelor pe care le vor ocupa elementele descendente în grid. În valoarea proprietății specificăm lățimea coloanelor în pixeli.

Exemplu

Mai întâi, să creăm elementul părinte și să îl facem un container grid. Să presupunem că avem un div, în care sunt situate patru elemente copil. Să setăm pentru acesta în proprietatea display valoarea grid, iar în proprietatea grid-template-columns să scriem lățimea pentru două coloane:

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

Результат:

Exemplu

Acum, să creăm un grid cu patru coloane de dimensiuni diferite:

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

Результат:

Sarcini practice