Как сделать галерею с помощью Grid?

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

import React from 'react'

import styled from "styled-components"

const Gallery = ({children, ...props}) => {
    const MyGallery = styled.div`
        display:grid;
        grid-template-columns: repeat(${props.count}, 1fr);

    `
    return (
        <MyGallery>
            {props.images.map(image => 
                <img src={image} />
            )}
        </MyGallery>
    )
}

export default Gallery

В браузере все выглядит так: введите сюда описание изображения

Мне нужно чтобы последние фотографии растягивались на весь экран.Чтобы получилось нечто такое

введите сюда описание изображения

При этом количество фотографий может меняться, как и количество фотографий в строку.


Ответы (0 шт):