სვეტების რაოდენობა და სიგანე CSS გრიდებში

გრიდებთან მუშაობის გაცნობას დავიწყებთ იმით, რომ დავაყენებთ სვეტების რაოდენობას და სიგანეს, რომელშიც განთავსდება შვილი ელემენტები. ამ მიზნით ჩვენ გამოვიყენებთ თვისებას grid-template-columns, რომელიც მითითებულია მშობელ ელემენტში და განსაზღვრავს სვეტების რაოდენობას და სიგანეს, რომელსაც დაკავებენ შვილი ელემენტები გრიდში. თვისების მნიშვნელობაში ჩვენ მივუთითებთ სვეტების სიგანეს პიქსელებში.

მაგალითი

ჯერ შევქმნათ მშობელი ელემენტი და გავხადოთ ის გრიდ-კონტეინერი. დავუშვათ, გვაქვს div, რომელშიც განთავსებულია ოთხი შვილი ელემენტი. მივანიჭოთ მას თვისებაში display მნიშვნელობა grid, ხოლო თვისებაში grid-template-columns ჩავწეროთ სიგანე ორი სვეტისთვის:

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

Результат:

მაგალითი

ახლა კი შევქმნათ ცხრილი ოთხი სხვადასხვა ზომის სვეტით:

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

Результат:

პრაქტიკული ამოცანები