Πώς να κάνετε ένα στοιχείο σε μια ιστοσελίδα να καταλαμβάνει το 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-container */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Παράδειγμα: δύο στήλες, κάθε μία καταλαμβάνει 1fr (μέρος του ελεύθερου χώρου) */
}

.grid-item {
  grid-column: span 2; /* Το στοιχείο θα καταλάβει δύο στήλες */
}