Kolonnu skaits un platums CSS režģos

Iepazīšanos ar darbu režģī mēs sāksim ar to, ka piešķirsim kolonnu skaitu un platumu, pa kuru tiks izvietoti pakārtotie elementi. Šim nolūkam mēs izmantosim īpašību grid-template-columns, kas tiek norādīta vecākelementā un nosaka kolonnu skaitu un platumu, ko ieņems pakārtotie elementi režģī. Īpašības vērtībā mēs norādām kolonnu platumu pikseļos.

Piemērs

Vispirms izveidosim vecākelementu un padarīsim to par režģa konteineri. Pieņemsim, ka mums ir div, kurā atrodas četri pakārtotie elementi. Noteiksim tam īpašībā display vērtību grid, un īpašībā grid-template-columns ierakstīsim platumu divām kolonnām:

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

Результат:

Piemērs

Tagad izveidosim tabulu ar četrām dažāda izmēra kolonnām:

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

Результат:

Praktiskie uzdevumi