css Question posted in
Some basic documentation can be found here.

Css – how fit content to grid column width

I was wondering how does the Css grid layouts.
I am trying to figure out a grid layout which make all input in a row and fit the grid column.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 4px;
}
<div class="grid">
  <div class="one">
    <label for="aaa">aaa</label>
    <input type="text" name="cheese" />
  </div>

  <div class="two">

    <label for="bbb">bbb</label>
    <input type="text" name="cheese" />
    <span>~</span>
    <input type="text" name="cheese" />
  </div>
  <div class="three">
    <label for="ccc">ccc</label>
    <input type="text" name="cheese" />
  </div>
</div>

Below is what I need. Thanks.

enter image description here

Tags:

2

Answers


  1. 0

    I used a combination of CSS Grid and Flexbox to achieve the desired layout. I believe this approach aligns with what you’re looking for, but if it doesn’t fully meet your needs, you may need to make a few minor adjustments.

    .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0;
}

.grid div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.grid label {
    margin-bottom: 8px;
}

.grid input {
    width: 100%;
}

.two {
    display: flex;
    flex-direction: column;
}

.two input {
    width: calc(50% - 10px);
}

.two span {
    margin: 0 4px;
    align-self: center;
}

.two div {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <title>Grid</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="grid">
        <div class="one">
            <label for="aaa">aaa</label>
            <input type="text" name="cheese" />
        </div>

        <div class="two">
            <label for="bbb">bbb</label>
            <div>
                <input type="text" name="cheese" />
                <span>~</span>
                <input type="text" name="cheese" />
            </div>
        </div>

        <div class="three">
            <label for="ccc">ccc</label>
            <input type="text" name="cheese" />
        </div>
    </div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    You can do this with a grid, ensuring the children of the divs take part in the grid by using display: contents on their parents.

    <style>
  .grid {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 3fr;
    width: 400px;
    /* for demo */
  }
  
  .grid>* {
    display: contents;
  }
  
  .grid>*>*:not(label) {
    grid-row: 2;
    width: 100%;
  }
  
  .three>label {
    grid-column: 5;
  }
  
  .two>span {
    text-align: center;
  }
</style>
<div class="grid">
  <div class="one">
    <label for="aaa">aaa</label>
    <input type="text" name="cheese" />
  </div>

  <div class="two">

    <label for="bbb">bbb</label>
    <input type="text" name="cheese" />
    <span>~</span>
    <input type="text" name="cheese" />
  </div>
  <div class="three">
    <label for="ccc">ccc</label>
    <input type="text" name="cheese" />
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search