Question

我正在使用ul li为网站创建导航。当前有7个链接。我将ul的显示设置为与repeat(7,1fr)网格化。但是，我希望第一和第二个li为.5fr和1.5fr。我该怎么办？

nav ul {
  display:grid;
  grid-template-columns: repeat(7,1fr);
}

我想要的样子。

nav ul{
  display:grid;
  grid-template-columns: .5fr 1.5fr 1fr 1fr 1fr 1fr 1fr;
}

Answer 1

您可以这样做：

nav ul{
  display:grid;
  grid-template-columns: .5fr 1.5fr repeat(5, 1fr);
}

这里没有技巧，可以正常工作

Answer 2

grid-template-columns: .5fr 1.5fr 1fr 1fr 1fr 1fr 1fr也是正确的。您可以将其缩短到grid-template-columns: .5fr 1.5fr repeat(5, 1fr)或grid-template-columns: 1fr 3fr repeat(5, 2fr)-请参见下面的演示：

ul {
  display: grid;
  grid-template-columns: 1fr 3fr repeat(5, 2fr);
  list-style: none;
  padding: 0;
}

ul li {
  border: 1px solid;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

仅为ul的第一个和第二个孩子为网格定义fr

2 个答案: