Aantal en breedte van kolomme in CSS-roosters

Ons sal met roosterwerk begin deur die aantal en breedte van die kolomme aan te wys waarin die kindelemente geplaas sal word. Vir hierdie doel gebruik ons die eienskap grid-template-columns, wat gespesifiseer word in die ouerelement en bepaal die aantal en breedte van die kolomme wat die afstammelingelemente in die rooster sal inneem. In die waarde van die eienskap spesifiseer ons die kolombreedtes in pixels.

Voorbeeld

Laat ons eers 'n ouerelement skep en dit 'n roosterhouer maak. Kom ons sê ons het 'n div met vier kindelemente daarin. Laat ons daarvoor in die eienskap display die waarde grid stel, en in die eienskap grid-template-columns die breedte vir twee kolomme skryf:

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

Результат:

Voorbeeld

Kom ons skep nou 'n tabel met vier kolomme van verskillende groottes:

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

Результат:

Praktiese take