როგორ გავხადოთ ვებგვერდზე ელემენტი, რომლითაც ის 100% ხელმისაწვდომი სიგრძის იქნება?

/* display: block; გამოყენება საშუალებას აძლევს ელემენტს ჩვეულებრივ დაიკავოს ყველა ხელმისაწვდომი სიგანე */
element {
  display: block;
}

/* შეიძლება მკაფიოდ მითითდეს width: 100%; */
element {
  width: 100%;
}

/* ზოგჯერ სასარგებლოა box-sizing-ის გათვალისწინება, რათა padding და border არ გაზარდოს ზომა */
element {
  width: 100%;
  box-sizing: border-box; /* border და padding შედის საერთო სიგანეში */
}

/* Flex ან grid ელემენტებისთვის შეიძლება გამოყენებულ იქნას flex-grow ან grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* ელემენტი დაიკავებს ყველა ხელმისაწვდომ სიგანეს flex კონტეინერში */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* მაგალითი: ორი სვეტი, თითოეული 1fr (თავისუფალი სივრცის ნაწილი) */
}

.grid-item {
  grid-column: span 2; /* ელემენტი დაიკავებს ორი სვეტს */
}