Определение fr для сетки только для первого и второго дочерних элементов ul

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

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>

Answer 2

Вы можете просто сделать это:

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

здесь нет хитрости, она отлично работает