Bir web sayfasında bir öğenin %100 kullanılabilir genişliğini nasıl yaparsınız?

/* display: block; kullanımı, öğenin varsayılan olarak kullanılabilir tüm genişliği kaplamasını sağlar */
element {
  display: block;
}

/* Açıkça width: 100%; belirtilebilir */
element {
  width: 100%;
}

/* Bazen, padding ve border'ın boyutu artırmaması için box-sizing dikkate almak faydalıdır */
element {
  width: 100%;
  box-sizing: border-box; /* border ve padding toplam genişliğe dahil edilir */
}

/* Flex veya grid öğeleri için flex-grow veya grid-column kullanılabilir */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* Öğe, flex konteynerdeki kullanılabilir tüm genişliği kaplar */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Örnek: iki sütun, her biri 1fr (boş alanın bir parçası) alır */
}

.grid-item {
  grid-column: span 2; /* Öğe iki sütun kaplar */
}