Stulpelių kiekis ir plotis CSS griduose

Pažintį su darbu griduose pradėsime nuo to, kad priskirsime stulpelių kiekį ir plotį, pagal kurį bus išdėstomi antriniai elementai. Šiam tikslui naudosime savybę grid-template-columns, kuri nurodoma pagrindiniame elemente ir nustato stulpelių kiekį ir plotį, kurį užims antriniai elementai gride. Savybės reikšmėje nurodome stulpelių plotį pikseliais.

Pavyzdys

Pirmiausia sukurkime pagrindinį elementą ir padarykime jį grid konteineriu. Tarkime, kad turime div, kuriame yra keturi antriniai elementai. Nustatykime jam savybėje display reikšmę grid, o savybėje grid-template-columns parašykime plotį dviem stulpeliams:

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

Результат:

Pavyzdys

Dabar sukurkime lentelę su keturiais skirtingo dydžio stulpeliais:

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

Результат:

Praktinės užduotys