Вопрос про grid'ы

Question

body {
    box-sizing:border-box;
    color:white;
}
*,*:before,*:after {
    margin:0;
    padding:0;
}
.grid {
    display:grid;
    grid-template-columns:repeat(5, [col] 200px);
    grid-template-rows:repeat(8, [row] 1fr);
    border:1px dashed #000;
    grid-gap:5px;
    justify-content:center;
}
.grid-item {
    min-height:150px;
    background-color:black;
}
.grid-item1 {
    grid-column
}

<body>
<div class="grid">
    <div class="grid-item grid-item1">item1</div>
    <div class="grid-item grid-item2">item2</div>
    <div class="grid-item grid-item3">item3</div>
    <div class="grid-item grid-item4">item4</div>
    <div class="grid-item grid-item5">item5</div>
    <div class="grid-item grid-item6">item6</div>
    <div class="grid-item grid-item7">item7</div>
    <div class="grid-item grid-item8">item8</div>
    <div class="grid-item grid-item9">item9</div>
    <div class="grid-item grid-item10">item10</div>
    <div class="grid-item grid-item11">item11</div>
</div>
</body>

Как сделать так, чтобы только вокруг содержимого грид-контейнера был border, а не чтоб на весь экран.

Answer 1

По-умолчанию грид-контейнер занимает всю ширину. Можно использовать inline-grid.

body {
  box-sizing: border-box;
  color: white;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
}

.grid {
  display: inline-grid;
  grid-template-columns: repeat(5, [col] 200px);
  grid-template-rows: repeat(8, [row] 1fr);
  border: 1px dashed #000;
  grid-gap: 5px;
  justify-content: center;
}

.grid-item {
  min-height: 150px;
  background-color: black;
}

.grid-item1 {
  grid-column
}

<body>
  <div class="grid">
    <div class="grid-item grid-item1">item1</div>
    <div class="grid-item grid-item2">item2</div>
    <div class="grid-item grid-item3">item3</div>
    <div class="grid-item grid-item4">item4</div>
    <div class="grid-item grid-item5">item5</div>
    <div class="grid-item grid-item6">item6</div>
    <div class="grid-item grid-item7">item7</div>
    <div class="grid-item grid-item8">item8</div>
    <div class="grid-item grid-item9">item9</div>
    <div class="grid-item grid-item10">item10</div>
    <div class="grid-item grid-item11">item11</div>
  </div>
</body>

БЛОГ НА HUSL

Вопрос про grid'ы

Ответы (1 шт):