CSS grid - Auto fill between 2 horizontal divs

user_6769786 0
Viewed 141

I need to create +150 value/pair forms.

Question: How can I secure that when the left div is filled to its height, that the rest of the data continous from the right div ?

.wrapper {
    display: grid;
    grid-template:
    "form" 800px
    / 1fr;
}

.form {
    display: grid;
    grid-template:
    "table_area_1 table_area_2" 200px
    / 1fr 1fr;
}

.table_area_1 {
  display: grid;
  grid-auto-rows: 30px;
  grid-template-columns: 1fr 100px;
  grid-auto-flow: column;
}

.table_area_1 {
  margin: 0 10px 0 10px;
  background-color: pink;
}

.table_area_2 {
  grid-area: table_area_2;
  background-color: lightblue;
}

.titles {
  background-color: lightgrey;
  padding: 5px 0 0 5px;
  width: 125%;
}

.table_area_1 label {
  grid-column: 1;
}

.table_area_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 rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>

  <div class="wrapper">

    <div class="form">

      <div class="table_area_1">

        <label for="1">Label-1</label>
        <label for="2">Label-2</label>
        <label for="3">Label-3</label>
        <label for="4">Label-4</label>
        <label for="5">Label-5</label>
        <label for="6">Label-6</label>
        <label for="7">Label-7</label>
        <label for="8">Label-8</label>
        <label for="9">Label-9</label>
        <label for="10">Label-10</label>

        <input id="1" type="text">
        <input id="2" type="text">
        <input id="3" type="text">
        <input id="4" type="text">
        <input id="5" type="text">
        <input id="6" type="text">
        <input id="7" type="text">
        <input id="8" type="text">
        <input id="9" type="text">
        <input id="10" type="text">

      </div>

      <div class="table_area_2"></div>

    </div>

  </div>

</body>
</html>

css-grid css-tables css html
1 Answers

Here is example of CSS Multi Columns. I sagest you not to use display: grid; for every block, like in your example. Anyway, look at the solution.

.form {
  column-count: 2;
  column-fill: auto;  
  /* just for instance */ 
  height: 100px; 
  background: pink;
}

.form label {
  display: block;
}
<!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>
  <div class="form">
    <label for="1">
      <span>Label-1</span>
      <input id="1" type="text">
    </label>
    <label for="2">
      <span>Label-2</span>
      <input id="2" type="text">
    </label>
    <label for="3">
      <span>Label-3</span>
      <input id="3" type="text">
    </label>
    <label for="4">
      <span>Label-4</span>
      <input id="4" type="text">
    </label>
    <label for="5">
      <span>Label-5</span>
      <input id="5" type="text">
    </label>
    <label for="6">
      <span>Label-6</span>
      <input id="6" type="text">
    </label>
  </div>
</body>

</html>

I remember your previous question, and although remember of two separate loops in PHP for labels and fields. Don't now much about you back-end, but can suggest you a loop-in-a-loop solution example.

<?php $i = 1;
foreach ($labels as $label) { ?>
  <label for="<?php echo $i; ?>">
    <span>Label-<?php echo $i; ?></span>
    <?php $j = 1;
    foreach ($inputs as $input) { ?>
      <?php if ($j == $i) { ?>
      <input id="<?php echo $j; ?>" type="text">
      <?php } ?>
    <?php $j++; } ?>
  </label>
<?php $i++; } ?>

Here we have $i as an index for the loop of labels and $j as an index for a loop of inputs. If $j == $i in the inner loop - we shows the input inside a loop of labels. Hope this code is pretty readable. If not - show your PHP code of both loops and I will adapt it for your purpose.

user_31871270
Related