Не могу сделать элементы меньше с помощью сетки CSS - PullRequest
Новая
       8

Не могу сделать элементы меньше с помощью сетки CSS

0 голосов
/ 29 июня 2018

Я видел это меню CSS-сетки и пытался изменить его так, чтобы элементы стали меньше без пробелов, но у меня ничего не получилось, кто-нибудь знает, как это сделать? 

nav {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 10px;
}
  
  a {
    background-color: red;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    text-align: center;
    box-sizing: border-box;
  }
<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Work</a>
  <a href="">Blog</a>
  <a href="">Contact</a>
</nav>

Ответы [ 3 ]

0 голосов
/ 29 июня 2018

Установить grid-gap: на 0px;

nav {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 0px;
}

a {
  background-color: red;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  text-align: center;
  box-sizing: border-box;
}
<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Work</a>
  <a href="">Blog</a>
  <a href="">Contact</a>
</nav>

Надеюсь, это то, что вы ищете.

0 голосов
/ 29 июня 2018

Лучше использовать Inline-block 

nav {
  display: inline-block;
}
  
  a {
    background-color: red;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
  }
<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Work</a>
  <a href="">Blog</a>
  <a href="">Contact</a>
</nav>
0 голосов
/ 29 июня 2018

Что вы подразумеваете под "меньшим" на x или y? Вы можете попробовать это возможно: 

nav {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 0px;
}
  
  a {
    background-color: red;
    color: #fff;
    text-decoration: none;
    padding: 2px;
    text-align: center;
    box-sizing: border-box;
  }
<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Work</a>
  <a href="">Blog</a>
  <a href="">Contact</a>
</nav>
...