Skip to content Skip to sidebar Skip to footer
Home / Css / Css Grid / Css Tables / Html

Css Grid - Group Labels And Input Separately In Html

Post a Comment
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_2label {
  grid-column: 1;
}

.container_2input {
  grid-column: 2;
}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><linkhref="main.css"><title>Document</title></head><body><h2>container-1</h2><divclass='container_1'><labelfor="dummy1">title for dummy1:</label><inputid="dummy1"name="dummy1"value="dummy1"><labelfor="dummy2">longer title for dummy2:</label><inputid="dummy2"name="dummy2"value="dummy2"><labelfor="dummy3">even longer title for dummy3:</label><inputid="dummy3"name="dummy3"value="dummy3"></div><br><br><h2>container-2</h2><divclass='container_2'><labelfor="dummy1">title for dummy1:</label><labelfor="dummy2">longer title for dummy2:</label><labelfor="dummy3">even longer title for dummy3:</label><inputid="dummy1"name="dummy1"value="dummy1"><inputid="dummy2"name="dummy2"value="dummy2"><inputid="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><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><linkrel="stylesheet"href="main.css"><title>Document</title></head><body><h2>container-1</h2><divclass='container_1'><labelfor="dummy1">title for dummy1:</label><inputid="dummy1"name="dummy1"value="dummy1"><labelfor="dummy2">longer title for dummy2:</label><inputid="dummy2"name="dummy2"value="dummy2"><labelfor="dummy3">even longer title for dummy3:</label><inputid="dummy3"name="dummy3"value="dummy3"></div><br><br><h2>container-2</h2><divclass='container_2'><labelfor="dummy1">title for dummy1:</label><inputid="dummy1"name="dummy1"value="dummy1"><labelfor="dummy2">longer title for dummy2:</label><inputid="dummy2"name="dummy2"value="dummy2"><labelfor="dummy3">even longer title for dummy3:</label><inputid="dummy3"name="dummy3"value="dummy3"></div></body></html>

Post a Comment for "Css Grid - Group Labels And Input Separately In Html"