Beispiel:CSS-grid-formular-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<style>
form {
max-width: 25em;
display: grid;
grid-template-columns: [labels] auto [controls] auto [oversized] auto;
grid-auto-flow: row dense;
grid-gap: 10px;
}
form > label {
grid-column: labels;
grid-row: auto;
}
form > input, form > select {
grid-column: controls;
grid-row: auto;
}
#department-block {
grid-row: span 3;
grid-column: oversized;
}
#buttons {
grid-row: auto;
grid-column: 1 / -1;
text-align: end;
}
</style>
<title>Formular im Rasterlayout</title>
</head>
<body>
<h1>Formular, das sich durch den auto-placement-Algorithmus selbständig am Raster ausrichtet </h1>
<form>
<label for="firstname">Vorname:</label>
<input type="text" id="firstname" name="firstname" />
<label for="lastname">Name:</label>
<input type="text" id="lastname" name="lastname" />
<label for="address">Straße und Hausnummer:</label>
<input type="text" id="address" name="address" />
<label for="city">Stadt:</label>
<input type="text" id="city" name="city" />
<label for="state">Land:</label>
<select type="text" id="state" name="state">
<option value="DE">Deutschland</option>
<option value="AT">Österreich</option>
<option value="CH">Schweiz</option> </select>
<label for="zip">PLZ:</label>
<input type="text" id="zip" name="zip" />
<div id="department-block">
<label for="department">Abteilung:</label>
<select id="department" name="department" size="3" multiple>
<option value="finance">Buchhaltung</option>
<option value="humanresources">Personalabteilung</option>
<option value="marketing">Marketing</option>
</select>
</div>
<div id="buttons">
<button id="cancel">Abbrechen</button>
<button id="back">zurück</button>
<button id="next">weiter</button>
</div>
</form>
</body>
</html>
