У меня есть список карт для отображения на веб-странице. Список имеет неопределенную длину, но будет показано не более 6 карт. Я хотел бы использовать CSS Grid для отображения этого списка в виде трех столбцов и двух строк (при условии, что есть 6 элементов). Поскольку я хотел бы обеспечить поддержку IE, я бы хотел отказаться от использования grid-column-gap и поэтому хочу нацеливать элементы списка таким образом, чтобы они имели поля по мере необходимости.
- Если естьодин элемент без наценки
- Если есть два элемента, первый элемент имеет право на поле 1rem
- Три элемента, первый и второй элементы имеют право на поле 1rem
- Четыре элемента, занимающие два ряда, первый и второй элементы имеют право на поле в 1рем;первый, второй и третий элемент имеют нижнее поле 1rem
- Пять элементов, занимающие два ряда, первый, второй и четвертый элементы имеют правое поле 1rem;первый, второй и третий элемент имеют нижнее поле 1rem
- Шесть элементов, занимающих две строки, первый, второй элемент, четвертый и пятый элемент имеют правое поле 1rem;первый, второй и третий элемент имеют нижнее поле 1rem
У каждого 'li' есть класс 'listItem'. Мне бы очень хотелось нацелиться на этот класс и использовать nth-of-type, так как я чувствую, что это будет лучшим в этих обстоятельствах (например, использование nth-child в стилях 'ul').
Я бы хотел, чтобы это вступило в силу с медиа-запросом для минимальной ширины 768 пикселей;с установленным полем: 0 0 1rem 0, а также последним типом для установки поля на полях: 0 для всех элементов listItem до медиазапроса.
Заранее спасибо!