Изменить раскладку столбцов только для первой строки для цикла

Question

У меня есть веб-страница, состоящая из содержимого видео/изображения, и я их показываю по четыре на каждой строке.

Я хотел бы сделать первый ряд отличным разделом с другой конфигурацией столбцов, как показано ниже.

Так эта специальная строка будет иметь 3 колонки с первым в большем размере.

Ниже приведено то, что у меня есть, и <li> представляет строку и <figure> представляет собой столбец.

<ul> 
    <li> 
    <% Object.keys(data).forEach(function(key) { %> 

     <% if (key%4 == 0 && key != 0) { %> 
      </li><li> 
     <% } %> 
     <figure> 

      ... 

     </figure> 
    <% }) %> 
</ul> 

Я просто не могу придумать, добавив это условие в цикл.

Answer 1

Если у вас есть ваши настройки CSS правильно, так что <figure> элемент с классом featured получает правильный двойной ширины

<ul> 
    <li> 
    <% Object.keys(data).forEach(function(key) { %> 
     <% if ((key + 1)%4 == 0) { %> 
      </li><li> 
     <% } %> 
     <figure <% if (key == 0) { %> class="featured" <% } %> > 

      ... 

     </figure> 
    <% }) %> 
    </li> 
</ul>