I have a simple grid column template with three columns and I want to add a border on columns two and three so I have something like:

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

<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="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

My desire result is to add a border like this:

How can I create this border over column 2 and 3? Regards

CodePudding user response：

you can add border rounded-lg classes to second, third columns

to add space between columns you can add gap: 10px to the container

see the example

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

<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 border rounded-lg">
    <p>Column 2 </p>
  </div>
  <div class="column border rounded-lg">
    <p>Column 3 </p>
  </div>
</div>

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

CodePudding user response：

This is a more pure CSS answer.

I´d simply draw a border around each column and then exclude the first one, like so:

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

/* draw a border around every column, except the first one */
.column:not(:first-child) {
    border: solid 2px #ddd;
    border-radius: 10px;
}

<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>

There are more pseudo classes for this, see https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child for example.