CODEWITHSUNDEEP
htmlcssbootstrap-4
Jesus
Jesus

Reputation: 475

Create border over column

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>

My desire result is to add a border like this:

enter image description here

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

Upvotes: 1

Views: 187

Answers (3)

Maik Lowrey
Maik Lowrey

Reputation: 17566

Inspired by @Kareem Dabbeet's answer, here are some additions.

        .container {
          display: grid;
          grid-template-columns: auto auto auto;
          gap: 5px;
        }
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

        <div class="container m-2" *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 p-2">
            <p class="font-weight-bold border-bottom text-center">Column 1a </p>
            <p>Column 1b </p>
            <p>Column 1c </p>
            <p>Column 1d </p>
          </div>
          <div class="column border rounded p-2">
            <p class="font-weight-bold border-bottom text-center">Column 2a </p>
            <p>Column 2b </p>
            <p>Column 3c </p>
            <p>Column 4d </p>        
          </div>
        </div>

Upvotes: 0

matsn0w
matsn0w

Reputation: 27

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>

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

Upvotes: 0

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

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>

Upvotes: 1

Related Questions