Поместите рамку вокруг содержимого в элементе CSS Grid при использовании place-content: center - PullRequest
Новая
       10

Поместите рамку вокруг содержимого в элементе CSS Grid при использовании place-content: center

0 голосов
/ 27 февраля 2020 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

html {
  height: 100%;
  width: 100%;
}

body {
  width: 100%;
  height: 100%;
  color: hsl(211, 47%, 20%);
  background: hsl(211, 47%, 30%);
  display: grid;
  grid-template-rows: [main-start] minmax(0, 1fr) [main-end nav-start] auto [nav-end];
}

main {
  background: hsl(211, 47%, 30%);
  border: .5em solid white;
  border-radius: .5em;
  grid-row: main;
  display: grid;
  grid-auto-columns: minmax(auto, 200px);
  grid-auto-rows: minmax(auto, 200px);
  place-content: center;
 }

.gr1 { grid-row: 1 }
.gr2 { grid-row: 2 }
.gr3 { grid-row: 3 }
.gc1 { grid-column: 1 }
.gc2 { grid-column: 2 }
.gc3 { grid-column: 3 }
.gc4 { grid-column: 4 }

nav {
  background: hsl(211, 47%, 30%);
  grid-row: nav;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

button {
  color: white;
  background: hsl(211, 47%, 20%);
  margin: 1px;
  border-radius: 2px;
  padding: 1em;
  border: 0;
}
<body>
    <main>
        <button id="" class="gr1 gc1">Buttton 1</button>
        <button id="" class="gr1 gc2">Buttton 2</button>
        <button id="" class="gr1 gc3">Buttton 3</button>
        <button id="" class="gr1 gc4">Buttton 4</button>
        <button id="" class="gr2 gc1">Buttton 5</button>
        <button id="" class="gr2 gc2">Buttton 6</button>
        <button id="" class="gr2 gc3">Buttton 7</button>
        <button id="" class="gr2 gc4">Buttton 8</button>
        <button id="" class="gr3 gc1">Buttton 9</button>
        <button id="" class="gr3 gc2">Buttton 10</button>
        <button id="" class="gr3 gc3">Buttton 11</button>
        <button id="" class="gr3 gc4">Buttton 12</button>
    </main>
    <nav>
        <button id="deleteDB">Delete Database</button>
        <button id="initDB">Initialize Database</button>
        <button id="">Menu 3</button>
    </nav>
</body>

Мой вопрос:

Как переместить границу от «основной» области к содержимому основной области? Я хочу также сделать зазор сетки белым.

Прямо сейчас кнопки реагируют правильно, когда я изменяю размер (отзывчивый).

Причина, по которой я использую grid-auto-rows и grid-auto-columns это потому, что количество кнопок является Dynami c (поступает из базы данных). Я не показал ни одного JavaScript.

Возможно, я мог бы использовать JavaScript, чтобы сделать макет, но я думаю, что CSS лучше.

Спасибо за любой ввод.

1 Ответ

0 голосов
/ 28 февраля 2020

Если я правильно понял ваш вопрос, вы хотите сделать рамку вокруг содержимого кнопки, а не сетки? Одним из способов было бы обернуть кнопку внутри элемента div, а затем добавить границу к кнопке, как сказал Темани. Другой способ, если вы немного ленивый, это заставить кнопку иметь фиксированную ширину, а затем установить позицию поля на авто, чтобы отцентрировать ее.

Затем вы просто добавляете это: 

    button {
    width: 80px;
      height: 40px;
      margin: auto;
border-radius: 5px;
}
...