I created a simple CSS grid container with three columns when I add data to column one it creates space between columns one and two for some reason, I want my columns always to be width 100% of the available space for it.

Note: I do not want to set the static size of each column like: grid-template-columns: 200,200,200 I want them always 100%

How can I solve this?

Code:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.column {
  background-color: #cccccc;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container" *ngIf="selectedMenuItem === menu[3]">
  <div class="column col-3 offset-md-2">
    <div class="row">
      <div>
        <label>Test Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test Test Test, Test/Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test; Test/Test</label>
      </div>
    </div>

  </div>
  <div class="column">
    <p>Column 2 </p>
  </div>
  <div class="column">
    <p>Column 3 </p>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

UPDATE

As comments below I try:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.column {
  background-color: #cccccc;
}

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

    <div class="container" *ngIf="selectedMenuItem === menu[3]">
      <div class="column col-3 offset-md-2">
        <div class="row">
            <label>This is a test of column 100%</label>
        </div>
        <div class="row">
          <div>
            <label>Test Test Test Test Test, Test/Test</label>
          </div>
        </div>
        <div class="row">
          <div>
            <label>Test Test Test; Test/Test</label>
          </div>
        </div>

      </div>
      <div class="column">
        <p>Column 2 </p>
      </div>
      <div class="column">
        <p>Column 3 </p>
      </div>
    </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

But the text is not at 100%, how can I solve this?

CodePudding user response：

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.column {
  background-color: #cccccc;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container" *ngIf="selectedMenuItem === menu[3]">
  <div class="column col offset-md-2">
    <div class="row">
      <div>
        <label>Test Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test Test Test, Test/Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test; Test/Test</label>
      </div>
    </div>

  </div>
  <div class="column">
    <p>Column 2 </p>
  </div>
  <div class="column">
    <p>Column 3 </p>
  </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I still don't understand the result you want. But maybe like this? You just define col-3 and I dont know why

CodePudding user response：

You can use fractional units which will make them fill up all the available space. You can play around with sizing of each column such as 1fr 2fr 1fr to make the centre column twice the size of the outside columns.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

UPDATE:

<div class="column col-3 offset-md-2">
    <div class="row">
        <label>Test Test</label>
        <label>Test Test Test Test Test, Test/Test</label>
        <label>Test Test Test; Test/Test</label>
    </div>
  </div>