2

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, а не чтоб на весь экран.

5
  • 2
    Прикладывайте код вопросом, а не ссылкой
    – kertAW
    29 июл 2020 в 15:58
  • 1
    Я поддерживаю ваш вопрос, но говорю, что не надо давать код ссылкой. За это могут удалить вопрос. Можно просто написать ``` и дальше ваш код будет выглядеть как код
    – tohatsu
    29 июл 2020 в 16:14
  • Дополняю комментарий выше, в редакторе вопроса есть кнопка фаргмент кода
    – kertAW
    29 июл 2020 в 16:16
  • Спасибо,буду это учитывать
    – xqzmy
    29 июл 2020 в 16:19
  • Минус за бесполезный заголовок. 29 июл 2020 в 16:55

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.