CSS Grid - Group Labels And Input Separately In HTML
Due to need of creating 350+ pair of label/input, I would like to have the label and input grouped separately in HTML. The solution I have with CSS grid 'container-1' works fine wh
Solution 1:
Here you go. Changed grid-auto-flow of the second container to change the direction. No changes in HTML.
Althought here you have to determine grid-column of label and input.
.container_1 {
display: grid;
grid-template-columns: 1fr 3fr;
}
.container_2 {
display: grid;
grid-template-columns: 1fr 3fr;
grid-auto-rows: auto;
grid-auto-flow: column;
}
.container_2 label {
grid-column: 1;
}
.container_2 input {
grid-column: 2;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="main.css">
<title>Document</title>
</head>
<body>
<h2>container-1</h2>
<div class='container_1'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
<br><br>
<h2>container-2</h2>
<div class='container_2'>
<label for="dummy1">title for dummy1:</label>
<label for="dummy2">longer title for dummy2:</label>
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<input id="dummy2" name="dummy2" value="dummy2">
<input id="dummy3" name="dummy3" value="dummy3">
</div>
</body>
</html>Solution 2:
.container_1 {/* Your HTML for bottom and top just needs to be the same*/
display: grid;
grid-template-columns: 1fr 3fr;
}
.container_2 {
display: grid;
grid-template-columns: 1fr 3fr;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<h2>container-1</h2>
<div class='container_1'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
<br><br>
<h2>container-2</h2>
<div class='container_2'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
</body>
</html>
Post a Comment for "CSS Grid - Group Labels And Input Separately In HTML"