Как сделать элемент на веб-странице, чтобы он занимал 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; /* Элемент займет две колонки */
}