Граница вокруг CSS div элемента сетки

Question

Я пытаюсь создать рамку вокруг всего div элемента сетки CSS, а не вокруг самого текста.

CSS:

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  
  align-items: center;
  justify-items: center;
}

.bordered-grid-item {
  border: 1px black dashed;
}

HTML:

<div class="grid-parent">
  <div class="bordered-grid-item ">
    Column 1
  </div>
  <div>
    Column 1
  </div>
</div>

FIDDLE:

https://jsfiddle.net/tpr4ydjx/7/

Answer 1

Это либо вы добавляете отступы для .bordered-grid-item, как показано ниже

.bordered-grid-item {
  border: 1px black dashed;
  padding: 10px;
}

, либо для всего .grid-parent

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  border: 1px black dashed;
  padding: 10px;
  align-items: center;
  justify-items: center;
}

, это зависит от того, что вы хотите.

Answer 2

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  
  align-items: center;
}

.grid-item {
  text-align: center;
}

.grid-item.bordered {
  border: 1px black dashed;
}

<div class="grid-parent">
  <div class="grid-item bordered">
    Column 1
  </div>
  <div class="grid-item">
    Column 1
  </div>
</div>

Answer 3

Сделать элемент занимающим все пространство с шириной: 100%

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  
  align-items: center;
  justify-items: center;
}

.bordered-grid-item {
  border: 1px black dashed;
  width: 100%;
  text-align: center;
}

<div class="grid-parent">
  <div class="bordered-grid-item ">
    Column 1
  </div>
  <div>
    Column 1
  </div>
</div>